@acorex/styles 5.8.0 → 6.0.1

package/index.js

@@ -0,0 +1,191 @@
+const plugin = require("tailwindcss/plugin");
+const withAnimations = require("animated-tailwindcss");
+
+function withOpacityValue(variable) {
+  return ({ opacityValue }) => {
+    if (opacityValue === undefined) {
+      return `rgb(var(${variable}))`;
+    }
+    return `rgb(var(${variable}) / ${opacityValue})`;
+  };
+}
+
+module.exports = withAnimations({
+  prefix: "ax-",
+  content: [
+    "./src/**/*.{html,ts,scss}",
+    "./projects/**/*.{html,ts,scss}",
+    "./dist/acorex/**/*.{html,ts,scss}",
+    "./node_modules/@acorex/**/*.{html,ts,js,mjs,scss}",
+  ],
+  darkMode: "class", // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {
+        black: withOpacityValue("--ax-color-black"),
+        white: withOpacityValue("--ax-color-white"),
+        "default-background": withOpacityValue("--ax-color-default-background"),
+        "default-color": withOpacityValue("--ax-color-default-color"),
+        primary: {
+          fore: withOpacityValue("--ax-color-primary-fore"),
+          50: withOpacityValue("--ax-color-primary-50"),
+          100: withOpacityValue("--ax-color-primary-100"),
+          200: withOpacityValue("--ax-color-primary-200"),
+          300: withOpacityValue("--ax-color-primary-300"),
+          400: withOpacityValue("--ax-color-primary-400"),
+          500: withOpacityValue("--ax-color-primary-500"),
+          600: withOpacityValue("--ax-color-primary-600"),
+          700: withOpacityValue("--ax-color-primary-700"),
+          800: withOpacityValue("--ax-color-primary-800"),
+          900: withOpacityValue("--ax-color-primary-900"),
+        },
+        secondary: {
+          fore: withOpacityValue("--ax-color-secondary-fore"),
+          50: withOpacityValue("--ax-color-secondary-50"),
+          100: withOpacityValue("--ax-color-secondary-100"),
+          200: withOpacityValue("--ax-color-secondary-200"),
+          300: withOpacityValue("--ax-color-secondary-300"),
+          400: withOpacityValue("--ax-color-secondary-400"),
+          500: withOpacityValue("--ax-color-secondary-500"),
+          600: withOpacityValue("--ax-color-secondary-600"),
+          700: withOpacityValue("--ax-color-secondary-700"),
+          800: withOpacityValue("--ax-color-secondary-800"),
+          900: withOpacityValue("--ax-color-secondary-900"),
+        },
+        success: {
+          fore: withOpacityValue("--ax-color-success-fore"),
+          50: withOpacityValue("--ax-color-success-50"),
+          100: withOpacityValue("--ax-color-success-100"),
+          200: withOpacityValue("--ax-color-success-200"),
+          300: withOpacityValue("--ax-color-success-300"),
+          400: withOpacityValue("--ax-color-success-400"),
+          500: withOpacityValue("--ax-color-success-500"),
+          600: withOpacityValue("--ax-color-success-600"),
+          700: withOpacityValue("--ax-color-success-700"),
+          800: withOpacityValue("--ax-color-success-800"),
+          900: withOpacityValue("--ax-color-success-900"),
+        },
+        danger: {
+          fore: withOpacityValue("--ax-color-danger-fore"),
+          50: withOpacityValue("--ax-color-danger-50"),
+          100: withOpacityValue("--ax-color-danger-100"),
+          200: withOpacityValue("--ax-color-danger-200"),
+          300: withOpacityValue("--ax-color-danger-300"),
+          400: withOpacityValue("--ax-color-danger-400"),
+          500: withOpacityValue("--ax-color-danger-500"),
+          600: withOpacityValue("--ax-color-danger-600"),
+          700: withOpacityValue("--ax-color-danger-700"),
+          800: withOpacityValue("--ax-color-danger-800"),
+          900: withOpacityValue("--ax-color-danger-900"),
+        },
+        warning: {
+          fore: withOpacityValue("--ax-color-warning-fore"),
+          50: withOpacityValue("--ax-color-warning-50"),
+          100: withOpacityValue("--ax-color-warning-100"),
+          200: withOpacityValue("--ax-color-warning-200"),
+          300: withOpacityValue("--ax-color-warning-300"),
+          400: withOpacityValue("--ax-color-warning-400"),
+          500: withOpacityValue("--ax-color-warning-500"),
+          600: withOpacityValue("--ax-color-warning-600"),
+          700: withOpacityValue("--ax-color-warning-700"),
+          800: withOpacityValue("--ax-color-warning-800"),
+          900: withOpacityValue("--ax-color-warning-900"),
+        },
+        info: {
+          fore: withOpacityValue("--ax-color-info-fore"),
+          50: withOpacityValue("--ax-color-info-50"),
+          100: withOpacityValue("--ax-color-info-100"),
+          200: withOpacityValue("--ax-color-info-200"),
+          300: withOpacityValue("--ax-color-info-300"),
+          400: withOpacityValue("--ax-color-info-400"),
+          500: withOpacityValue("--ax-color-info-500"),
+          600: withOpacityValue("--ax-color-info-600"),
+          700: withOpacityValue("--ax-color-info-700"),
+          800: withOpacityValue("--ax-color-info-800"),
+          900: withOpacityValue("--ax-color-info-900"),
+        },
+        light: {
+          fore: withOpacityValue("--ax-color-light-fore"),
+          50: withOpacityValue("--ax-color-light-50"),
+          100: withOpacityValue("--ax-color-light-100"),
+          200: withOpacityValue("--ax-color-light-200"),
+          300: withOpacityValue("--ax-color-light-300"),
+          400: withOpacityValue("--ax-color-light-400"),
+          500: withOpacityValue("--ax-color-light-500"),
+          600: withOpacityValue("--ax-color-light-600"),
+          700: withOpacityValue("--ax-color-light-700"),
+          800: withOpacityValue("--ax-color-light-800"),
+          900: withOpacityValue("--ax-color-light-900"),
+        },
+        dark: {
+          fore: withOpacityValue("--ax-color-dark-fore"),
+          50: withOpacityValue("--ax-color-dark-50"),
+          100: withOpacityValue("--ax-color-dark-100"),
+          200: withOpacityValue("--ax-color-dark-200"),
+          300: withOpacityValue("--ax-color-dark-300"),
+          400: withOpacityValue("--ax-color-dark-400"),
+          500: withOpacityValue("--ax-color-dark-500"),
+          600: withOpacityValue("--ax-color-dark-600"),
+          700: withOpacityValue("--ax-color-dark-700"),
+          800: withOpacityValue("--ax-color-dark-800"),
+          900: withOpacityValue("--ax-color-dark-900"),
+        },
+      },
+      width: {
+        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
+      },
+      minWidth: {
+        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
+      },
+      maxWidth: {
+        "8xl": "90rem",
+        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
+      },
+      height: {
+        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
+      },
+      minHeight: {
+        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
+      },
+      maxHeight: {
+        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
+      },
+      borderRadius: {
+        default: "var(--ax-border-rounded-default)",
+      },
+    },
+  },
+ 
+  plugins: [
+    plugin(function ({ addUtilities }) {
+      const acorexClasses = {
+        ".animate-fast": {
+          animationDuration: "800ms",
+        },
+        ".animate-faster": {
+          animationDuration: "500ms",
+        },
+        ".bg-default": {
+          backgroundColor:
+            "rgb(var(--ax-color-default-background) / var(--tw-bg-opacity))",
+        },
+        ".text-default": {
+          backgroundColor:
+            "rgb(var(--ax-color-default-color) / var(--tw-text-opacity))",
+        },
+        ".rtl": {
+          direction: "rtl",
+        },
+        ".ltr": {
+          direction: "ltr",
+        },
+      };
+      addUtilities(acorexClasses, ["responsive", "hover", "focus"]);
+    }),
+    require("postcss-import"),
+    require("tailwindcss/nesting")(require("postcss-nesting")),
+    require("tailwindcss"),
+    require("autoprefixer"),
+    require("tailwind-rtl-utilities"),
+  ],
+});

package/index.scss

@@ -8,4 +8,3 @@
 @import "./src/base/index.scss";
 @import "./src/components/index.scss";
 @import "./src/utility/index.scss";
-

package/package.json

@@ -1,11 +1,18 @@
 {
-    "name": "@acorex/styles",
-    "version": "5.8.0",
-    "description": "",
-    "main": "index.js",
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "author": "",
-    "license": "ISC"
-}
+  "name": "@acorex/styles",
+  "version": "6.0.1",
+  "description": "",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "animated-tailwindcss": "^3.3.0",
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "tailwind-rtl-utilities": "^3.0.5",
+    "tailwindcss": "^3.1.3"
+  }
+}

package/src/base/index.scss

@@ -6,11 +6,13 @@
 }
 
 :root {
-    --ax-base-size: 8px;
+    --ax-size: 8px;
+    --ax-base-size: var(--ax-size);
     --ax-base-ratio: 6;
     --ax-color-default-background: 255, 255, 255;
     --ax-color-default-color: 107, 114, 128;
     --ax-overlay-full-width: 93;
+    --ax-border-rounded-default: 6px;
     @include colors($theme-colors);
 }
 

package/src/components/_action-sheet.scss

@@ -1,8 +1,7 @@
 @layer components {
-    ax-action-sheet,
     .ax-action-sheet {
         .ax-action-sheet-container {
-            @apply ax-fixed ax-bottom-0 ax-left-1/2 -ax-translate-x-1/2 ax-z-[9999] ax-w-1/3 ax-rounded-t-2xl  ax-overflow-hidden;
+            @apply ax-fixed ax-bottom-0 ax-left-1/2 -ax-translate-x-1/2 ax-z-[9999] ax-w-1/3 ax-rounded-t-default ax-overflow-hidden;
 
             @include screen(mobile) {
                 @apply ax-w-full;
@@ -12,7 +11,7 @@
             }
             .ax-action-sheet-items {
                 @apply ax-flex ax-flex-col ax-pb-3 ax-overflow-x-hidden ax-overflow-y-auto;
-                    ax-button {
+                    .ax-button {
                         @apply ax-rounded-none ax-w-full ax-text-start ax-justify-start;
                     }
             }

package/src/components/_alert.scss

@@ -1,5 +1,5 @@
 @layer components {
-    ax-alert {
+    .ax-alert {
         @apply ax-relative ax-w-full ax-flex ax-flex-col ax-bg-light-100 ax-text-light-fore ax-rounded ax-overflow-hidden ax-text-sm;
         transition: visibility 0s, opacity 0.5s ease-in-out;
 
@@ -13,24 +13,24 @@
             opacity: 1;
         }
 
-        ax-header {
+        .ax-header {
             @apply ax-flex ax-px-3.5 ax-items-center ax-py-3 ax-bg-transparent ax-border-none ax-justify-start;
-            ax-icon {
+            .ax-icon {
                 @apply ax-text-2xl;
             }
         }
 
         .ax-alert-body {
             @apply ax-flex-1 ax-p-3.5;
-            ax-icon {
+            .ax-icon {
                 @apply ax-me-3 ax-text-2xl;
             }
-            ax-button {
+            .ax-button {
                 --ax-base-size: 6px;
                 @apply ax-ring-offset-0 #{!important};
             }
-            ax-content {
-                @apply ax-flex ax-items-center ax-break-words ax-whitespace-pre;
+            .ax-content {
+                @apply ax-flex ax-items-center ax-break-words ax-whitespace-pre-wrap;
 
                 ul {
                     @apply ax-my-2 ax-ms-5 ax-list-disc;
@@ -45,19 +45,19 @@
                 }
             }
 
-            ax-suffix {
+            .ax-suffix {
                 @apply ax-block;
 
-                ax-button {
+                .ax-button {
                     @apply ax-ms-2 #{!important};
                 }
             }
 
-            ax-footer {
+            .ax-footer {
                 @apply ax-bg-transparent ax-p-0 ax-mt-3;
 
-                ax-suffix {
-                    ax-button {
+                .ax-suffix {
+                    .ax-button {
                         @apply ax-ms-0 ax-me-2 #{!important};
                     }
 
@@ -71,15 +71,14 @@
             animation-duration: 4s;
             animation-timing-function: linear;
             animation-name: progressBar;
-        }
-
-        @keyframes progressBar {
-            0% {
-                width: 100%;
-            }
+            @keyframes progressBar {
+                0% {
+                    width: 100%;
+                }
 
-            100% {
-                width: 0%;
+                100% {
+                    width: 0%;
+                }
             }
         }
 
@@ -90,7 +89,7 @@
         // primary
         &.ax-primary-default {
             @apply ax-bg-primary-500 ax-text-primary-fore dark:ax-bg-primary-800 dark:ax-text-primary-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-primary-600;
             }
             .ax-alert-progress {
@@ -99,7 +98,7 @@
         }
         &.ax-primary-twotone {
             @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-800 dark:ax-text-primary-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-primary-200 dark:ax-bg-primary-600;
             }
             .ax-alert-progress {
@@ -108,7 +107,7 @@
         }
         &.ax-primary-outline {
             @apply ax-bg-transparent ax-text-primary-500 ax-border ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-primary-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -117,7 +116,7 @@
         }
         &.ax-primary-blank {
             @apply ax-bg-transparent ax-text-primary-500 dark:ax-text-primary-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-primary-200 dark:ax-border-primary-800;
             }
             .ax-alert-progress {
@@ -128,7 +127,7 @@
         // secondary
         &.ax-secondary-default {
             @apply ax-bg-secondary-500 ax-text-secondary-fore dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-secondary-600;
             }
             .ax-alert-progress {
@@ -137,7 +136,7 @@
         }
         &.ax-secondary-twotone {
             @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-secondary-200 dark:ax-bg-secondary-600;
             }
             .ax-alert-progress {
@@ -146,7 +145,7 @@
         }
         &.ax-secondary-outline {
             @apply ax-bg-transparent ax-text-secondary-500 ax-border ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-secondary-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -155,7 +154,7 @@
         }
         &.ax-secondary-blank {
             @apply ax-bg-transparent ax-text-secondary-500 dark:ax-text-secondary-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-secondary-200 dark:ax-border-secondary-800;
             }
             .ax-alert-progress {
@@ -166,7 +165,7 @@
         // success
         &.ax-success-default {
             @apply ax-bg-success-500 ax-text-success-fore dark:ax-bg-success-800 dark:ax-text-success-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-success-600;
             }
             .ax-alert-progress {
@@ -175,7 +174,7 @@
         }
         &.ax-success-twotone {
             @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-800 dark:ax-text-success-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-success-200 dark:ax-bg-success-600;
             }
             .ax-alert-progress {
@@ -184,7 +183,7 @@
         }
         &.ax-success-outline {
             @apply ax-bg-transparent ax-text-success-500 ax-border ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-success-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -193,7 +192,7 @@
         }
         &.ax-success-blank {
             @apply ax-bg-transparent ax-text-success-500 dark:ax-text-success-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-success-200 dark:ax-border-success-800;
             }
             .ax-alert-progress {
@@ -204,7 +203,7 @@
         // warning
         &.ax-warning-default {
             @apply ax-bg-warning-800 ax-text-warning-fore dark:ax-bg-warning-800;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-warning-600;
             }
             .ax-alert-progress {
@@ -213,17 +212,16 @@
         }
         &.ax-warning-twotone {
             @apply ax-bg-warning-100 ax-text-warning-900 dark:ax-bg-warning-800 dark:ax-text-warning-fore;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-warning-200 dark:ax-bg-warning-600;
             }
             .ax-alert-progress {
                 @apply ax-bg-warning-300 dark:ax-bg-warning-500;
             }
-           
         }
         &.ax-warning-outline {
             @apply ax-bg-transparent ax-text-warning-900 ax-border ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-warning-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -232,7 +230,7 @@
         }
         &.ax-warning-blank {
             @apply ax-bg-transparent ax-text-warning-500 dark:ax-text-warning-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-warning-200 dark:ax-border-warning-800;
             }
             .ax-alert-progress {
@@ -243,7 +241,7 @@
         // danger
         &.ax-danger-default {
             @apply ax-bg-danger-500 ax-text-danger-fore dark:ax-bg-danger-800 dark:ax-text-danger-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-danger-600;
             }
             .ax-alert-progress {
@@ -252,7 +250,7 @@
         }
         &.ax-danger-twotone {
             @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-800 dark:ax-text-danger-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-danger-200 dark:ax-bg-danger-600;
             }
             .ax-alert-progress {
@@ -261,7 +259,7 @@
         }
         &.ax-danger-outline {
             @apply ax-bg-transparent ax-text-danger-500 ax-border ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-danger-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -270,7 +268,7 @@
         }
         &.ax-danger-blank {
             @apply ax-bg-transparent ax-text-danger-500 dark:ax-text-danger-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-danger-200 dark:ax-border-danger-800;
             }
             .ax-alert-progress {
@@ -281,7 +279,7 @@
         // info
         &.ax-info-default {
             @apply ax-bg-info-500 ax-text-info-fore dark:ax-bg-info-800 dark:ax-text-info-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-info-600;
             }
             .ax-alert-progress {
@@ -290,7 +288,7 @@
         }
         &.ax-info-twotone {
             @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-800 dark:ax-text-info-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-info-200 dark:ax-bg-info-600;
             }
             .ax-alert-progress {
@@ -299,7 +297,7 @@
         }
         &.ax-info-outline {
             @apply ax-bg-transparent ax-text-info-500 ax-border ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-info-100 dark:ax-bg-transparent;
             }
             .ax-alert-progress {
@@ -308,7 +306,7 @@
         }
         &.ax-info-blank {
             @apply ax-bg-transparent ax-text-info-500 dark:ax-text-info-300 ax-rounded-none;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-info-200 dark:ax-border-info-800;
             }
             .ax-alert-progress {
@@ -319,8 +317,8 @@
         // light
         &.ax-light-default {
             @apply ax-bg-light-100 dark:ax-bg-light-800 ax-text-light-fore dark:ax-text-light-100 ax-border ax-border-light-200 dark:ax-border-light-900;
-            ax-header {
-                @apply ax-bg-light-200 dark:ax-bg-light-600 ;
+            .ax-header {
+                @apply ax-bg-light-200 dark:ax-bg-light-600;
             }
             .ax-alert-progress {
                 @apply ax-bg-light-300 dark:ax-bg-light-600;
@@ -328,8 +326,8 @@
         }
         &.ax-light-twotone {
             @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-800 dark:ax-text-light-100;
-            ax-header {
-                @apply ax-bg-light-200 dark:ax-bg-light-600 ;
+            .ax-header {
+                @apply ax-bg-light-200 dark:ax-bg-light-600;
             }
             .ax-alert-progress {
                 @apply ax-bg-light-300 dark:ax-bg-light-600;
@@ -337,7 +335,7 @@
         }
         &.ax-light-outline {
             @apply ax-bg-transparent ax-text-light-500 ax-border ax-border-light-200 dark:ax-border-light-400 dark:ax-text-light-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-light-100;
             }
             .ax-alert-progress {
@@ -346,7 +344,7 @@
         }
         &.ax-light-blank {
             @apply ax-bg-transparent ax-text-light-500 dark:ax-text-light-300;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-light-200 dark:ax-border-light-500;
             }
             .ax-alert-progress {
@@ -356,7 +354,7 @@
         // dark
         &.ax-dark-default {
             @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-800 dark:ax-text-dark-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-dark-600;
             }
             .ax-alert-progress {
@@ -365,7 +363,7 @@
         }
         &.ax-dark-twotone {
             @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-800 dark:ax-text-dark-100;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-dark-200;
             }
             .ax-alert-progress {
@@ -374,7 +372,7 @@
         }
         &.ax-dark-outline {
             @apply ax-bg-transparent ax-text-dark-500 ax-border ax-border-dark-100 dark:ax-border-dark-400 dark:ax-text-dark-300;
-            ax-header {
+            .ax-header {
                 @apply ax-bg-dark-50;
             }
             .ax-alert-progress {
@@ -383,7 +381,7 @@
         }
         &.ax-dark-blank {
             @apply ax-bg-transparent ax-text-dark-500 dark:ax-text-dark-100;
-            ax-header {
+            .ax-header {
                 @apply ax-border-b ax-border-solid ax-border-dark-200 dark:ax-border-dark-200;
             }
             .ax-alert-progress {

package/src/components/_avatar.scss

@@ -1,12 +1,10 @@
 @layer components {
-    ax-avatar-group,
     .ax-avatar-group {
         @apply ax-flex;
         ax-avatar {
             @apply ax-border-2 ax-border-white -ax-m-1 dark:ax-border-dark-500;
         }
     }
-    ax-avatar,
     .ax-avatar {
         @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16;
         ax-badge {
@@ -14,7 +12,7 @@
             right: -6px;
         }
         .ax-avatar-container {
-            @apply ax-w-full ax-h-full ax-rounded-md;
+            @apply ax-w-full ax-h-full ax-rounded-default;
             .ax-default-avatar {
                 svg {
                     @apply ax-w-full;