Update: Add zn prefix

lib/components/box/box.stories.tsx

@@ -15,6 +15,6 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     children: "Actually this is a div",
-    className: "bg-primary-base p-4 text-white",
+    className: "zn-bg-primary-base zn-p-4 zn-text-white",
   },
 };

lib/components/calendar/calendar.tsx

@@ -96,7 +96,7 @@ export const Calendar = (props: ICalendar) => {
           >
             {format(currentDate, "yyyy")}
           </button>
-          <div className="flex-1" />
+          <div className="zn-flex-1" />
           <button onClick={onPrevMonth} className={theme.headerArrow()}>
             <ArrowLeft2 size={20} />
           </button>
@@ -112,14 +112,14 @@ export const Calendar = (props: ICalendar) => {
           <button onClick={onPrevYear} className={theme.headerArrow()}>
             <ArrowLeft2 size={20} />
           </button>
-          <div className="flex-1" />
+          <div className="zn-flex-1" />
           <button
             className={theme.headerButton()}
             onClick={() => setViewMode("year")}
           >
             {format(currentDate, "yyyy")}
           </button>
-          <div className="flex-1" />
+          <div className="zn-flex-1" />
           <button onClick={onNextYear} className={theme.headerArrow()}>
             <ArrowRight2 size={20} />
           </button>
@@ -134,15 +134,15 @@ export const Calendar = (props: ICalendar) => {
           <button onClick={onPrevDecade} className={theme.headerArrow()}>
             <ArrowLeft2 size={20} />
           </button>
-          <div className="flex-1" />
+          <div className="zn-flex-1" />
           <button
             className={theme.headerButton({
               isNoAction: true,
             })}
           >
             {`${format(first, "yyyy")} - ${format(last, "yyyy")}`}
           </button>
-          <div className="flex-1" />
+          <div className="zn-flex-1" />
           <button onClick={onNextDecade} className={theme.headerArrow()}>
             <ArrowRight2 size={20} />
           </button>
@@ -228,7 +228,7 @@ export const Calendar = (props: ICalendar) => {
 
       return (
         <div className={tableContainerClasses}>
-          <div className="flex flex-wrap">
+          <div className="zn-flex zn-flex-wrap">
             <table className={tableClasses}>
               {rows.map((row, i) => (
                 <tr key={i} className={valueRowClasses}>
@@ -278,7 +278,7 @@ export const Calendar = (props: ICalendar) => {
 
       return (
         <div className={tableContainerClasses}>
-          <div className="flex flex-wrap">
+          <div className="zn-flex zn-flex-wrap">
             <table className={tableClasses}>
               {rows.map((row, i) => (
                 <tr key={i} className={valueRowClasses}>

lib/components/center/center.stories.tsx

@@ -19,7 +19,7 @@ export const Primary: Story = {
     return (
       <Center
         {...rest}
-        className={twMerge("h-[100px] bg-slate-200", rest.className)}
+        className={twMerge("zn-h-[100px] zn-bg-slate-200", rest.className)}
       >
         {children}
       </Center>
@@ -36,7 +36,7 @@ export const CircleComponent: StoryObj<typeof Circle> = {
     return (
       <Circle
         {...rest}
-        className={twMerge("bg-slate-600 text-white", rest.className)}
+        className={twMerge("zn-bg-slate-600 zn-text-white", rest.className)}
       >
         {children}
       </Circle>

lib/components/flex/flex.stories.tsx

@@ -29,10 +29,10 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   render: (args) => {
     return (
-      <Flex className="bg-slate-300 h-[200px]" {...args}>
-        <Box className="bg-red-300 p-4">Block 1</Box>
+      <Flex className="zn-bg-slate-300 zn-h-[200px]" {...args}>
+        <Box className="zn-bg-red-300 zn-p-4">Block 1</Box>
         {/* <Spacer /> */}
-        <Box className="bg-teal-300 p-4">Block 2</Box>
+        <Box className="zn-bg-teal-300 zn-p-4">Block 2</Box>
       </Flex>
     );
   },
@@ -49,10 +49,12 @@ export const Primary: Story = {
 export const Spacer: Story = {
   render: (args) => {
     return (
-      <Flex className="bg-slate-300 h-[200px]" {...args}>
-        <Box className="bg-red-300 p-4">Spacer is the gap between us</Box>
+      <Flex className="zn-bg-slate-300 zn-h-[200px]" {...args}>
+        <Box className="zn-bg-red-300 zn-p-4">Spacer is the gap between us</Box>
         <FlexSpacer />
-        <Box className="bg-teal-300 p-4">Spacer is the gap between us</Box>
+        <Box className="zn-bg-teal-300 zn-p-4">
+          Spacer is the gap between us
+        </Box>
       </Flex>
     );
   },

lib/components/menu/menu.stories.tsx

@@ -42,7 +42,7 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   render: ({ children, ...rest }) => (
     <Menu {...rest}>
-      <Text className="underline cursor-pointer">{children}</Text>
+      <Text className="zn-underline zn-cursor-pointer">{children}</Text>
     </Menu>
   ),
   args: {

lib/components/modal/modal.stories.tsx

@@ -38,7 +38,7 @@ export const Primary: Story = {
     title: "Modal Title",
     showHeader: true,
     backdropClassName: "",
-    className: "w-[500px]",
+    className: "zn-w-[500px]",
     closeIcon: null,
     isOpen: true,
   },
@@ -68,7 +68,7 @@ export const CenteredModal: Story = {
     isOpen: true,
     title: "Modal Title",
     showHeader: true,
-    className: "w-[500px]",
+    className: "zn-w-[500px]",
   },
 };
 
@@ -77,6 +77,6 @@ export const NoHeaderModal: Story = {
     children: "Hey, this is your modal mate!",
     isOpen: true,
     showHeader: false,
-    className: "w-[400px]",
+    className: "zn-w-[400px]",
   },
 };

lib/components/popover/popover.stories.tsx

@@ -44,8 +44,11 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   render: ({ children, content, ...rest }) => (
-    <Popover {...rest} content={<Box className="max-w-[250px]">{content}</Box>}>
-      <Text className="underline cursor-pointer">{children}</Text>
+    <Popover
+      {...rest}
+      content={<Box className="zn-max-w-[250px]">{content}</Box>}
+    >
+      <Text className="zn-underline zn-cursor-pointer">{children}</Text>
     </Popover>
   ),
   args: {

lib/customization/styles/components/alert.styles.ts

@@ -2,34 +2,34 @@ import { cva } from "class-variance-authority";
 
 const base = cva(
   [
-    "block",
-    "flex",
-    "relative",
-    "items-start",
-    "justify-start",
-    "gap-3",
-    "py-3",
-    "px-3",
+    "zn-block",
+    "zn-flex",
+    "zn-relative",
+    "zn-items-start",
+    "zn-justify-start",
+    "zn-gap-3",
+    "zn-py-3",
+    "zn-px-3",
   ],
   {
     variants: {
       variant: {
-        subtle: ["before:hidden"],
+        subtle: ["before:zn-hidden"],
         solid: [],
         "left-accent": [
-          "before:h-full",
-          "before:w-1",
-          "before:top-0",
-          "before:absolute",
-          "before:left-0",
+          "before:zn-h-full",
+          "before:zn-w-1",
+          "before:zn-top-0",
+          "before:zn-absolute",
+          "before:zn-left-0",
         ],
         "top-accent": [
-          "before:h-1",
-          "before:w-full",
-          "before:top-0",
-          "before:absolute",
-          "before:left-0",
-          "before:right-0",
+          "before:zn-h-1",
+          "before:zn-w-full",
+          "before:zn-top-0",
+          "before:zn-absolute",
+          "before:zn-left-0",
+          "before:zn-right-0",
         ],
       },
       status: {
@@ -43,42 +43,42 @@ const base = cva(
       {
         variant: ["subtle", "left-accent", "top-accent"],
         status: "info",
-        class: ["bg-white", "before:bg-info-base"],
+        class: ["zn-bg-white", "before:zn-bg-info-base"],
       },
       {
         variant: ["subtle", "left-accent", "top-accent"],
         status: "success",
-        class: ["bg-white", "before:bg-success-base"],
+        class: ["zn-bg-white", "before:zn-bg-success-base"],
       },
       {
         variant: ["subtle", "left-accent", "top-accent"],
         status: "warning",
-        class: ["bg-white", "before:bg-warning-base"],
+        class: ["zn-bg-white", "before:zn-bg-warning-base"],
       },
       {
         variant: ["subtle", "left-accent", "top-accent"],
         status: "error",
-        class: ["bg-white", "before:bg-error-base"],
+        class: ["zn-bg-white", "before:zn-bg-error-base"],
       },
       {
         variant: "solid",
         status: "info",
-        class: "bg-info-base",
+        class: "zn-bg-info-base",
       },
       {
         variant: "solid",
         status: "success",
-        class: "bg-success-base",
+        class: "zn-bg-success-base",
       },
       {
         variant: "solid",
         status: "warning",
-        class: "bg-warning-base",
+        class: "zn-bg-warning-base",
       },
       {
         variant: "solid",
         status: "error",
-        class: "bg-error-base",
+        class: "zn-bg-error-base",
       },
     ],
     defaultVariants: {
@@ -88,13 +88,13 @@ const base = cva(
   }
 );
 
-const icon = cva(["text-2xl", "border", "rounded-full", "p-2"], {
+const icon = cva(["zn-text-2xl", "zn-border", "zn-rounded-full", "zn-p-2"], {
   variants: {
     status: {
-      info: ["text-info-base"],
-      success: ["text-success-base"],
-      warning: ["text-warning-base"],
-      error: ["text-error-base"],
+      info: ["zn-text-info-base"],
+      success: ["zn-text-success-base"],
+      warning: ["zn-text-warning-base"],
+      error: ["zn-text-error-base"],
     },
     variant: {
       subtle: [],
@@ -107,38 +107,38 @@ const icon = cva(["text-2xl", "border", "rounded-full", "p-2"], {
     {
       variant: ["subtle", "left-accent", "top-accent"],
       status: "info",
-      class: ["text-info-base", "bg-info-10"],
+      class: ["zn-text-info-base", "zn-bg-info-10"],
     },
     {
       variant: ["subtle", "left-accent", "top-accent"],
       status: "success",
-      class: ["text-success-base", "bg-success-10"],
+      class: ["zn-text-success-base", "zn-bg-success-10"],
     },
     {
       variant: ["subtle", "left-accent", "top-accent"],
       status: "warning",
-      class: ["text-warning-base", "bg-warning-10"],
+      class: ["zn-text-warning-base", "zn-bg-warning-10"],
     },
     {
       variant: ["subtle", "left-accent", "top-accent"],
       status: "error",
-      class: ["text-error-base", "bg-error-10"],
+      class: ["zn-text-error-base", "zn-bg-error-10"],
     },
     {
       variant: "solid",
       status: ["info", "success", "warning", "error"],
-      class: ["border-none", "bg-white"],
+      class: ["zn-border-none", "zn-bg-white"],
     },
   ],
 });
 
-const text = cva(["text-base"], {
+const text = cva(["zn-text-base"], {
   variants: {
     status: {
-      info: ["text-info-base"],
-      success: ["text-success-base"],
-      warning: ["text-warning-base"],
-      error: ["text-error-base"],
+      info: ["zn-text-info-base"],
+      success: ["zn-text-success-base"],
+      warning: ["zn-text-warning-base"],
+      error: ["zn-text-error-base"],
     },
     variant: {
       subtle: [],
@@ -151,27 +151,27 @@ const text = cva(["text-base"], {
     {
       variant: ["subtle", "left-accent", "top-accent"],
       status: ["info", "success", "warning", "error"],
-      class: "text-gray-900",
+      class: "zn-text-gray-900",
     },
     {
       variant: "solid",
       status: ["info", "success", "warning", "error"],
-      class: "text-white",
+      class: "zn-text-white",
     },
   ],
 });
-const close = cva(["font-medium", "absolute", "top-3", "right-3"], {
+const close = cva(["zn-font-medium", "zn-absolute", "zn-top-3", "zn-right-3"], {
   variants: {
     variant: {
-      subtle: ["!text-gray-400"],
-      solid: ["!text-white"],
-      "left-accent": ["!text-gray-400"],
-      "top-accent": ["!text-gray-400"],
+      subtle: ["!zn-text-gray-400"],
+      solid: ["!zn-text-white"],
+      "left-accent": ["!zn-text-gray-400"],
+      "top-accent": ["!zn-text-gray-400"],
     },
   },
 });
-const titleText = cva(["font-medium", "m-0", "text-sm"]);
-const descriptionText = cva(["m-0", "text-sm", "font-normal"]);
+const titleText = cva(["zn-font-medium", "zn-m-0", "zn-text-sm"]);
+const descriptionText = cva(["zn-m-0", "zn-text-sm", "zn-font-normal"]);
 
 const alertStyles = {
   base,