@progressio_resources/gravity-design-system 3.9.2 → 4.0.0

package/package.json

@@ -1,32 +1,30 @@
 {
   "name": "@progressio_resources/gravity-design-system",
   "description": "Gravity Design System",
-  "version": "3.9.2",
+  "version": "4.0.0",
   "license": "SEE LICENSE IN LIBRARY-LICENSE",
   "peerDependencies": {
-    "@angular/common": "^16.2.12",
-    "@angular/core": "^16.2.12",
-    "@angular/localize": "^16.2.12",
-    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
+    "@angular/common": "^21.1.4",
+    "@angular/core": "^21.1.4",
+    "@angular/localize": "^21.1.4",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
     "@popperjs/core": "^2.11.8",
-    "angular-svg-icon": "^16.1.0",
-    "angular-svg-icon-preloader": "^6.0.0",
-    "ngx-bootstrap": "^11.0.2"
+    "angular-svg-icon": "^19.1.1",
+    "angular-svg-icon-preloader": "^19.2.0",
+    "ngx-bootstrap": "^21.0.1"
   },
   "dependencies": {
     "tslib": "^2.6.2"
   },
   "sideEffects": false,
   "module": "fesm2022/progressio_resources-gravity-design-system.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/progressio_resources-gravity-design-system.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/progressio_resources-gravity-design-system.mjs",
-      "esm": "./esm2022/progressio_resources-gravity-design-system.mjs",
+      "types": "./types/progressio_resources-gravity-design-system.d.ts",
       "default": "./fesm2022/progressio_resources-gravity-design-system.mjs"
     }
   }

package/src/lib/assets/icon-set/gt-icon-percent/gt-icon-percent-lg-24.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17132_3564)">
+<path d="M17.7363 0.530273C18.0589 0.00567114 18.7456 -0.15767 19.2695 0.165039C19.7933 0.48816 19.957 1.17626 19.6348 1.70117L6.2627 23.4688C5.94004 23.9934 5.25345 24.157 4.72949 23.834C4.2057 23.5108 4.04279 22.8228 4.36523 22.2979L17.7363 0.530273ZM18.9434 13.6816C21.5074 13.8118 23.5635 15.8718 23.6934 18.4404L23.7002 18.6982C23.7002 21.4725 21.4548 23.7216 18.6855 23.7217C15.9162 23.7217 13.6709 21.4725 13.6709 18.6982L13.6777 18.4404C13.812 15.7862 16.0027 13.6758 18.6855 13.6758L18.9434 13.6816ZM18.6855 15.9082C17.1472 15.9082 15.8996 17.1572 15.8994 18.6982C15.8994 20.2395 17.147 21.4893 18.6855 21.4893C20.224 21.4892 21.4707 20.2394 21.4707 18.6982C21.4705 17.1572 20.2239 15.9083 18.6855 15.9082ZM5.31445 0.279297C8.0835 0.279493 10.328 2.52776 10.3281 5.30176C10.3281 8.07589 8.0836 10.325 5.31445 10.3252C2.54514 10.3252 0.299805 8.07601 0.299805 5.30176C0.299962 2.52764 2.54524 0.279297 5.31445 0.279297ZM5.31445 2.51172C3.77604 2.51172 2.52848 3.76064 2.52832 5.30176C2.52832 6.84301 3.77595 8.09277 5.31445 8.09277C6.85279 8.09258 8.09961 6.84289 8.09961 5.30176C8.09945 3.76076 6.8527 2.51192 5.31445 2.51172Z" fill="var(--icon-color, #394C6E)"/>
+</g>
+<defs>
+<clipPath id="clip0_17132_3564">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/assets/icon-set/gt-icon-percent/gt-icon-percent-md-16.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17132_3559)">
+<path d="M11.6978 0.393555C11.9367 0.00462987 12.4456 -0.11641 12.8335 0.123047C13.2209 0.362721 13.3415 0.872733 13.103 1.26172L4.30322 15.6064C4.06433 15.9954 3.55538 16.1164 3.16748 15.877C2.77978 15.6373 2.65926 15.1274 2.89795 14.7383L11.6978 0.393555ZM12.5698 9.11035C14.2573 9.19611 15.6103 10.5534 15.6958 12.2461L15.6997 12.416C15.6997 14.2443 14.2224 15.7266 12.3999 15.7266C10.5775 15.7264 9.1001 14.2442 9.1001 12.416L9.104 12.2461C9.19234 10.4971 10.6344 9.10561 12.3999 9.10547L12.5698 9.11035ZM12.3999 10.7607C11.4888 10.7609 10.7506 11.5021 10.7505 12.416C10.7505 13.33 11.4888 14.0711 12.3999 14.0713C13.3112 14.0713 14.0503 13.3301 14.0503 12.416C14.0502 11.502 13.3111 10.7607 12.3999 10.7607ZM3.6001 0.275391C5.42256 0.275391 6.89977 1.75781 6.8999 3.58594C6.8999 5.41417 5.42264 6.89648 3.6001 6.89648C1.77765 6.89638 0.300293 5.41411 0.300293 3.58594C0.300421 1.75788 1.77773 0.275497 3.6001 0.275391ZM3.6001 1.93066C2.689 1.93077 1.95081 2.67199 1.95068 3.58594C1.95068 4.49999 2.68892 5.24111 3.6001 5.24121C4.51137 5.24121 5.25049 4.50006 5.25049 3.58594C5.25036 2.67193 4.51129 1.93066 3.6001 1.93066Z" fill="var(--icon-color, #394C6E)"/>
+</g>
+<defs>
+<clipPath id="clip0_17132_3559">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/assets/icon-set/gt-icon-percent/gt-icon-percent-sm-12.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17132_3554)">
+<path d="M8.86768 0.265625C9.0289 0.00322785 9.37229 -0.0783368 9.63428 0.0830078C9.8959 0.244629 9.97786 0.588228 9.81689 0.850586L3.13135 11.7344C2.97015 11.9967 2.62768 12.0782 2.36572 11.917C2.10376 11.7555 2.02107 11.4119 2.18213 11.1494L8.86768 0.265625ZM9.6001 6.85352C10.7795 6.97383 11.7174 7.91404 11.8374 9.0957L11.8501 9.35254C11.8501 10.7397 10.7278 11.8642 9.34326 11.8643C7.95868 11.8643 6.83643 10.7397 6.83643 9.35254L6.84912 9.0957C6.97772 7.82939 8.04537 6.84082 9.34326 6.84082L9.6001 6.85352ZM9.34326 7.95703C8.57405 7.95703 7.95068 8.58189 7.95068 9.35254C7.95069 10.1232 8.57405 10.748 9.34326 10.748C10.1124 10.7479 10.7358 10.1231 10.7358 9.35254C10.7358 8.58195 10.1124 7.95713 9.34326 7.95703ZM2.65674 0.139648C4.04133 0.139648 5.16357 1.26419 5.16357 2.65137C5.16356 4.03854 4.04132 5.16309 2.65674 5.16309C1.27224 5.16299 0.149912 4.03848 0.149902 2.65137C0.149902 1.26425 1.27223 0.139746 2.65674 0.139648ZM2.65674 1.25586C1.88761 1.25596 1.26416 1.88077 1.26416 2.65137C1.26417 3.42195 1.88761 4.04678 2.65674 4.04688C3.42595 4.04688 4.04931 3.42201 4.04932 2.65137C4.04932 1.88071 3.42595 1.25586 2.65674 1.25586Z" fill="var(--icon-color, #394C6E)"/>
+</g>
+<defs>
+<clipPath id="clip0_17132_3554">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/assets/icon-set/gt-icon-percent/gt-icon-percent-xl-32.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17132_3569)">
+<path d="M23.5854 0.740234C24.037 0.00907016 24.9974 -0.21927 25.731 0.230469C26.4645 0.6806 26.6937 1.63853 26.2427 2.37012L8.41455 31.2598C7.96304 31.9912 7.00173 32.2195 6.26807 31.7695C5.53453 31.3193 5.30609 30.3615 5.75732 29.6299L23.5854 0.740234ZM25.2583 18.2295C28.677 18.4022 31.4181 21.1359 31.5913 24.5449L31.6001 24.8877C31.6001 28.5696 28.6069 31.5546 24.9146 31.5547C21.2222 31.5547 18.229 28.5696 18.229 24.8877L18.2378 24.5449C18.4168 21.0224 21.3375 18.2207 24.9146 18.2207L25.2583 18.2295ZM24.9146 21.332C22.9453 21.332 21.3481 22.924 21.3481 24.8877C21.3482 26.8514 22.9453 28.4434 24.9146 28.4434C26.8838 28.4433 28.48 26.8513 28.48 24.8877C28.48 22.924 26.8838 21.3321 24.9146 21.332ZM7.08545 0.444336C10.7778 0.444336 13.771 3.42943 13.771 7.11133C13.7708 10.7931 10.7777 13.7773 7.08545 13.7773C3.39322 13.7773 0.400079 10.793 0.399902 7.11133C0.399902 3.42946 3.39312 0.444381 7.08545 0.444336ZM7.08545 3.55566C5.11622 3.55571 3.52002 5.14768 3.52002 7.11133C3.5202 9.07483 5.11633 10.6669 7.08545 10.667C9.05461 10.667 10.6517 9.07486 10.6519 7.11133C10.6519 5.14765 9.05471 3.55566 7.08545 3.55566Z" fill="var(--icon-color, #394C6E)"/>
+</g>
+<defs>
+<clipPath id="clip0_17132_3569">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/assets/icon-set/gt-icon-url/gt-icon-url-lg-24.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17132_3542)">
+<path d="M12.4153 10.1631C12.6682 9.64583 13.2908 9.43171 13.8059 9.68555C14.3229 9.94045 14.8052 10.2884 15.2288 10.7256C17.2287 12.7902 17.2288 16.1259 15.2288 18.1904L11.1116 22.4395C9.0959 24.5199 5.81572 24.5199 3.80005 22.4395C1.80035 20.3749 1.80019 17.0391 3.80005 14.9746L5.40845 13.3154C5.80868 12.9029 6.46609 12.8942 6.8772 13.2959C7.28822 13.6978 7.29682 14.3585 6.89673 14.7715L5.28931 16.4297C4.07413 17.684 4.07428 19.7299 5.28931 20.9844C6.4891 22.2228 8.42252 22.2228 9.62231 20.9844L13.7395 16.7344C14.9543 15.48 14.9546 13.4349 13.7395 12.1807C13.4828 11.9157 13.1952 11.7087 12.8909 11.5586C12.3759 11.3047 12.1626 10.6803 12.4153 10.1631ZM12.8889 1.56055C14.9046 -0.519971 18.1848 -0.52 20.2004 1.56055C22.2003 3.62508 22.2004 6.96088 20.2004 9.02539L18.593 10.6846C18.193 11.0974 17.5356 11.1064 17.1243 10.7051C16.713 10.3032 16.7037 9.64256 17.1038 9.22949L18.7112 7.56934C19.9259 6.31498 19.926 4.2699 18.7112 3.01562C17.5114 1.77747 15.5779 1.7775 14.3782 3.01562L10.261 7.26465C9.04586 8.51906 9.0458 10.565 10.261 11.8193C10.5178 12.0844 10.8061 12.2903 11.1106 12.4404C11.6256 12.6945 11.8371 13.3206 11.5842 13.8379C11.3311 14.3547 10.7095 14.5682 10.1946 14.3145C9.67767 14.0596 9.19527 13.7125 8.77173 13.2754C6.77155 11.2108 6.7716 7.87415 8.77173 5.80957L12.8889 1.56055Z" fill="var(--icon-color, #394C6E)"/>
+</g>
+<defs>
+<clipPath id="clip0_17132_3542">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/assets/icon-set/gt-icon-url/gt-icon-url-md-16.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17132_3537)">
+<path d="M8.19824 6.75C8.38637 6.36669 8.84851 6.20772 9.23145 6.39551C9.58214 6.56797 9.91024 6.80413 10.1973 7.09961C11.5516 8.49448 11.5516 10.7467 10.1973 12.1416L7.47461 14.9443C6.10798 16.3512 3.88325 16.3512 2.5166 14.9443C1.16169 13.5494 1.16178 11.2974 2.5166 9.90234L3.5791 8.80762C3.8768 8.50128 4.36691 8.49389 4.67285 8.79199C4.9785 9.09009 4.98478 9.58029 4.6875 9.88672L3.625 10.9814C2.85382 11.7754 2.8538 13.0713 3.625 13.8652C4.38464 14.6467 5.60669 14.6469 6.36621 13.8652L9.08887 11.0625C9.85992 10.2687 9.85981 8.97263 9.08887 8.17871C8.92607 8.01116 8.74313 7.88079 8.55078 7.78613C8.16796 7.59759 8.01035 7.13365 8.19824 6.75ZM8.52637 1.05469C9.89302 -0.352109 12.1178 -0.352179 13.4844 1.05469C14.8392 2.4497 14.8393 4.70272 13.4844 6.09766L12.4209 7.19238C12.1232 7.49834 11.634 7.50483 11.3281 7.20703C11.0224 6.90891 11.0161 6.41873 11.3135 6.1123L12.376 5.01758C13.1471 4.22373 13.1469 2.92869 12.376 2.13477C11.6163 1.35273 10.3944 1.35276 9.63477 2.13477L6.91211 4.93652C6.14102 5.73044 6.14097 7.02642 6.91211 7.82031C7.07498 7.98793 7.25677 8.1192 7.44922 8.21387C7.83231 8.40237 7.99085 8.86622 7.80273 9.25C7.61441 9.63341 7.15059 9.7909 6.76758 9.60254C6.41727 9.43016 6.09047 9.19554 5.80371 8.90039C4.44884 7.50544 4.44891 5.25242 5.80371 3.85742L8.52637 1.05469Z" fill="var(--icon-color, #394C6E)"/>
+</g>
+<defs>
+<clipPath id="clip0_17132_3537">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/assets/icon-set/gt-icon-url/gt-icon-url-sm-12.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17132_3532)">
+<path d="M6.20911 5.08105C6.33692 4.8225 6.65303 4.71482 6.91321 4.8418C7.17426 4.96926 7.41708 5.14476 7.63098 5.36328C8.64097 6.39555 8.64105 8.06251 7.63098 9.09473L5.5509 11.2197C4.53263 12.2598 2.87578 12.2598 1.85754 11.2197C0.847411 10.1875 0.847503 8.51959 1.85754 7.4873L2.66907 6.65723C2.87124 6.45079 3.20351 6.44752 3.41125 6.64844C3.61886 6.84938 3.62402 7.17925 3.422 7.38574L2.6095 8.21484C1.99589 8.84203 1.99586 9.86503 2.6095 10.4922C3.21562 11.1114 4.19283 11.1114 4.79895 10.4922L6.87903 8.36719C7.49256 7.74011 7.49238 6.71802 6.87903 6.09082C6.74927 5.95825 6.60318 5.85437 6.44934 5.7793C6.18946 5.6523 6.08176 5.33955 6.20911 5.08105ZM6.44934 0.780273C7.46761 -0.260003 9.12342 -0.259947 10.1417 0.780273C11.1522 1.8126 11.1522 3.47939 10.1417 4.51172L9.3302 5.3418C9.12802 5.54819 8.79574 5.55247 8.58801 5.35156C8.38074 5.15073 8.37569 4.82071 8.57727 4.61426L9.38977 3.78418C10.0036 3.15698 10.0036 2.13501 9.38977 1.50781C8.7837 0.888722 7.8074 0.88878 7.20129 1.50781L5.12122 3.63281C4.50781 4.26001 4.50765 5.28209 5.12122 5.90918C5.25079 6.04156 5.39633 6.14468 5.54993 6.21973C5.81004 6.34667 5.91767 6.65936 5.79016 6.91797C5.6624 7.17663 5.34823 7.28322 5.08801 7.15625C4.82688 7.02878 4.58322 6.8553 4.36926 6.63672C3.35902 5.60449 3.35916 3.93759 4.36926 2.90527L6.44934 0.780273Z" fill="var(--icon-color, #394C6E)"/>
+</g>
+<defs>
+<clipPath id="clip0_17132_3532">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/assets/icon-set/gt-icon-url/gt-icon-url-xl-32.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17132_3547)">
+<path d="M16.4911 13.5303C16.8451 12.8093 17.7164 12.5122 18.4374 12.8662C19.1335 13.2081 19.7833 13.6728 20.3534 14.2588C23.0458 17.0265 23.0459 21.4989 20.3534 24.2666L14.8651 29.9072C12.1509 32.6969 7.73358 32.697 5.01941 29.9072C2.32685 27.1395 2.32685 22.6681 5.01941 19.9004L7.16199 17.6982C7.72205 17.1229 8.64203 17.1101 9.21765 17.6699C9.79335 18.2301 9.80611 19.1508 9.24597 19.7266L7.10339 21.9297C5.50998 23.568 5.51014 26.2396 7.10339 27.8779C8.67561 29.494 11.2079 29.494 12.7802 27.8779L18.2684 22.2373C19.8622 20.5989 19.8622 17.9265 18.2684 16.2881C17.9316 15.9418 17.554 15.6724 17.1552 15.4766C16.4345 15.1225 16.1374 14.2512 16.4911 13.5303ZM17.1337 2.09277C19.8479 -0.697269 24.2661 -0.697269 26.9803 2.09277C29.6725 4.86046 29.6726 9.33099 26.9803 12.0986L24.8378 14.3018C24.2777 14.8771 23.3567 14.8899 22.7811 14.3301C22.2054 13.7699 22.1936 12.8482 22.7538 12.2725L24.8964 10.0703C26.4899 8.43204 26.4897 5.75948 24.8964 4.12109C23.3241 2.50498 20.7908 2.50498 19.2186 4.12109L13.7313 9.76172C12.1374 11.4001 12.1374 14.0735 13.7313 15.7119C14.0681 16.058 14.4459 16.3267 14.8446 16.5225C15.5653 16.8766 15.8625 17.7488 15.5087 18.4697C15.1546 19.1906 14.2833 19.4877 13.5624 19.1338C12.8661 18.7919 12.2166 18.3263 11.6464 17.7402C8.95388 14.9725 8.95383 10.5011 11.6464 7.7334L17.1337 2.09277Z" fill="var(--icon-color, #394C6E)"/>
+</g>
+<defs>
+<clipPath id="clip0_17132_3547">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/lib/assets/json/icons.json

@@ -1008,6 +1008,22 @@
       "iconName": "gt-icon-payout-xl-32",
       "iconPath": "/assets/gravity/icon-set/gt-icon-payout/gt-icon-payout-xl-32.svg"
     },
+    {
+      "iconName": "gt-icon-percent-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-percent/gt-icon-percent-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-percent-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-percent/gt-icon-percent-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-percent-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-percent/gt-icon-percent-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-percent-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-percent/gt-icon-percent-xl-32.svg"
+    },
     {
       "iconName": "gt-icon-plus-lg-24",
       "iconPath": "/assets/gravity/icon-set/gt-icon-plus/gt-icon-plus-lg-24.svg"
@@ -1392,6 +1408,22 @@
       "iconName": "gt-icon-update-xl-32",
       "iconPath": "/assets/gravity/icon-set/gt-icon-update/gt-icon-update-xl-32.svg"
     },
+    {
+      "iconName": "gt-icon-url-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-url/gt-icon-url-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-url-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-url/gt-icon-url-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-url-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-url/gt-icon-url-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-url-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-url/gt-icon-url-xl-32.svg"
+    },
     {
       "iconName": "gt-icon-user-lg-24",
       "iconPath": "/assets/gravity/icon-set/gt-icon-user/gt-icon-user-lg-24.svg"

package/src/lib/styles/_functions.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @function to-rgb($value) {
-  @return red($value), green($value), blue($value);
-}
+  @return color.red($value), color.green($value), color.blue($value);
+}

package/src/lib/styles/_responsive.scss

@@ -1,61 +1,62 @@
-@import "foundations/breakpoints/breakpoints";
+@use "foundations/breakpoints/breakpoints" as br;
+@use "sass:map";
 
 .hide-xl {
-  @media (max-width: map-get($breakpoints, xl)) {
+  @media (max-width: map.get(br.$breakpoints, xl)) {
     display: none;
   }
 }
 
 .hide-lg {
-  @media (max-width: map-get($breakpoints, lg)) {
+  @media (max-width: map.get(br.$breakpoints, lg)) {
     display: none;
   }
 }
 
 .hide-md {
-  @media (max-width: map-get($breakpoints, md)) {
+  @media (max-width: map.get(br.$breakpoints, md)) {
     display: none;
   }
 }
 
 .hide-sm {
-  @media (max-width: map-get($breakpoints, sm)) {
+  @media (max-width: map.get(br.$breakpoints, sm)) {
     display: none;
   }
 }
 
 .hide-xs {
-  @media (max-width: map-get($breakpoints, xs)) {
+  @media (max-width: map.get(br.$breakpoints, xs)) {
     display: none;
   }
 }
 
 .show-xl {
-  @media (min-width: map-get($breakpoints, xl) + 1) {
+  @media (min-width: map.get(br.$breakpoints, xl) + 1) {
     display: none;
   }
 }
 
 .show-lg {
-  @media (min-width: map-get($breakpoints, lg) + 1) {
+  @media (min-width: map.get(br.$breakpoints, lg) + 1) {
     display: none;
   }
 }
 
 .show-md {
-  @media (min-width: map-get($breakpoints, md) + 1) {
+  @media (min-width: map.get(br.$breakpoints, md) + 1) {
     display: none;
   }
 }
 
 .show-sm {
-  @media (min-width: map-get($breakpoints, sm) + 1) {
+  @media (min-width: map.get(br.$breakpoints, sm) + 1) {
     display: none;
   }
 }
 
 .show-xs {
-  @media (min-width: map-get($breakpoints, xs) + 1) {
+  @media (min-width: map.get(br.$breakpoints, xs) + 1) {
     display: none;
   }
 }

package/src/lib/styles/components/_card_highlight.scss

@@ -1,13 +1,13 @@
-@import "../foundations/typography/hero.typography";
-@import "../foundations/border-radius/hero.border-radius";
-@import "../shared";
+@use "../foundations/typography/hero.typography" as typography;
+@use "../foundations/border-radius/hero.border-radius" as border-radius;
+@use "../shared" as *;
 
 .gravity-card-highlight {
   @extend .hr-body, .md-regular;
 
   background-color: var(--surface-primary);
   border-left: 1.25rem solid var(--bg-highlight-neutro-secondary);
-  border-radius: $border-radius-md;
+  border-radius: border-radius.$border-radius-md;
   color: var(--text-primary);
   padding: 1.5rem;
 
@@ -24,7 +24,7 @@
 
     &.gravity-card-content {
       border: 1px solid var(--divider-primary);
-      border-radius: $border-radius-md;
+      border-radius: border-radius.$border-radius-md;
       margin-top: 1rem;
     }
 

package/src/lib/styles/components/_datepicker-v2.scss

@@ -1,8 +1,8 @@
-@import "../foundations/z-index/z-index";
+@use "../foundations/z-index/z-index" as z-index;
 
 gt-daterangepicker-container, gt-datepicker-container {
   cursor: default;
-  z-index: $z-index-content;
+  z-index: z-index.$z-index-content;
 }
 
 gt-daterangepicker-inline-container, gt-datepicker-inline-container {

package/src/lib/styles/components/_datepicker.scss

@@ -1,13 +1,14 @@
-@import "../shared";
-@import "../foundations/z-index/z-index";
-@import "../foundations/spacing/spacing";
-@import "../foundations/typography/hero.typography";
-@import "../foundations/border-radius/hero.border-radius";
+@use "../shared" as *;
+@use "../foundations/z-index/z-index" as z-index;
+@use "../foundations/spacing/spacing" as spacing;
+@use "../foundations/typography/hero.typography" as typography;
+@use "../foundations/border-radius/hero.border-radius" as border-radius;
+@use "sass:map";
 
 $datepicker-min-width: 15rem;
 
 bs-datepicker-container {
-  z-index: $z-index-content;
+  z-index: z-index.$z-index-content;
 
   .bs-datepicker-container {
     padding: 0;
@@ -16,14 +17,14 @@ bs-datepicker-container {
 
 .gravity-datepicker-dialog {
   background-color: var(--bg-calender-primary);
-  border-radius: $border-radius-md;
+  border-radius: border-radius.$border-radius-md;
   box-shadow: 0 0 10px #AAA;
   color: var(--on-bg-calender-primary);
 
   .bs-datepicker-head {
     background-color: var(--bg-calendar-nav-primary);
-    border-top-left-radius: $border-radius-md;
-    border-top-right-radius: $border-radius-md;
+    border-top-left-radius: border-radius.$border-radius-md;
+    border-top-right-radius: border-radius.$border-radius-md;
     color: var(--on-bg-calendar-nav-primary);
     height: 3.125rem;
     min-width: $datepicker-min-width;
@@ -40,7 +41,7 @@ bs-datepicker-container {
 
         background-color: var(--bg-calendar-nav-primary);
         border: none;
-        border-radius: $border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         color: var(--arrow-calendar-active-primary);
         cursor: pointer;
         height: 2rem;
@@ -73,13 +74,13 @@ bs-datepicker-container {
         align-items: center;
         background-color: var(--bg-calendar-nav-primary);
         border: none;
-        border-radius: $border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         color: var(--on-bg-calendar-nav-primary);
         cursor: pointer;
         display: flex;
         height: 2rem;
         outline: none;
-        padding-inline: map-get($spacing-values, sm);
+        padding-inline: map.get(spacing.$spacing-values, sm);
 
         &:not([disabled]):hover {
           background-color: var(--bg-arrow-calendar-hover-primary);
@@ -103,7 +104,7 @@ bs-datepicker-container {
       width: 100%;
 
       td {
-        border-radius: $border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         color: var(--number-calender-active-primary);
         cursor: pointer;
         height: 2rem;
@@ -112,7 +113,7 @@ bs-datepicker-container {
 
         span {
           align-items: center;
-          border-radius: $border-radius-rounded;
+          border-radius: border-radius.$border-radius-rounded;
           display: flex;
           height: 2rem;
           justify-content: center;
@@ -183,7 +184,7 @@ bs-datepicker-container {
 
       span {
         @extend .hr-label, .sm-regular;
-        border-radius: $border-radius-rounded;
+        border-radius: border-radius.$border-radius-rounded;
         margin: 0 !important;
 
         &.selected {

package/src/lib/styles/components/_offcanvas.scss

@@ -1,7 +1,7 @@
 @use "../foundations/breakpoints/_breakpoints.scss" as br;
-@import "../foundations/spacing/spacing";
-@import "../foundations/z-index/z-index";
-@import "../foundations/elevation/hero.elevation";
+@use "../foundations/spacing/spacing" as spacing;
+@use "../foundations/z-index/z-index" as z-index;
+@use "../foundations/elevation/hero.elevation" as elevation;
 
 .fade {
   transition: opacity .15s linear;
@@ -37,7 +37,7 @@
   position: fixed;
   right: 0;
   top: 0;
-  z-index: $z-index-overlay;
+  z-index: z-index.$z-index-overlay;
   transform: translateX(100%);
   transition: transform .3s ease-in-out;
   background-color: var(--surface-secondary);

package/src/lib/styles/components/_tables.scss

@@ -1,7 +1,7 @@
-@import "./link";
-@import "../foundations/z-index/z-index";
-@import "../foundations/typography/hero.typography";
-@import "../foundations/border-radius/hero.border-radius";
+@use "./link" as *;
+@use "../foundations/z-index/z-index" as z-index;
+@use "../foundations/typography/hero.typography" as typography;
+@use "../foundations/border-radius/hero.border-radius" as border-radius;
 
 .table-container.xl, .table-container.lg {
   table {
@@ -16,11 +16,11 @@
       color: var(--on-bg-highlight-neutro-secondary);
 
       th:first-of-type {
-        border-top-left-radius: $border-radius-sm;
+        border-top-left-radius: border-radius.$border-radius-sm;
       }
 
       th:last-of-type {
-        border-top-right-radius: $border-radius-sm;
+        border-top-right-radius: border-radius.$border-radius-sm;
       }
     }
 
@@ -142,7 +142,7 @@
 
     tr {
       background-color: var(--surface-primary);
-      border-radius: $border-radius-sm;
+      border-radius: border-radius.$border-radius-sm;
       color: var(--text-primary);
       margin-bottom: 1rem;
       padding: 0.75rem 1rem; //12px 16px
@@ -224,13 +224,13 @@
   .panel {
     background-color: var(--surface-secondary);
     border: 0.5px solid var(--divider-primary);
-    border-radius: $border-radius-sm;
+    border-radius: border-radius.$border-radius-sm;
     padding: 0.25rem 1rem;
     position: absolute;
     right: 0;
     top: 3rem;
     width: 12rem;
-    z-index: $z-index-content;
+    z-index: z-index.$z-index-content;
 
     &:not(.open) {
       display: none;

package/src/lib/styles/foundations/colors/themes/_hero.theme.scss

@@ -1,4 +1,4 @@
-@import "../primitives/hero.primitives";
+@use "../primitives/hero.primitives" as *;
 
 // button-primary
 $on-bg-button-active-primary-light: $n900;

package/src/lib/styles/foundations/colors/tokens/_hero.tokens.scss

@@ -1,5 +1,5 @@
-@import "../themes/hero.theme";
-@import "../../../functions";
+@use "../themes/hero.theme" as *;
+@use "../../../functions" as *;
 
 .hero-light-theme {
   // button-primary
@@ -699,7 +699,7 @@
   --bg-segmented-button-primary: #{$bg-segmented-button-primary-dark};
 
   // Currencies
-  --btc-primary: #{$c10};
+  --btc-primary: #{$btc-primary-dark};
   --busd-primary: #{$busd-primary-dark};
   --ltc-primary: #{$on-bg-currency};
   --ltc-secondary: #{$ltc-primary-dark};

package/src/lib/styles/foundations/spacing/_spacing.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $scss-types: padding, margin;
 $spacing-sizes: none, xxs, xs, sm, md, lg, xl, xxl, xxxl, xxxxl, xxxxxl;
 $spacing-types: '', -top, -bottom, -left, -right, -block, -inline;
@@ -28,7 +30,7 @@ $spacing-values: (
     @each $spacing-type in $spacing-types {
       //.gravity-{{padding,margin}}-{{top,bottom,left,right,block,inline}}-{{xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl, xxxxl, xxxxxl}}
       .gravity-#{$scss-type}#{$spacing-type}-#{$size} {
-        #{$scss-type}#{$spacing-type}: map-get($spacing-values, $size) !important;
+        #{$scss-type}#{$spacing-type}: map.get($spacing-values, $size) !important;
       }
     }
   }

package/src/lib/styles/gravity-design-system.scss

@@ -1,20 +1,20 @@
-@import "./responsive";
-@import "./shared";
+@use "./responsive";
+@use "./shared";
 
-//Components
-@import "./components/link";
-@import "./components/tables";
-@import "./components/offcanvas";
-@import "./components/datepicker";
-@import "./components/scroll_bar";
-@import "./components/datepicker-v2";
-@import "./components/card_highlight";
+// Components
+@use "./components/link";
+@use "./components/tables";
+@use "./components/offcanvas";
+@use "./components/datepicker";
+@use "./components/scroll_bar";
+@use "./components/datepicker-v2";
+@use "./components/card_highlight";
 
-//Foundations
-@import "./foundations/grids/grids";
-@import "./foundations/z-index/z-index";
-@import "./foundations/spacing/spacing";
-@import "./foundations/breakpoints/breakpoints";
+// Foundations
+@use "./foundations/grids/grids";
+@use "./foundations/z-index/z-index";
+@use "./foundations/spacing/spacing";
+@use "./foundations/breakpoints/breakpoints";
 
-//Overwrite
-@import "./overwrite/bootstrap/bootstrap-export";
+// Overwrite
+@use "./overwrite/bootstrap/bootstrap-export";

package/src/lib/styles/overwrite/bootstrap/_bootstrap-export.scss

@@ -1,2 +1,2 @@
-@import "bootstrap";
-@import "modal";
+@use "bootstrap";
+@use "modal";

package/src/lib/styles/overwrite/bootstrap/_modal.scss

@@ -1,5 +1,5 @@
-@import "../../foundations/z-index/z-index";
-@import "../../foundations/border-radius/hero.border-radius";
+@use "../../foundations/z-index/z-index" as z-index;
+@use "../../foundations/border-radius/hero.border-radius" as border-radius;
 
 $modal-margin: 3.5rem;
 
@@ -13,7 +13,7 @@ $modal-margin: 3.5rem;
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: $z-index-overlay;
+  z-index: z-index.$z-index-overlay;
 }
 
 .modal-dialog {
@@ -110,7 +110,7 @@ $modal-margin: 3.5rem;
 
   background-clip: padding-box;
   background-color: var(--dialog-background-color);
-  border-radius: $border-radius-md;
+  border-radius: border-radius.$border-radius-md;
   box-shadow: 0 27px 34px #000c208f;
   color: var(--dialog-text-color);
   display: flex;
@@ -122,7 +122,7 @@ $modal-margin: 3.5rem;
 }
 
 .modal-backdrop {
-  z-index: $z-index-overlay !important;
+  z-index: z-index.$z-index-overlay !important;
   background-color: var(--backdrop-primary);
   height: 100vh;
   left: 0;

package/src/lib/styles/themes/_hero.scss

@@ -1,4 +1,4 @@
-@import "../foundations/border-radius/hero.border-radius";
-@import "../foundations/colors/tokens/hero.tokens";
-@import "../foundations/elevation/hero.elevation";
-@import "../foundations/typography/hero.typography";
+@use "../foundations/border-radius/hero.border-radius" as *;
+@use "../foundations/colors/tokens/hero.tokens" as *;
+@use "../foundations/elevation/hero.elevation" as *;
+@use "../foundations/typography/hero.typography" as *;

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.html

@@ -1,10 +1,13 @@
-<div *ngIf="isThemeLight" class="tooltip-arrow"></div>
+@if (isThemeLight) {
+  <div class="tooltip-arrow"></div>
+}
 
 <!--Si el contentType es template, se usa el ngTemplate sino usa el htmlOrStringTemplate-->
-<div *ngIf="options['contentType'] === 'template' else htmlOrStringTemplate">
-  <ng-container *ngTemplateOutlet="value"></ng-container>
-</div>
-
-<ng-template #htmlOrStringTemplate>
+@if (options['contentType'] === 'template') {
+  <div>
+    <ng-container *ngTemplateOutlet="value"></ng-container>
+  </div>
+} @else {
   <div [innerHTML]="value"></div>
-</ng-template>
+}
+