@axa-fr/design-system-look-and-feel-css 1.0.0-ci.351 → 1.0.3-alpha.144

package/dist/look-and-feel.scss

@@ -1,12 +1,10 @@
 @use "common/tokens";
 @use "Accordion/Accordion";
 @use "AccordionCore/AccordionCore";
-@use "Button/Button";
 @use "Card/Card";
 @use "Divider/Divider";
 @use "Layout/Footer/Footer";
 @use "Stepper/Stepper";
-@use "Layout/Header/Header";
 @use "Form/Radio/Radio";
 @use "Tabs/Tabs";
 @use "Form/Checkbox/Checkbox";
@@ -20,7 +18,6 @@
 @use "Pagination/Pagination";
 @use "Pagination/PaginationDesktop";
 @use "Pagination/PaginationMobile";
-@use "Loader/Loader";
 @use "./List/List";
 @use "List/ClickList/ClickList";
 @use "./List/ContentItemDuo/ContentItemDuo";
@@ -28,6 +25,8 @@
 @use "Tag/Tag";
 @use "Form/InputError/InputError";
 @use "IconBg/IconBg";
+@use "Layout/Header/BurgerMenu/BurgerMenu";
+@use "Layout/Header/Header";
 @use "Layout/Header/NavBar/NavBar";
 @use "Layout/Header/PreviousLink/PreviousLink";
 @use "Title/Title";

package/package.json

@@ -1,29 +1,33 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-css",
-  "version": "1.0.0-ci.351",
+  "version": "1.0.3-alpha.144",
   "description": "",
-  "main": "index.js",
+  "sass": "dist/look-and-feel.scss",
+  "style": "dist/look-and-feel.css",
+  "exports": {
+    "./logo-axa.svg": "./files/assets/logo-axa.svg",
+    "./dist/common/assets/logo-axa.svg": "./files/assets/logo-axa.svg",
+    "./dist/*": {
+      "default": "./dist/*"
+    }
+  },
   "files": [
-    "dist"
+    "dist",
+    "files"
   ],
   "scripts": {
     "prebuild": "rimraf dist",
-    "start": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --watch --config ../../config/postcss.config.js",
-    "build": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --env production --config ../../config/postcss.config.js",
-    "start:storybook": "storybook dev -p 6008",
-    "build:storybook": "storybook build",
-    "build-storybook": "storybook build",
-    "eslint": "eslint src --ext js,jsx,ts,tsx",
-    "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
+    "build": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --env production",
+    "postbuild": "copyfiles --up 1 \"src/**/*.{scss,css}\" dist",
     "stylelint": "stylelint \"src/**/*.{scss,css}\"",
-    "stylelint:fix": "stylelint \"src/**/*.{scss,css}\" --fix",
-    "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|scss|css)\" --check --ignore-unknown",
-    "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|scss|css)\" --write --ignore-unknown",
-    "tsc": "tsc --noEmit",
-    "chromatic": "npx chromatic"
+    "stylelint:fix": "stylelint \"src/**/*.{scss,css}\" --fix"
   },
-  "dependencies": {
-    "rc-slider": "^10.5.0"
+  "devDependencies": {
+    "@axa-fr/postcss-config-design-system": "*",
+    "@axa-fr/prettier-config-design-system": "*",
+    "@axa-fr/stylelint-config-design-system": "*",
+    "copyfiles": "^2.4.1",
+    "rimraf": "^6.0.1"
   },
   "peerDependencies": {
     "@material-symbols/svg-400": ">= 0.19.0"
@@ -33,52 +37,6 @@
       "optional": true
     }
   },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^2.0.2",
-    "@csstools/postcss-sass": "^5.1.1",
-    "@material-symbols/svg-400": "*",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-storysource": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/html": "^8.3.5",
-    "@storybook/html-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/theming": "^8.3.5",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "browserslist": "^4.23.3",
-    "chromatic": "^11.12.0",
-    "copyfiles": "^2.4.1",
-    "cssnano": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.0",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.9.0",
-    "postcss": "^8.4.35",
-    "postcss-cli": "^11.0.0",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^9.5.2",
-    "postcss-scss": "^4.0.9",
-    "prettier": "^3.3.3",
-    "rimraf": "^6.0.1",
-    "storybook": "^8.3.5",
-    "stylelint": "^16.11.0",
-    "stylelint-config-pretty-order": "^0.5.1",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-config-standard": "^36.0.0",
-    "stylelint-prettier": "^5.0.0",
-    "tsc-files": "^1.1.4",
-    "vite": "^5.4.8"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AxaFrance/design-system.git"
@@ -104,13 +62,13 @@
     ]
   },
   "lint-staged": {
-    "*.(js|jsx|ts|tsx)": "eslint --fix",
-    "*.(ts|tsx)": "tsc-files --noEmit",
-    "*.(scss|css)": "stylelint --fix",
-    "*.mdx": "prettier --write"
+    "*.(scss|css)": "stylelint --fix"
+  },
+  "prettier": "@axa-fr/prettier-config-design-system",
+  "stylelint": {
+    "extends": "@axa-fr/stylelint-config-design-system"
   },
   "volta": {
-    "node": "20.10.0",
-    "npm": "10.2.5"
+    "extends": "../../../package.json"
   }
-}
+}

package/dist/Button/Button.css

@@ -1 +0,0 @@
-.af-btn-client{align-items:center;background-color:var(--color-axa);border:0;border-radius:8px;cursor:pointer;display:flex;font-family:var(--font-family-base);font-weight:600;gap:1rem;justify-content:center;min-height:3.5rem;padding:.8rem 1.2rem;transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client,.af-btn-client:hover{color:var(--color-white);text-decoration:none}.af-btn-client:hover{background-color:var(--color-blue-1)}.af-btn-client:active,.af-btn-client:focus{background-color:var(--color-btn-light);color:var(--color-white);outline:none}.af-btn-client:focus-visible{outline:2px solid var(--color-blue-3);outline-offset:3px}.af-btn-client>svg{aspect-ratio:1}.af-btn-client--ghost{background-color:initial;color:var(--color-axa);gap:.25rem;min-height:auto;min-width:auto;padding:0}.af-btn-client--ghost:hover{background-color:initial;color:var(--color-blue-1)}.af-btn-client--ghost:active,.af-btn-client--ghost:focus{background-color:initial;color:var(--color-btn-light)}.af-btn-client--primary-business{background-color:var(--color-btn-business)}.af-btn-client--primary-business:hover{background-color:var(--color-btn-business-dark)}.af-btn-client--primary-business:focus{background-color:var(--color-btn-business-light)}.af-btn-client--tertiary{background-color:var(--color-btn-tertiary-bg);color:var(--color-axa)}.af-btn-client--tertiary:hover{background-color:var(--color-btn-tertiary-bg-darker);color:var(--color-axa)}.af-btn-client--tertiary:active,.af-btn-client--tertiary:focus{background-color:var(--color-btn-tertiary-bg-lighter);color:var(--color-axa)}.af-btn-client--secondary{background-color:var(--color-white);box-shadow:0 0 0 1px var(--color-axa) inset;color:var(--color-axa)}.af-btn-client--secondary:active,.af-btn-client--secondary:focus,.af-btn-client--secondary:hover{background-color:var(--color-white);box-shadow:0 0 0 2px var(--color-blue-1) inset;color:var(--color-blue-1)}.af-btn-client--secondary:active{background-color:var(--color-blue-2)}.af-btn-client--secondary-error{background-color:var(--color-white);box-shadow:0 0 0 1px var(--color-red-700) inset;color:var(--color-red-700)}.af-btn-client--secondary-error:active,.af-btn-client--secondary-error:focus,.af-btn-client--secondary-error:hover{background-color:var(--color-white);box-shadow:0 0 0 2px var(--color-btn-error-text) inset;color:var(--color-btn-error-text)}.af-btn-client--secondary-error:active{background-color:var(--color-btn-error-bg)}.af-btn-client__wrapper{align-items:center;display:flex;justify-content:center;line-height:1}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{background-color:var(--color-gray-300);box-shadow:none;color:var(--color-btn-disabled-text);cursor:not-allowed}.af-btn-client:disabled:focus,.af-btn-client:disabled:hover,.af-btn-client[aria-disabled=true]:focus,.af-btn-client[aria-disabled=true]:hover{background-color:var(--color-gray-300);border-color:#0000;color:var(--color-btn-disabled-text)}

package/dist/Button/Button.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Button/Button.scss%23sass","../../src/Button/Button.scss"],"names":[],"mappings":"AAAA,eAME,kBAAA,CAOA,iCAAA,CATA,QAAA,CACA,iBAAA,CAaA,cAAA,CAjBA,YAAA,CAQA,mCAAA,CACA,eAAA,CAFA,QAAA,CADA,sBAAA,CALA,iBAAA,CACA,oBAAA,CAWA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CAEA,wBAAA,CAAA,gBCAF,CDEE,oCATA,wBAAA,CADA,oBCaF,CDHE,qBAGE,oCCAJ,CDGE,2CAGE,uCAAA,CADA,wBAAA,CAEA,YCFJ,CDKE,6BACE,qCAAA,CACA,kBCHJ,CDME,mBACE,cCJJ,CDOE,sBAME,wBAAA,CADA,sBAAA,CADA,UAAA,CAFA,eAAA,CADA,cAAA,CAEA,SCFJ,CDOI,4BAEE,wBAAA,CADA,yBCJN,CDQI,yDAGE,wBAAA,CADA,4BCNN,CDWE,iCACE,0CCTJ,CDWI,uCACE,+CCTN,CDYI,uCACE,gDCVN,CDcE,yBAEE,6CAAA,CADA,sBCXJ,CDcI,+BAEE,oDAAA,CADA,sBCXN,CDeI,+DAGE,qDAAA,CADA,sBCbN,CDkBE,0BAEE,mCAAA,CACA,2CAAA,CAFA,sBCdJ,CDkBI,iGAIE,mCAAA,CACA,8CAAA,CAFA,yBChBN,CDqBI,iCACE,oCCnBN,CDuBE,gCAEE,mCAAA,CACA,+CAAA,CAFA,0BCnBJ,CDuBI,mHAIE,mCAAA,CACA,sDAAA,CAFA,iCCrBN,CD0BI,uCACE,0CCxBN,CD4BE,wBAEE,kBAAA,CADA,YAAA,CAEA,sBAAA,CACA,aC1BJ,CD6BE,2DAGE,sCAAA,CACA,eAAA,CAFA,oCAAA,CAGA,kBC5BJ,CD8BI,8IAIE,sCAAA,CAFA,kBAAA,CACA,oCC5BN","file":"Button.css","sourcesContent":[".af-btn-client {\n  display: flex;\n  min-height: 3.5rem;\n  padding: 0.8rem 1.2rem;\n  border: 0;\n  border-radius: 8px;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  font-family: var(--font-family-base);\n  font-weight: 600;\n  text-decoration: none;\n  color: var(--color-white);\n  background-color: var(--color-axa);\n  transition-duration: var(--transition-duration);\n  transition-property: width, height, border, color, background-color, outline,\n    box-shadow;\n  transition-timing-function: linear;\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    text-decoration: none;\n    color: var(--color-white);\n    background-color: var(--color-blue-1);\n  }\n\n  &:active,\n  &:focus {\n    color: var(--color-white);\n    background-color: var(--color-btn-light);\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--color-blue-3);\n    outline-offset: 3px;\n  }\n\n  & > svg {\n    aspect-ratio: 1;\n  }\n\n  &--ghost {\n    min-width: auto;\n    min-height: auto;\n    padding: 0;\n    gap: 0.25rem;\n    color: var(--color-axa);\n    background-color: transparent;\n\n    &:hover {\n      color: var(--color-blue-1);\n      background-color: transparent;\n    }\n\n    &:focus,\n    &:active {\n      color: var(--color-btn-light);\n      background-color: transparent;\n    }\n  }\n\n  &--primary-business {\n    background-color: var(--color-btn-business);\n\n    &:hover {\n      background-color: var(--color-btn-business-dark);\n    }\n\n    &:focus {\n      background-color: var(--color-btn-business-light);\n    }\n  }\n\n  &--tertiary {\n    color: var(--color-axa);\n    background-color: var(--color-btn-tertiary-bg);\n\n    &:hover {\n      color: var(--color-axa);\n      background-color: var(--color-btn-tertiary-bg-darker);\n    }\n\n    &:focus,\n    &:active {\n      color: var(--color-axa);\n      background-color: var(--color-btn-tertiary-bg-lighter);\n    }\n  }\n\n  &--secondary {\n    color: var(--color-axa);\n    background-color: var(--color-white);\n    box-shadow: 0 0 0 1px var(--color-axa) inset;\n\n    &:hover,\n    &:focus,\n    &:active {\n      color: var(--color-blue-1);\n      background-color: var(--color-white);\n      box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n    }\n\n    &:active {\n      background-color: var(--color-blue-2);\n    }\n  }\n\n  &--secondary-error {\n    color: var(--color-red-700);\n    background-color: var(--color-white);\n    box-shadow: 0 0 0 1px var(--color-red-700) inset;\n\n    &:hover,\n    &:focus,\n    &:active {\n      color: var(--color-btn-error-text);\n      background-color: var(--color-white);\n      box-shadow: 0 0 0 2px var(--color-btn-error-text) inset;\n    }\n\n    &:active {\n      background-color: var(--color-btn-error-bg);\n    }\n  }\n\n  &__wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    color: var(--color-btn-disabled-text);\n    background-color: var(--color-gray-300);\n    box-shadow: none;\n    cursor: not-allowed;\n\n    &:hover,\n    &:focus {\n      border-color: transparent;\n      color: var(--color-btn-disabled-text);\n      background-color: var(--color-gray-300);\n    }\n  }\n}\n",".af-btn-client {\n  display: flex;\n  min-height: 3.5rem;\n  padding: 0.8rem 1.2rem;\n  border: 0;\n  border-radius: 8px;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  font-family: var(--font-family-base);\n  font-weight: 600;\n  text-decoration: none;\n  color: var(--color-white);\n  background-color: var(--color-axa);\n  transition-duration: var(--transition-duration);\n  transition-property: width, height, border, color, background-color, outline,\n    box-shadow;\n  transition-timing-function: linear;\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    text-decoration: none;\n    color: var(--color-white);\n    background-color: var(--color-blue-1);\n  }\n\n  &:active,\n  &:focus {\n    color: var(--color-white);\n    background-color: var(--color-btn-light);\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--color-blue-3);\n    outline-offset: 3px;\n  }\n\n  & > svg {\n    aspect-ratio: 1;\n  }\n\n  &--ghost {\n    min-width: auto;\n    min-height: auto;\n    padding: 0;\n    gap: 0.25rem;\n    color: var(--color-axa);\n    background-color: transparent;\n\n    &:hover {\n      color: var(--color-blue-1);\n      background-color: transparent;\n    }\n\n    &:focus,\n    &:active {\n      color: var(--color-btn-light);\n      background-color: transparent;\n    }\n  }\n\n  &--primary-business {\n    background-color: var(--color-btn-business);\n\n    &:hover {\n      background-color: var(--color-btn-business-dark);\n    }\n\n    &:focus {\n      background-color: var(--color-btn-business-light);\n    }\n  }\n\n  &--tertiary {\n    color: var(--color-axa);\n    background-color: var(--color-btn-tertiary-bg);\n\n    &:hover {\n      color: var(--color-axa);\n      background-color: var(--color-btn-tertiary-bg-darker);\n    }\n\n    &:focus,\n    &:active {\n      color: var(--color-axa);\n      background-color: var(--color-btn-tertiary-bg-lighter);\n    }\n  }\n\n  &--secondary {\n    color: var(--color-axa);\n    background-color: var(--color-white);\n    box-shadow: 0 0 0 1px var(--color-axa) inset;\n\n    &:hover,\n    &:focus,\n    &:active {\n      color: var(--color-blue-1);\n      background-color: var(--color-white);\n      box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n    }\n\n    &:active {\n      background-color: var(--color-blue-2);\n    }\n  }\n\n  &--secondary-error {\n    color: var(--color-red-700);\n    background-color: var(--color-white);\n    box-shadow: 0 0 0 1px var(--color-red-700) inset;\n\n    &:hover,\n    &:focus,\n    &:active {\n      color: var(--color-btn-error-text);\n      background-color: var(--color-white);\n      box-shadow: 0 0 0 2px var(--color-btn-error-text) inset;\n    }\n\n    &:active {\n      background-color: var(--color-btn-error-bg);\n    }\n  }\n\n  &__wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    color: var(--color-btn-disabled-text);\n    background-color: var(--color-gray-300);\n    box-shadow: none;\n    cursor: not-allowed;\n\n    &:hover,\n    &:focus {\n      border-color: transparent;\n      color: var(--color-btn-disabled-text);\n      background-color: var(--color-gray-300);\n    }\n  }\n}\n"]}

package/dist/Button/Button.scss

@@ -1,149 +0,0 @@
-.af-btn-client {
-  display: flex;
-  min-height: 3.5rem;
-  padding: 0.8rem 1.2rem;
-  border: 0;
-  border-radius: 8px;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  font-family: var(--font-family-base);
-  font-weight: 600;
-  text-decoration: none;
-  color: var(--color-white);
-  background-color: var(--color-axa);
-  transition-duration: var(--transition-duration);
-  transition-property: width, height, border, color, background-color, outline,
-    box-shadow;
-  transition-timing-function: linear;
-  cursor: pointer;
-  user-select: none;
-
-  &:hover {
-    text-decoration: none;
-    color: var(--color-white);
-    background-color: var(--color-blue-1);
-  }
-
-  &:active,
-  &:focus {
-    color: var(--color-white);
-    background-color: var(--color-btn-light);
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue-3);
-    outline-offset: 3px;
-  }
-
-  & > svg {
-    aspect-ratio: 1;
-  }
-
-  &--ghost {
-    min-width: auto;
-    min-height: auto;
-    padding: 0;
-    gap: 0.25rem;
-    color: var(--color-axa);
-    background-color: transparent;
-
-    &:hover {
-      color: var(--color-blue-1);
-      background-color: transparent;
-    }
-
-    &:focus,
-    &:active {
-      color: var(--color-btn-light);
-      background-color: transparent;
-    }
-  }
-
-  &--primary-business {
-    background-color: var(--color-btn-business);
-
-    &:hover {
-      background-color: var(--color-btn-business-dark);
-    }
-
-    &:focus {
-      background-color: var(--color-btn-business-light);
-    }
-  }
-
-  &--tertiary {
-    color: var(--color-axa);
-    background-color: var(--color-btn-tertiary-bg);
-
-    &:hover {
-      color: var(--color-axa);
-      background-color: var(--color-btn-tertiary-bg-darker);
-    }
-
-    &:focus,
-    &:active {
-      color: var(--color-axa);
-      background-color: var(--color-btn-tertiary-bg-lighter);
-    }
-  }
-
-  &--secondary {
-    color: var(--color-axa);
-    background-color: var(--color-white);
-    box-shadow: 0 0 0 1px var(--color-axa) inset;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--color-blue-1);
-      background-color: var(--color-white);
-      box-shadow: 0 0 0 2px var(--color-blue-1) inset;
-    }
-
-    &:active {
-      background-color: var(--color-blue-2);
-    }
-  }
-
-  &--secondary-error {
-    color: var(--color-red-700);
-    background-color: var(--color-white);
-    box-shadow: 0 0 0 1px var(--color-red-700) inset;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--color-btn-error-text);
-      background-color: var(--color-white);
-      box-shadow: 0 0 0 2px var(--color-btn-error-text) inset;
-    }
-
-    &:active {
-      background-color: var(--color-btn-error-bg);
-    }
-  }
-
-  &__wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-  }
-
-  &:disabled,
-  &[aria-disabled="true"] {
-    color: var(--color-btn-disabled-text);
-    background-color: var(--color-gray-300);
-    box-shadow: none;
-    cursor: not-allowed;
-
-    &:hover,
-    &:focus {
-      border-color: transparent;
-      color: var(--color-btn-disabled-text);
-      background-color: var(--color-gray-300);
-    }
-  }
-}

package/dist/Loader/Loader.css

@@ -1 +0,0 @@
-.af-loader__container{align-items:center;animation:spin 2s linear infinite;border-top:1px solid var(--color-gray-200);border:1px solid var(--color-gray-200);border-radius:50%;border-top-color:var(--color-axa);container-type:inline-size;display:flex;flex-direction:column;justify-content:center;margin:auto}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/dist/Loader/Loader.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Loader/Loader.scss%23sass","../../src/Loader/Loader.scss"],"names":[],"mappings":"AACE,sBAQE,kBAAA,CAEA,iCAAA,CANA,0CAAA,CACA,sCAAA,CACA,iBAAA,CADA,iCAAA,CAHA,0BAAA,CADA,YAAA,CAMA,qBAAA,CAEA,sBAAA,CANA,WCOJ,CDIA,gBACE,GCDF,sBACE,CDIA,GCFA,uBACA,CACF","file":"Loader.css","sourcesContent":[".af-loader {\n  &__container {\n    display: flex;\n    container-type: inline-size;\n    margin: auto;\n    border: 1px solid var(--color-gray-200);\n    border-top: 1px solid var(--color-axa);\n    border-radius: 50%;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    animation: spin 2s linear infinite;\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n",".af-loader {\n  &__container {\n    display: flex;\n    container-type: inline-size;\n    margin: auto;\n    border: 1px solid var(--color-gray-200);\n    border-top: 1px solid var(--color-axa);\n    border-radius: 50%;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    animation: spin 2s linear infinite;\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n"]}

package/dist/Loader/Loader.scss

@@ -1,24 +0,0 @@
-.af-loader {
-  &__container {
-    display: flex;
-    container-type: inline-size;
-    margin: auto;
-    border: 1px solid var(--color-gray-200);
-    border-top: 1px solid var(--color-axa);
-    border-radius: 50%;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    animation: spin 2s linear infinite;
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}