npm - globuswebcomponents - Versions diffs - 0.9.1 → 0.9.3 - Mend

globuswebcomponents 0.9.1 → 0.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (319) hide show

package/dist/esm/gb-export-dropdown-item_2.entry.js CHANGED Viewed

@@ -11,7 +11,7 @@ const GbExportDropdownItem = class {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '4c4f0100ed87bb656771663247635e0024cd9824', class: `export_container ${this.state === 'disabled' ? 'disabled' : ''}` }, h("div", { key: 'c0f9d7b9e2d378742202b15d60564797e07cf8be', class: `content ${this.state === 'disabled' ? 'disabled' : ''}` }, h("div", { key: 'd72abd0f692b876a1cb42317a808aee667149ac0', class: `wrapper` }, h("div", { key: '69a2e110a83fe1c2b8c59d5f120f2fc177c1c920', class: `container` }, h("div", { key: '128992121c8fa36447cccbeb98cdfde7652eb04e', class: `icon` }, this.type === 'pdf' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `pdf_svg ${this.type} ${this.state === 'disabled' ? 'disabled' : ''}` }, h("path", { opacity: "0.4", d: "M2.50117 9.15797C2.78483 8.46126 4.09165 7.08156 7.08171 7.08156C7.33288 7.08156 7.99177 6.82886 7.95767 5.45969C7.94376 4.22219 8.39482 1.77401 10.2871 1.66843C10.662 1.66663 11.0697 1.66663 11.5152 1.66663C13.0144 1.66663 13.764 1.66663 14.3627 1.87679C15.3252 2.21467 16.0844 2.92921 16.4434 3.83508C16.6667 4.39856 16.6667 5.10408 16.6667 6.51511V14.1666C16.6667 14.9411 16.6667 15.3283 16.6026 15.6503C16.3396 16.9726 15.3059 18.0062 13.9836 18.2692C13.6616 18.3333 13.2744 18.3333 12.5 18.3333H8.93939C6.22172 18.3333 4.86289 18.3333 3.91922 17.6684C3.64885 17.4779 3.40882 17.252 3.20642 16.9976C2.5 16.1094 2.5 14.8305 2.5 12.2727V10.1515C2.5 9.79565 2.5 9.46547 2.50117 9.15797Z", fill: "#E21B2E" }), h("path", { d: "M5.83333 15V12.9166M5.83333 12.9166V11.6666C5.83333 11.2738 5.83333 11.0774 5.96147 10.9553C6.08961 10.8333 6.29585 10.8333 6.70833 10.8333H7.29167C7.89573 10.8333 8.38542 11.2997 8.38542 11.875C8.38542 12.4503 7.89573 12.9166 7.29167 12.9166H5.83333ZM17.5 10.8333H16.4062C15.7188 10.8333 15.3751 10.8333 15.1615 11.0367C14.9479 11.2401 14.9479 11.5675 14.9479 12.2222V12.9166M14.9479 15V12.9166M14.9479 12.9166H16.7708M12.5 18.3333H8.93939C6.22172 18.3333 4.86289 18.3333 3.91922 17.6684C3.64885 17.4779 3.40882 17.252 3.20642 16.9976C2.5 16.1094 2.5 14.8305 2.5 12.2727V10.1515C2.5 7.68217 2.5 6.44751 2.89078 5.46142C3.51901 3.87614 4.84761 2.6257 6.53197 2.03442C7.57969 1.66663 8.89151 1.66663 11.5152 1.66663C13.0144 1.66663 13.764 1.66663 14.3627 1.87679C15.3252 2.21467 16.0844 2.92921 16.4434 3.83508C16.6667 4.39856 16.6667 5.10408 16.6667 6.51511V8.33329M2.5 9.99996C2.5 8.46584 3.74365 7.22218 5.27778 7.22218C5.8326 7.22218 6.4867 7.3194 7.02614 7.17486C7.50543 7.04643 7.8798 6.67206 8.00823 6.19276C8.15277 5.65332 8.05556 4.99922 8.05556 4.4444C8.05556 2.91028 9.29921 1.66663 10.8333 1.66663M13.125 12.9166C13.125 14.0672 12.1456 15 10.9375 15C10.6649 15 10.5286 15 10.4271 14.9441C10.184 14.8105 10.2083 14.5399 10.2083 14.3055V11.5277C10.2083 11.2933 10.184 11.0228 10.4271 10.8891C10.5286 10.8333 10.6649 10.8333 10.9375 10.8333C12.1456 10.8333 13.125 11.766 13.125 12.9166Z", stroke: "#E21B2E", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `csv_svg ${this.type} ${this.state === 'disabled' ? 'disabled' : ''}` }, h("path", { opacity: "0.4", d: "M2.50141 9.15797C2.78507 8.46126 4.0919 7.08156 7.08195 7.08156C7.33312 7.08156 7.99201 6.82886 7.95791 5.45969C7.94401 4.22219 8.39506 1.77401 10.2873 1.66843C10.6623 1.66663 11.0699 1.66663 11.5154 1.66663C13.0146 1.66663 13.7642 1.66663 14.3629 1.87679C15.3254 2.21467 16.0846 2.92921 16.4436 3.83508C16.6669 4.39856 16.6669 5.10408 16.6669 6.51511V14.1666C16.6669 14.9411 16.6669 15.3283 16.6029 15.6503C16.3398 16.9726 15.3062 18.0062 13.9839 18.2692C13.6619 18.3333 13.2747 18.3333 12.5002 18.3333H8.93964C6.22197 18.3333 4.86313 18.3333 3.91947 17.6684C3.64909 17.4779 3.40906 17.252 3.20666 16.9976C2.50024 16.1094 2.50024 14.8305 2.50024 12.2727V10.1515C2.50024 9.79565 2.50024 9.46547 2.50141 9.15797Z", fill: "#079455" }), h("path", { d: "M7.82922 11.7147C7.84826 12.1285 8.19913 12.4485 8.6129 12.4294C9.02668 12.4104 9.34668 12.0595 9.32764 11.6458L7.82922 11.7147ZM9.32764 14.1875C9.34668 13.7737 9.02668 13.4229 8.6129 13.4038C8.19913 13.3848 7.84826 13.7048 7.82922 14.1185L9.32764 14.1875ZM18.2025 11.0961C18.3476 10.7081 18.1507 10.276 17.7628 10.1308C17.3748 9.98571 16.9427 10.1826 16.7975 10.5705L18.2025 11.0961ZM16.2804 14.0935L15.5779 13.8307L16.2804 14.0935ZM15.2442 14.0935L15.9467 13.8307L15.9467 13.8307L15.2442 14.0935ZM14.7271 10.5705C14.582 10.1826 14.1498 9.98571 13.7619 10.1308C13.3739 10.276 13.1771 10.7081 13.3222 11.0961L14.7271 10.5705ZM12.2678 11.5833C12.682 11.5833 13.0178 11.2475 13.0178 10.8333C13.0178 10.4191 12.682 10.0833 12.2678 10.0833V11.5833ZM10.5747 14.25C10.1605 14.25 9.82472 14.5857 9.82472 15C9.82472 15.4142 10.1605 15.75 10.5747 15.75V14.25ZM12.0709 14.9471L11.7841 14.2541H11.7841L12.0709 14.9471ZM12.0709 12.9695L12.3577 12.2765V12.2765L12.0709 12.9695ZM10.8439 12.8638L10.5571 13.5568H10.5571L10.8439 12.8638ZM10.8439 10.8862L10.5571 10.1932L10.8439 10.8862ZM12.5 13.943L11.75 13.9428V13.943H12.5ZM12.5 13.9736H11.75V13.9738L12.5 13.9736ZM12.5 19.0833C12.9142 19.0833 13.25 18.7475 13.25 18.3333C13.25 17.9191 12.9142 17.5833 12.5 17.5833V19.0833ZM15.9167 8.33329C15.9167 8.74751 16.2525 9.08329 16.6667 9.08329C17.0809 9.08329 17.4167 8.74751 17.4167 8.33329H15.9167ZM14.3627 1.87679L14.6111 1.16913V1.16913L14.3627 1.87679ZM16.4434 3.83508L17.1406 3.55877L16.4434 3.83508ZM2.89078 5.46142L3.58803 5.73773L2.89078 5.46142ZM6.53197 2.03442L6.78039 2.74208L6.78039 2.74208L6.53197 2.03442ZM3.91922 17.6684L3.48726 18.2815H3.48726L3.91922 17.6684ZM3.20642 16.9976L3.79339 16.5307H3.79339L3.20642 16.9976ZM1.75 9.99996C1.75 10.4142 2.08579 10.75 2.5 10.75C2.91421 10.75 3.25 10.4142 3.25 9.99996H1.75ZM5.27778 7.22218V7.97218H5.27778L5.27778 7.22218ZM8.00823 6.19276L8.73267 6.38688L8.00823 6.19276ZM7.02614 7.17486L7.22025 7.8993L7.22025 7.8993L7.02614 7.17486ZM10.8333 2.41663C11.2475 2.41663 11.5833 2.08084 11.5833 1.66663C11.5833 1.25241 11.2475 0.916626 10.8333 0.916626V2.41663ZM6.58333 13.6111V12.2222H5.08333V13.6111H6.58333ZM7.20935 11.5833C7.40441 11.5833 7.55042 11.585 7.67255 11.5962C7.79576 11.6076 7.84664 11.6251 7.86008 11.6311C7.86341 11.6326 7.85512 11.6293 7.84214 11.6181C7.82841 11.6064 7.81787 11.5931 7.81162 11.5826C7.80017 11.5633 7.82342 11.5885 7.82922 11.7147L9.32764 11.6458C9.31443 11.3586 9.25281 11.0713 9.10081 10.8158C8.94191 10.5486 8.71717 10.3715 8.47384 10.2624C8.05559 10.0749 7.54278 10.0833 7.20935 10.0833V11.5833ZM7.20935 15.75C7.54278 15.75 8.05558 15.7584 8.47384 15.5708C8.71717 15.4617 8.9419 15.2847 9.10081 15.0175C9.25281 14.7619 9.31443 14.4746 9.32764 14.1875L7.82922 14.1185C7.82342 14.2447 7.80017 14.2699 7.81162 14.2507C7.81787 14.2402 7.82841 14.2269 7.84214 14.2151C7.85512 14.204 7.86341 14.2006 7.86008 14.2021C7.84663 14.2082 7.79576 14.2257 7.67255 14.237C7.55042 14.2482 7.40441 14.25 7.20935 14.25V15.75ZM7.20935 10.0833C6.64056 10.0833 5.97423 10.1291 5.53243 10.5988C5.30662 10.8388 5.20075 11.1246 5.1472 11.3897C5.09514 11.6474 5.08333 11.9334 5.08333 12.2222H6.58333C6.58333 11.9575 6.59599 11.7932 6.6175 11.6867C6.63753 11.5876 6.65436 11.5953 6.62501 11.6265C6.59327 11.6603 6.57962 11.6457 6.66952 11.6244C6.76921 11.6007 6.93438 11.5833 7.20935 11.5833V10.0833ZM7.20935 14.25C6.93438 14.25 6.76921 14.2325 6.66952 14.2089C6.57962 14.1875 6.59327 14.173 6.62501 14.2067C6.65436 14.2379 6.63753 14.2457 6.6175 14.1465C6.59599 14.0401 6.58333 13.8758 6.58333 13.6111H5.08333C5.08333 13.8998 5.09514 14.1859 5.1472 14.4436C5.20075 14.7086 5.30662 14.9944 5.53243 15.2345C5.97423 15.7042 6.64056 15.75 7.20935 15.75V14.25ZM16.7975 10.5705L15.5779 13.8307L16.9829 14.3563L18.2025 11.0961L16.7975 10.5705ZM15.9467 13.8307L14.7271 10.5705L13.3222 11.0961L14.5418 14.3563L15.9467 13.8307ZM15.5779 13.8307C15.5206 13.9841 15.4742 14.108 15.4326 14.2123C15.3904 14.3182 15.3606 14.3847 15.3389 14.4262C15.3135 14.4749 15.3201 14.4479 15.3673 14.4025C15.3951 14.3758 15.4436 14.3363 15.515 14.3036C15.5898 14.2694 15.6746 14.2499 15.7623 14.2499V15.7499C16.0474 15.7499 16.2654 15.6199 16.4067 15.4841C16.5325 15.3632 16.6151 15.2229 16.6685 15.1205C16.7742 14.918 16.8777 14.6374 16.9829 14.3563L15.5779 13.8307ZM14.5418 14.3563C14.6469 14.6374 14.7504 14.918 14.8561 15.1205C14.9096 15.2228 14.9922 15.3632 15.118 15.4841C15.2593 15.6199 15.4772 15.7499 15.7623 15.7499V14.2499C15.8501 14.2499 15.9348 14.2694 16.0097 14.3036C16.0811 14.3363 16.1296 14.3758 16.1573 14.4025C16.2045 14.4479 16.2112 14.4749 16.1858 14.4262C16.1641 14.3847 16.1343 14.3182 16.092 14.2123C16.0505 14.108 16.0041 13.9841 15.9467 13.8307L14.5418 14.3563ZM12.2678 10.0833H11.4574V11.5833H12.2678V10.0833ZM11.4574 14.25H10.5747V15.75H11.4574V14.25ZM11.4574 15.75C11.6091 15.75 11.7604 15.7504 11.8887 15.7416C12.0238 15.7324 12.1873 15.7106 12.3577 15.6401L11.7841 14.2541C11.8268 14.2364 11.8455 14.2411 11.7867 14.2451C11.7212 14.2496 11.6296 14.25 11.4574 14.25V15.75ZM11.4574 13.6666C11.6296 13.6666 11.7212 13.667 11.7867 13.6715C11.8455 13.6755 11.8268 13.6802 11.7841 13.6625L12.3577 12.2765C12.1873 12.206 12.0238 12.1842 11.8887 12.175C11.7604 12.1662 11.6091 12.1666 11.4574 12.1666V13.6666ZM11.4574 12.1666C11.2852 12.1666 11.1936 12.1662 11.1281 12.1618C11.0693 12.1578 11.088 12.1531 11.1307 12.1708L10.5571 13.5568C10.7275 13.6273 10.891 13.6491 11.0261 13.6583C11.1544 13.667 11.3057 13.6666 11.4574 13.6666V12.1666ZM11.4574 10.0833C11.3057 10.0833 11.1544 10.0829 11.0261 10.0917C10.891 10.1009 10.7275 10.1226 10.5571 10.1932L11.1307 11.5792C11.088 11.5968 11.0693 11.5922 11.1281 11.5882C11.1936 11.5837 11.2852 11.5833 11.4574 11.5833V10.0833ZM9.66479 11.875C9.66479 12.0361 9.65694 12.3587 9.74777 12.6618C9.85618 13.0235 10.1032 13.3689 10.5571 13.5568L11.1307 12.1708C11.1226 12.1674 11.1414 12.1745 11.1638 12.2006C11.1842 12.2246 11.1877 12.2414 11.1846 12.2312C11.1805 12.2172 11.1733 12.1841 11.1691 12.1185C11.1647 12.0509 11.1648 11.9785 11.1648 11.875H9.66479ZM11.1648 11.875C11.1648 11.7714 11.1647 11.699 11.1691 11.6314C11.1733 11.5658 11.1805 11.5327 11.1846 11.5188C11.1877 11.5085 11.1842 11.5254 11.1638 11.5493C11.1414 11.5754 11.1226 11.5825 11.1307 11.5792L10.5571 10.1932C10.1032 10.381 9.85618 10.7265 9.74777 11.0882C9.65694 11.3913 9.66479 11.7138 9.66479 11.875H11.1648ZM13.25 13.9431C13.25 13.779 13.2563 13.4602 13.163 13.1583C13.0522 12.7998 12.8045 12.4614 12.3577 12.2765L11.7841 13.6625C11.7923 13.6659 11.7739 13.659 11.7518 13.6335C11.7314 13.6099 11.7273 13.5928 11.7299 13.6013C11.7337 13.6135 11.7408 13.6446 11.7452 13.7075C11.7497 13.7719 11.75 13.8428 11.75 13.9428L13.25 13.9431ZM11.75 13.9738C11.75 14.0738 11.7497 14.1446 11.7452 14.2091C11.7408 14.272 11.7337 14.3031 11.7299 14.3153C11.7273 14.3238 11.7314 14.3067 11.7518 14.2831C11.7739 14.2575 11.7923 14.2507 11.7841 14.2541L12.3577 15.6401C12.8045 15.4552 13.0522 15.1167 13.163 14.7583C13.2563 14.4564 13.25 14.1376 13.25 13.9735L11.75 13.9738ZM12.5 17.5833H8.93939V19.0833H12.5V17.5833ZM3.25 12.2727V10.1515H1.75V12.2727H3.25ZM15.9167 6.51511V8.33329H17.4167V6.51511H15.9167ZM11.5152 2.41663C13.0778 2.41663 13.6667 2.42733 14.1143 2.58446L14.6111 1.16913C13.8613 0.905919 12.9509 0.916626 11.5152 0.916626V2.41663ZM17.4167 6.51511C17.4167 5.81948 17.417 5.2615 17.3871 4.8079C17.3568 4.34761 17.2929 3.94316 17.1406 3.55877L15.7461 4.11139C15.8171 4.29048 15.8649 4.52053 15.8904 4.90662C15.9163 5.29941 15.9167 5.79971 15.9167 6.51511H17.4167ZM14.1143 2.58446C14.8827 2.8542 15.4714 3.41808 15.7461 4.11139L17.1406 3.55877C16.6974 2.44033 15.7677 1.57513 14.6111 1.16913L14.1143 2.58446ZM3.25 10.1515C3.25 8.90693 3.25038 8.00979 3.29722 7.2996C3.34362 6.59611 3.43332 6.12813 3.58803 5.73773L2.19354 5.18511C1.95747 5.7808 1.85177 6.42319 1.80047 7.20088C1.74962 7.97187 1.75 8.92671 1.75 10.1515H3.25ZM11.5152 0.916626C8.95498 0.916626 7.48237 0.905919 6.28355 1.32676L6.78039 2.74208C7.67701 2.42733 8.82804 2.41663 11.5152 2.41663V0.916626ZM3.58803 5.73773C4.13202 4.36502 5.29011 3.26523 6.78039 2.74208L6.28355 1.32676C4.40512 1.98616 2.906 3.38727 2.19354 5.18511L3.58803 5.73773ZM8.93939 17.5833C7.56444 17.5833 6.59125 17.5823 5.8418 17.5042C5.10432 17.4274 4.674 17.2828 4.35119 17.0553L3.48726 18.2815C4.10811 18.719 4.82904 18.9068 5.68631 18.9961C6.53161 19.0842 7.59668 19.0833 8.93939 19.0833V17.5833ZM1.75 12.2727C1.75 13.5334 1.74879 14.5444 1.84344 15.3489C1.94017 16.171 2.1452 16.8682 2.61944 17.4644L3.79339 16.5307C3.56122 16.2388 3.41304 15.8525 3.33316 15.1736C3.25121 14.4771 3.25 13.5697 3.25 12.2727H1.75ZM4.35119 17.0553C4.13817 16.9052 3.95058 16.7283 3.79339 16.5307L2.61944 17.4644C2.86705 17.7757 3.15953 18.0506 3.48726 18.2815L4.35119 17.0553ZM3.25 9.99996C3.25 8.88005 4.15787 7.97218 5.27778 7.97218V6.47218C3.32944 6.47218 1.75 8.05162 1.75 9.99996H3.25ZM7.28379 5.99865C7.22471 6.21912 7.0525 6.39134 6.83202 6.45041L7.22025 7.8993C7.95836 7.70152 8.5349 7.12499 8.73267 6.38688L7.28379 5.99865ZM10.8333 0.916626C8.885 0.916626 7.30556 2.49607 7.30556 4.4444H8.80556C8.80556 3.32449 9.71342 2.41663 10.8333 2.41663V0.916626ZM7.30556 4.4444C7.30556 4.60242 7.31245 4.76305 7.31929 4.91055C7.32638 5.06331 7.33339 5.20186 7.33626 5.33992C7.34208 5.62051 7.32806 5.83341 7.28379 5.99865L8.73267 6.38688C8.83294 6.01267 8.84258 5.62881 8.83593 5.30878C8.83257 5.14654 8.82431 4.98381 8.81768 4.84103C8.81081 4.69299 8.80556 4.56379 8.80556 4.4444H7.30556ZM5.27778 7.97218C5.39717 7.97218 5.52637 7.97744 5.67441 7.98431C5.81719 7.99093 5.97991 7.99919 6.14215 8.00256C6.46219 8.00921 6.84605 7.99957 7.22025 7.8993L6.83202 6.45041C6.66679 6.49469 6.45388 6.50871 6.1733 6.50288C6.03523 6.50002 5.89669 6.49301 5.74392 6.48592C5.59642 6.47908 5.4358 6.47218 5.27778 6.47218L5.27778 7.97218ZM13.25 13.9736V13.943H11.75V13.9736H13.25Z", fill: "#079455" })))), h("div", { key: '8712878993b3e210e2081dc0540d5fea58f5c4e0', class: `text ${this.state === 'disabled' ? 'disabled' : ''}` }, this.type === 'pdf' ? h("p", { class: "text-sm-medium" }, "Export as PDF") : h("p", { class: "text-sm-medium" }, "Export as CSV"))), h("div", { key: '96a40dff9db96b0054362234230667f421d8704d', class: "arrow" }, h("svg", { key: '3b52e715d44afb0bfef0b230a65a8b8b28fc6bbb', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", class: `arrow_svg ${this.state === 'disabled' ? 'disabled' : ''}` }, h("path", { key: 'd910ea45517ba3a8ed3f3d8fd919946e5fb4c877', d: "M6.75004 4.5C6.75004 4.5 11.25 7.8142 11.25 9.00004C11.25 10.1859 6.75 13.5 6.75 13.5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h("div", { key: '6075e6cad4cce9638e31cfbd6b8b98d3553e0b22', class: `export_container ${this.state === 'disabled' ? 'disabled' : ''}` }, h("div", { key: '2940ac182070fd43e0849a8eaf68ba8897a61554', class: `content ${this.state === 'disabled' ? 'disabled' : ''}` }, h("div", { key: 'e7b68eabbb0e46a0ad9ee711e75f1af61282882a', class: `wrapper` }, h("div", { key: '05c92cb50b5925903d1b826e4eb5e481704fd0d1', class: `container` }, h("div", { key: '3eff4a3dee5e92777fef0127d6ad5b8e4f20a9ae', class: `icon` }, this.type === 'pdf' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `pdf_svg ${this.type} ${this.state === 'disabled' ? 'disabled' : ''}` }, h("path", { opacity: "0.4", d: "M2.50117 9.15797C2.78483 8.46126 4.09165 7.08156 7.08171 7.08156C7.33288 7.08156 7.99177 6.82886 7.95767 5.45969C7.94376 4.22219 8.39482 1.77401 10.2871 1.66843C10.662 1.66663 11.0697 1.66663 11.5152 1.66663C13.0144 1.66663 13.764 1.66663 14.3627 1.87679C15.3252 2.21467 16.0844 2.92921 16.4434 3.83508C16.6667 4.39856 16.6667 5.10408 16.6667 6.51511V14.1666C16.6667 14.9411 16.6667 15.3283 16.6026 15.6503C16.3396 16.9726 15.3059 18.0062 13.9836 18.2692C13.6616 18.3333 13.2744 18.3333 12.5 18.3333H8.93939C6.22172 18.3333 4.86289 18.3333 3.91922 17.6684C3.64885 17.4779 3.40882 17.252 3.20642 16.9976C2.5 16.1094 2.5 14.8305 2.5 12.2727V10.1515C2.5 9.79565 2.5 9.46547 2.50117 9.15797Z", fill: "#E21B2E" }), h("path", { d: "M5.83333 15V12.9166M5.83333 12.9166V11.6666C5.83333 11.2738 5.83333 11.0774 5.96147 10.9553C6.08961 10.8333 6.29585 10.8333 6.70833 10.8333H7.29167C7.89573 10.8333 8.38542 11.2997 8.38542 11.875C8.38542 12.4503 7.89573 12.9166 7.29167 12.9166H5.83333ZM17.5 10.8333H16.4062C15.7188 10.8333 15.3751 10.8333 15.1615 11.0367C14.9479 11.2401 14.9479 11.5675 14.9479 12.2222V12.9166M14.9479 15V12.9166M14.9479 12.9166H16.7708M12.5 18.3333H8.93939C6.22172 18.3333 4.86289 18.3333 3.91922 17.6684C3.64885 17.4779 3.40882 17.252 3.20642 16.9976C2.5 16.1094 2.5 14.8305 2.5 12.2727V10.1515C2.5 7.68217 2.5 6.44751 2.89078 5.46142C3.51901 3.87614 4.84761 2.6257 6.53197 2.03442C7.57969 1.66663 8.89151 1.66663 11.5152 1.66663C13.0144 1.66663 13.764 1.66663 14.3627 1.87679C15.3252 2.21467 16.0844 2.92921 16.4434 3.83508C16.6667 4.39856 16.6667 5.10408 16.6667 6.51511V8.33329M2.5 9.99996C2.5 8.46584 3.74365 7.22218 5.27778 7.22218C5.8326 7.22218 6.4867 7.3194 7.02614 7.17486C7.50543 7.04643 7.8798 6.67206 8.00823 6.19276C8.15277 5.65332 8.05556 4.99922 8.05556 4.4444C8.05556 2.91028 9.29921 1.66663 10.8333 1.66663M13.125 12.9166C13.125 14.0672 12.1456 15 10.9375 15C10.6649 15 10.5286 15 10.4271 14.9441C10.184 14.8105 10.2083 14.5399 10.2083 14.3055V11.5277C10.2083 11.2933 10.184 11.0228 10.4271 10.8891C10.5286 10.8333 10.6649 10.8333 10.9375 10.8333C12.1456 10.8333 13.125 11.766 13.125 12.9166Z", stroke: "#E21B2E", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `csv_svg ${this.type} ${this.state === 'disabled' ? 'disabled' : ''}` }, h("path", { opacity: "0.4", d: "M2.50141 9.15797C2.78507 8.46126 4.0919 7.08156 7.08195 7.08156C7.33312 7.08156 7.99201 6.82886 7.95791 5.45969C7.94401 4.22219 8.39506 1.77401 10.2873 1.66843C10.6623 1.66663 11.0699 1.66663 11.5154 1.66663C13.0146 1.66663 13.7642 1.66663 14.3629 1.87679C15.3254 2.21467 16.0846 2.92921 16.4436 3.83508C16.6669 4.39856 16.6669 5.10408 16.6669 6.51511V14.1666C16.6669 14.9411 16.6669 15.3283 16.6029 15.6503C16.3398 16.9726 15.3062 18.0062 13.9839 18.2692C13.6619 18.3333 13.2747 18.3333 12.5002 18.3333H8.93964C6.22197 18.3333 4.86313 18.3333 3.91947 17.6684C3.64909 17.4779 3.40906 17.252 3.20666 16.9976C2.50024 16.1094 2.50024 14.8305 2.50024 12.2727V10.1515C2.50024 9.79565 2.50024 9.46547 2.50141 9.15797Z", fill: "#079455" }), h("path", { d: "M7.82922 11.7147C7.84826 12.1285 8.19913 12.4485 8.6129 12.4294C9.02668 12.4104 9.34668 12.0595 9.32764 11.6458L7.82922 11.7147ZM9.32764 14.1875C9.34668 13.7737 9.02668 13.4229 8.6129 13.4038C8.19913 13.3848 7.84826 13.7048 7.82922 14.1185L9.32764 14.1875ZM18.2025 11.0961C18.3476 10.7081 18.1507 10.276 17.7628 10.1308C17.3748 9.98571 16.9427 10.1826 16.7975 10.5705L18.2025 11.0961ZM16.2804 14.0935L15.5779 13.8307L16.2804 14.0935ZM15.2442 14.0935L15.9467 13.8307L15.9467 13.8307L15.2442 14.0935ZM14.7271 10.5705C14.582 10.1826 14.1498 9.98571 13.7619 10.1308C13.3739 10.276 13.1771 10.7081 13.3222 11.0961L14.7271 10.5705ZM12.2678 11.5833C12.682 11.5833 13.0178 11.2475 13.0178 10.8333C13.0178 10.4191 12.682 10.0833 12.2678 10.0833V11.5833ZM10.5747 14.25C10.1605 14.25 9.82472 14.5857 9.82472 15C9.82472 15.4142 10.1605 15.75 10.5747 15.75V14.25ZM12.0709 14.9471L11.7841 14.2541H11.7841L12.0709 14.9471ZM12.0709 12.9695L12.3577 12.2765V12.2765L12.0709 12.9695ZM10.8439 12.8638L10.5571 13.5568H10.5571L10.8439 12.8638ZM10.8439 10.8862L10.5571 10.1932L10.8439 10.8862ZM12.5 13.943L11.75 13.9428V13.943H12.5ZM12.5 13.9736H11.75V13.9738L12.5 13.9736ZM12.5 19.0833C12.9142 19.0833 13.25 18.7475 13.25 18.3333C13.25 17.9191 12.9142 17.5833 12.5 17.5833V19.0833ZM15.9167 8.33329C15.9167 8.74751 16.2525 9.08329 16.6667 9.08329C17.0809 9.08329 17.4167 8.74751 17.4167 8.33329H15.9167ZM14.3627 1.87679L14.6111 1.16913V1.16913L14.3627 1.87679ZM16.4434 3.83508L17.1406 3.55877L16.4434 3.83508ZM2.89078 5.46142L3.58803 5.73773L2.89078 5.46142ZM6.53197 2.03442L6.78039 2.74208L6.78039 2.74208L6.53197 2.03442ZM3.91922 17.6684L3.48726 18.2815H3.48726L3.91922 17.6684ZM3.20642 16.9976L3.79339 16.5307H3.79339L3.20642 16.9976ZM1.75 9.99996C1.75 10.4142 2.08579 10.75 2.5 10.75C2.91421 10.75 3.25 10.4142 3.25 9.99996H1.75ZM5.27778 7.22218V7.97218H5.27778L5.27778 7.22218ZM8.00823 6.19276L8.73267 6.38688L8.00823 6.19276ZM7.02614 7.17486L7.22025 7.8993L7.22025 7.8993L7.02614 7.17486ZM10.8333 2.41663C11.2475 2.41663 11.5833 2.08084 11.5833 1.66663C11.5833 1.25241 11.2475 0.916626 10.8333 0.916626V2.41663ZM6.58333 13.6111V12.2222H5.08333V13.6111H6.58333ZM7.20935 11.5833C7.40441 11.5833 7.55042 11.585 7.67255 11.5962C7.79576 11.6076 7.84664 11.6251 7.86008 11.6311C7.86341 11.6326 7.85512 11.6293 7.84214 11.6181C7.82841 11.6064 7.81787 11.5931 7.81162 11.5826C7.80017 11.5633 7.82342 11.5885 7.82922 11.7147L9.32764 11.6458C9.31443 11.3586 9.25281 11.0713 9.10081 10.8158C8.94191 10.5486 8.71717 10.3715 8.47384 10.2624C8.05559 10.0749 7.54278 10.0833 7.20935 10.0833V11.5833ZM7.20935 15.75C7.54278 15.75 8.05558 15.7584 8.47384 15.5708C8.71717 15.4617 8.9419 15.2847 9.10081 15.0175C9.25281 14.7619 9.31443 14.4746 9.32764 14.1875L7.82922 14.1185C7.82342 14.2447 7.80017 14.2699 7.81162 14.2507C7.81787 14.2402 7.82841 14.2269 7.84214 14.2151C7.85512 14.204 7.86341 14.2006 7.86008 14.2021C7.84663 14.2082 7.79576 14.2257 7.67255 14.237C7.55042 14.2482 7.40441 14.25 7.20935 14.25V15.75ZM7.20935 10.0833C6.64056 10.0833 5.97423 10.1291 5.53243 10.5988C5.30662 10.8388 5.20075 11.1246 5.1472 11.3897C5.09514 11.6474 5.08333 11.9334 5.08333 12.2222H6.58333C6.58333 11.9575 6.59599 11.7932 6.6175 11.6867C6.63753 11.5876 6.65436 11.5953 6.62501 11.6265C6.59327 11.6603 6.57962 11.6457 6.66952 11.6244C6.76921 11.6007 6.93438 11.5833 7.20935 11.5833V10.0833ZM7.20935 14.25C6.93438 14.25 6.76921 14.2325 6.66952 14.2089C6.57962 14.1875 6.59327 14.173 6.62501 14.2067C6.65436 14.2379 6.63753 14.2457 6.6175 14.1465C6.59599 14.0401 6.58333 13.8758 6.58333 13.6111H5.08333C5.08333 13.8998 5.09514 14.1859 5.1472 14.4436C5.20075 14.7086 5.30662 14.9944 5.53243 15.2345C5.97423 15.7042 6.64056 15.75 7.20935 15.75V14.25ZM16.7975 10.5705L15.5779 13.8307L16.9829 14.3563L18.2025 11.0961L16.7975 10.5705ZM15.9467 13.8307L14.7271 10.5705L13.3222 11.0961L14.5418 14.3563L15.9467 13.8307ZM15.5779 13.8307C15.5206 13.9841 15.4742 14.108 15.4326 14.2123C15.3904 14.3182 15.3606 14.3847 15.3389 14.4262C15.3135 14.4749 15.3201 14.4479 15.3673 14.4025C15.3951 14.3758 15.4436 14.3363 15.515 14.3036C15.5898 14.2694 15.6746 14.2499 15.7623 14.2499V15.7499C16.0474 15.7499 16.2654 15.6199 16.4067 15.4841C16.5325 15.3632 16.6151 15.2229 16.6685 15.1205C16.7742 14.918 16.8777 14.6374 16.9829 14.3563L15.5779 13.8307ZM14.5418 14.3563C14.6469 14.6374 14.7504 14.918 14.8561 15.1205C14.9096 15.2228 14.9922 15.3632 15.118 15.4841C15.2593 15.6199 15.4772 15.7499 15.7623 15.7499V14.2499C15.8501 14.2499 15.9348 14.2694 16.0097 14.3036C16.0811 14.3363 16.1296 14.3758 16.1573 14.4025C16.2045 14.4479 16.2112 14.4749 16.1858 14.4262C16.1641 14.3847 16.1343 14.3182 16.092 14.2123C16.0505 14.108 16.0041 13.9841 15.9467 13.8307L14.5418 14.3563ZM12.2678 10.0833H11.4574V11.5833H12.2678V10.0833ZM11.4574 14.25H10.5747V15.75H11.4574V14.25ZM11.4574 15.75C11.6091 15.75 11.7604 15.7504 11.8887 15.7416C12.0238 15.7324 12.1873 15.7106 12.3577 15.6401L11.7841 14.2541C11.8268 14.2364 11.8455 14.2411 11.7867 14.2451C11.7212 14.2496 11.6296 14.25 11.4574 14.25V15.75ZM11.4574 13.6666C11.6296 13.6666 11.7212 13.667 11.7867 13.6715C11.8455 13.6755 11.8268 13.6802 11.7841 13.6625L12.3577 12.2765C12.1873 12.206 12.0238 12.1842 11.8887 12.175C11.7604 12.1662 11.6091 12.1666 11.4574 12.1666V13.6666ZM11.4574 12.1666C11.2852 12.1666 11.1936 12.1662 11.1281 12.1618C11.0693 12.1578 11.088 12.1531 11.1307 12.1708L10.5571 13.5568C10.7275 13.6273 10.891 13.6491 11.0261 13.6583C11.1544 13.667 11.3057 13.6666 11.4574 13.6666V12.1666ZM11.4574 10.0833C11.3057 10.0833 11.1544 10.0829 11.0261 10.0917C10.891 10.1009 10.7275 10.1226 10.5571 10.1932L11.1307 11.5792C11.088 11.5968 11.0693 11.5922 11.1281 11.5882C11.1936 11.5837 11.2852 11.5833 11.4574 11.5833V10.0833ZM9.66479 11.875C9.66479 12.0361 9.65694 12.3587 9.74777 12.6618C9.85618 13.0235 10.1032 13.3689 10.5571 13.5568L11.1307 12.1708C11.1226 12.1674 11.1414 12.1745 11.1638 12.2006C11.1842 12.2246 11.1877 12.2414 11.1846 12.2312C11.1805 12.2172 11.1733 12.1841 11.1691 12.1185C11.1647 12.0509 11.1648 11.9785 11.1648 11.875H9.66479ZM11.1648 11.875C11.1648 11.7714 11.1647 11.699 11.1691 11.6314C11.1733 11.5658 11.1805 11.5327 11.1846 11.5188C11.1877 11.5085 11.1842 11.5254 11.1638 11.5493C11.1414 11.5754 11.1226 11.5825 11.1307 11.5792L10.5571 10.1932C10.1032 10.381 9.85618 10.7265 9.74777 11.0882C9.65694 11.3913 9.66479 11.7138 9.66479 11.875H11.1648ZM13.25 13.9431C13.25 13.779 13.2563 13.4602 13.163 13.1583C13.0522 12.7998 12.8045 12.4614 12.3577 12.2765L11.7841 13.6625C11.7923 13.6659 11.7739 13.659 11.7518 13.6335C11.7314 13.6099 11.7273 13.5928 11.7299 13.6013C11.7337 13.6135 11.7408 13.6446 11.7452 13.7075C11.7497 13.7719 11.75 13.8428 11.75 13.9428L13.25 13.9431ZM11.75 13.9738C11.75 14.0738 11.7497 14.1446 11.7452 14.2091C11.7408 14.272 11.7337 14.3031 11.7299 14.3153C11.7273 14.3238 11.7314 14.3067 11.7518 14.2831C11.7739 14.2575 11.7923 14.2507 11.7841 14.2541L12.3577 15.6401C12.8045 15.4552 13.0522 15.1167 13.163 14.7583C13.2563 14.4564 13.25 14.1376 13.25 13.9735L11.75 13.9738ZM12.5 17.5833H8.93939V19.0833H12.5V17.5833ZM3.25 12.2727V10.1515H1.75V12.2727H3.25ZM15.9167 6.51511V8.33329H17.4167V6.51511H15.9167ZM11.5152 2.41663C13.0778 2.41663 13.6667 2.42733 14.1143 2.58446L14.6111 1.16913C13.8613 0.905919 12.9509 0.916626 11.5152 0.916626V2.41663ZM17.4167 6.51511C17.4167 5.81948 17.417 5.2615 17.3871 4.8079C17.3568 4.34761 17.2929 3.94316 17.1406 3.55877L15.7461 4.11139C15.8171 4.29048 15.8649 4.52053 15.8904 4.90662C15.9163 5.29941 15.9167 5.79971 15.9167 6.51511H17.4167ZM14.1143 2.58446C14.8827 2.8542 15.4714 3.41808 15.7461 4.11139L17.1406 3.55877C16.6974 2.44033 15.7677 1.57513 14.6111 1.16913L14.1143 2.58446ZM3.25 10.1515C3.25 8.90693 3.25038 8.00979 3.29722 7.2996C3.34362 6.59611 3.43332 6.12813 3.58803 5.73773L2.19354 5.18511C1.95747 5.7808 1.85177 6.42319 1.80047 7.20088C1.74962 7.97187 1.75 8.92671 1.75 10.1515H3.25ZM11.5152 0.916626C8.95498 0.916626 7.48237 0.905919 6.28355 1.32676L6.78039 2.74208C7.67701 2.42733 8.82804 2.41663 11.5152 2.41663V0.916626ZM3.58803 5.73773C4.13202 4.36502 5.29011 3.26523 6.78039 2.74208L6.28355 1.32676C4.40512 1.98616 2.906 3.38727 2.19354 5.18511L3.58803 5.73773ZM8.93939 17.5833C7.56444 17.5833 6.59125 17.5823 5.8418 17.5042C5.10432 17.4274 4.674 17.2828 4.35119 17.0553L3.48726 18.2815C4.10811 18.719 4.82904 18.9068 5.68631 18.9961C6.53161 19.0842 7.59668 19.0833 8.93939 19.0833V17.5833ZM1.75 12.2727C1.75 13.5334 1.74879 14.5444 1.84344 15.3489C1.94017 16.171 2.1452 16.8682 2.61944 17.4644L3.79339 16.5307C3.56122 16.2388 3.41304 15.8525 3.33316 15.1736C3.25121 14.4771 3.25 13.5697 3.25 12.2727H1.75ZM4.35119 17.0553C4.13817 16.9052 3.95058 16.7283 3.79339 16.5307L2.61944 17.4644C2.86705 17.7757 3.15953 18.0506 3.48726 18.2815L4.35119 17.0553ZM3.25 9.99996C3.25 8.88005 4.15787 7.97218 5.27778 7.97218V6.47218C3.32944 6.47218 1.75 8.05162 1.75 9.99996H3.25ZM7.28379 5.99865C7.22471 6.21912 7.0525 6.39134 6.83202 6.45041L7.22025 7.8993C7.95836 7.70152 8.5349 7.12499 8.73267 6.38688L7.28379 5.99865ZM10.8333 0.916626C8.885 0.916626 7.30556 2.49607 7.30556 4.4444H8.80556C8.80556 3.32449 9.71342 2.41663 10.8333 2.41663V0.916626ZM7.30556 4.4444C7.30556 4.60242 7.31245 4.76305 7.31929 4.91055C7.32638 5.06331 7.33339 5.20186 7.33626 5.33992C7.34208 5.62051 7.32806 5.83341 7.28379 5.99865L8.73267 6.38688C8.83294 6.01267 8.84258 5.62881 8.83593 5.30878C8.83257 5.14654 8.82431 4.98381 8.81768 4.84103C8.81081 4.69299 8.80556 4.56379 8.80556 4.4444H7.30556ZM5.27778 7.97218C5.39717 7.97218 5.52637 7.97744 5.67441 7.98431C5.81719 7.99093 5.97991 7.99919 6.14215 8.00256C6.46219 8.00921 6.84605 7.99957 7.22025 7.8993L6.83202 6.45041C6.66679 6.49469 6.45388 6.50871 6.1733 6.50288C6.03523 6.50002 5.89669 6.49301 5.74392 6.48592C5.59642 6.47908 5.4358 6.47218 5.27778 6.47218L5.27778 7.97218ZM13.25 13.9736V13.943H11.75V13.9736H13.25Z", fill: "#079455" })))), h("div", { key: '7385723967c18384e6cf8db4f0cc0f46822457aa', class: `text ${this.state === 'disabled' ? 'disabled' : ''}` }, this.type === 'pdf' ? h("p", { class: "text-sm-medium" }, "Export as PDF") : h("p", { class: "text-sm-medium" }, "Export as CSV"))), h("div", { key: '6f120f36fab2c2291f6c088c04f3abffaea1541c', class: "arrow" }, h("svg", { key: '55f55c8ab1da88c4dedb18447561465afbc63ea9', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", class: `arrow_svg ${this.state === 'disabled' ? 'disabled' : ''}` }, h("path", { key: '06ade1ac6f7b002bd6550a63a849c84361a9f04b', d: "M6.75004 4.5C6.75004 4.5 11.25 7.8142 11.25 9.00004C11.25 10.1859 6.75 13.5 6.75 13.5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     get el() { return getElement(this); }
 };
@@ -35,7 +35,7 @@ const GbExportSubDropdown = class {
         }
     }
     render() {
-        return (h("div", { key: '4dd41bc0e2f018c83e3ccae018356212615e50eb', class: `sub_dropdown_container` }, h("gb-export-sub-dropdown-item", { key: 'ee732d899999b977fa0004ead928dc81e311326f', icon: "assets/database.svg" }, h("slot", { key: 'f8174abd9219120b725ec54558f757770cb78511', name: "label_one", slot: "label" })), h("gb-export-sub-dropdown-item", { key: 'f07c4c1b8e0250244ff8ac1c29c5e067579f2dd8', icon: "assets/laptop.svg" }, h("slot", { key: 'cfe9e50a5a466d6f908dff5c2f842948cc492520', name: "label_two", slot: "label" })), h("gb-export-sub-dropdown-item", { key: 'b08c7fc543facb5427fd6f5f60d927463fa24785', icon: "assets/filter-horizontal.svg" }, h("slot", { key: '6455b63b174a49277af7b5f48662d697f9847cce', name: "label_three", slot: "label" }))));
+        return (h("div", { key: '6f62e525cae3021729556aa077e69d155e2a2565', class: `sub_dropdown_container` }, h("gb-export-sub-dropdown-item", { key: '27f653541f886d2cf2eee686e80a60a281381282', icon: "assets/database.svg" }, h("slot", { key: 'fddf324676c48840f0ea55e6646ba2e617d4dc6b', name: "label_one", slot: "label" })), h("gb-export-sub-dropdown-item", { key: 'bedb11d575b50c505f0e1c36538b954964b7acbc', icon: "assets/laptop.svg" }, h("slot", { key: '156b5769b38c69e38244171c3a6d13430deef08e', name: "label_two", slot: "label" })), h("gb-export-sub-dropdown-item", { key: '93dc44ab88720e8673362588659c1190fc8f2c5a', icon: "assets/filter-horizontal.svg" }, h("slot", { key: '7b0b46b300d3401cf301c13a82fbca385c70b677', name: "label_three", slot: "label" }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/gb-export-dropdown.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-f6b9f9bf.js';
-import { S as StateEnum } from './reusableModels-8496e911.js';
+import { S as StateEnum } from './reusableModels-e864cf6e.js';
 const gbExportDropdownCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n    /* --------------------------------------Primary Colors--------------------------------------------- */\r\n    /* base color palette */\r\n    --base-white: #fff;\r\n    --base-black: #000;\r\n\r\n\r\n    /* gray color palette  */\r\n    --gray-25: #fcfcfd;\r\n    --gray-50: #f6f8fa;\r\n    --gray-100: #eef2f6;\r\n    --gray-200: #e3e8ef;\r\n    --gray-300: #cdd5df;\r\n    --gray-400: #9aa4b2;\r\n    --gray-500: #697586;\r\n    --gray-600: #4b5565;\r\n    --gray-700: #364152;\r\n    --gray-800: #202939;\r\n    --gray-900: #121926;\r\n    --gray-950: #0D121C;\r\n\r\n    /* brand dark blue color palette */\r\n    --brandDarkBlue-25: #F9F9FB;\r\n    --brandDarkBlue-50: #edeef3;\r\n    --brandDarkBlue-100: #d3d5e0;\r\n    --brandDarkBlue-200: #b5b9cc;\r\n    --brandDarkBlue-300: #9095b2;\r\n    --brandDarkBlue-400: #464f7f;\r\n    --brandDarkBlue-500: #212c65;\r\n    --brandDarkBlue-600: #1e285c;\r\n    --brandDarkBlue-700: #1c2554;\r\n    --brandDarkBlue-800: #161d43;\r\n    --brandDarkBlue-900: #0b0f22;\r\n    --brandDarkBlue-950: #070914;\r\n\r\n    /* brand red color palette */\r\n    --brandRed-25: #fffbfa;\r\n    --brandRed-50: #fef1f2;\r\n    --brandRed-100: #fde3e5;\r\n    --brandRed-200: #f9b4ba;\r\n    --brandRed-300: #f68e98;\r\n    --brandRed-400: #f36976;\r\n    --brandRed-500: #e21b2e;\r\n    --brandRed-600: #cc1a2a;\r\n    --brandRed-700: #b51726;\r\n    --brandRed-800: #8c121d;\r\n    --brandRed-900: #680d16;\r\n    --brandRed-950: #3f080d;\r\n\r\n    /* warning color palette */\r\n    --warning-25: #fffcf5;\r\n    --warning-50: #fffaeb;\r\n    --warning-100: #fef0c7;\r\n    --warning-200: #fedf89;\r\n    --warning-300: #fec84b;\r\n    --warning-400: #fdb022;\r\n    --warning-500: #f79009;\r\n    --warning-600: #dc6803;\r\n    --warning-700: #b54708;\r\n    --warning-800: #93370d;\r\n    --warning-900: #7A2e0e;\r\n    --warning-950: #4e1d09;\r\n\r\n    /* success color palette  */\r\n    --success-25: #f6fef9;\r\n    --success-50: #ecfdf3;\r\n    --success-100: #dcfaeb;\r\n    --success-200: #a9efc5;\r\n    --success-300: #75e0a7;\r\n    --success-400: #47cd89;\r\n    --success-500: #17b26a;\r\n    --success-600: #079455;\r\n    --success-700: #067647;\r\n    --success-800: #085d3a;\r\n    --success-900: #074d31;\r\n    --success-950: #053321;\r\n\r\n    /* ------------------------------------------opacity color palette--------------------------------------  */\r\n    /* 20% opacity */\r\n    --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n    --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n    /* 30% opacity */\r\n    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n    /* 40% opacity */\r\n    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n\r\n    /* ------------------------------------------Secondary Color------------------------------------------- */\r\n    /* blueLight color palete */\r\n    --lightBlue-25: #F5FBFF;\r\n    --lightBlue-50: #F0F9FF;\r\n    --lightBlue-100: #E0F2FE;\r\n    --lightBlue-200: #B9E6FE;\r\n    --lightBlue-300: #7CD4FD;\r\n    --lightBlue-400: #7CD4FD;\r\n    --lightBlue-500: #0BA5EC;\r\n    --lightBlue-600: #0086C9;\r\n    --lightBlue-700: #026AA2;\r\n    --lightBlue-800: #065986;\r\n    --lightBlue-900: #0B4A6F;\r\n    --lightBlue-950: #062C41;\r\n   \r\n\r\n    /* blue color palette */\r\n    --blue-25: #ECF5FE;\r\n    --blue-50: #E4F0FC;\r\n    --blue-100: #C8E0F9;\r\n    --blue-200: #9AC7F4;\r\n    --blue-300: #6AA9E7;\r\n    --blue-400: #378FE6;\r\n    --blue-500: #075DB2;\r\n    --blue-600: #064E94;\r\n    --blue-700: #053E77;\r\n    --blue-800: #042F59;\r\n    --blue-900: #022445;\r\n    --blue-950: #021D37;\r\n\r\n    /* Purple color palete */\r\n    --purple-25: #FAFAFF;\r\n    --purple-50: #F4F3FF;\r\n    --purple-100: #EBE9FE;\r\n    --purple-200: #D9D6FE;\r\n    --purple-300: #BDB4FE;\r\n    --purple-400: #9B8AFB;\r\n    --purple-500: #7A5AF8;\r\n    --purple-600: #6938EF;\r\n    --purple-700: #5925DC;\r\n    --purple-800: #4A1FB8;\r\n    --purple-900: #3E1C96;\r\n    --purple-950: #27115F;\r\n\r\n\r\n    /* pink color palette */\r\n    --pink-25: #FEF6FB;\r\n    --pink-50: #FDF2FA;\r\n    --pink-100: #FCE7F6;\r\n    --pink-200: #FCCEEE;\r\n    --pink-300: #FAA7E0;\r\n    --pink-400: #F670C7;\r\n    --pink-500: #EE46BC;\r\n    --pink-600: #DD2590;\r\n    --pink-700: #C11574;\r\n    --pink-800: #9E165F;\r\n    --pink-900: #851651;\r\n    --pink-950: #4E0D30;\r\n\r\n\r\n\r\n    /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n    /* -----------Text Color----------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-bold: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-bold: var(--gray-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-disabled: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-disabled: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-inverse: var(--base-black);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-brandDarkBlue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger: var(--brandRed-700);\r\n    }\r\n\r\n     [data-theme=\"light\"] {\r\n        --color-text-danger-subtle: var(--brandRed-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger-subtle: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-danger-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger-inverse: var(--brandRed-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-warning: var(--warning-600);\r\n    }\r\n\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-warning: var(--warning-300);\r\n    }\r\n\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-warning-subtle: var(--warning-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-warning-subtle: var(--warning-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-success: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-success-subtle: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-success-subtle: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-discovery-bold: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-discovery-bold: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-discovery: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-discovery: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-discovery-subtle: var(--blueLight-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-discovery-subtle: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-information-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-information: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-information-subtle: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-information-subtle: var(--blue-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-purple-bold: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-purple: var(--purple-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-purple-subtle: var(--purple-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-purple-subtle: var(--purple-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-pink: var(--pink-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-pink-subtle: var(--pink-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-pink-subtle: var(--pink-400);\r\n    }\r\n\r\n\r\n    /* --------------Link color--------------- */\r\n\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-link: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-link: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-link-pressed: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-link-pressed: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-link-visited: var(--blueLight-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-link-visited: var(--blueLight-300);\r\n    }\r\n\r\n\r\n    /* --------------Icon color--------------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-bold: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-bold: var(--gray-100);\r\n    }\r\n    \r\n    [data-theme=\"light\"] {\r\n        --color-icon: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-disabled: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-disabled: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-inverse: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-danger: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-danger-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-danger-inverse: var(--brandRed-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-warning: var(--warning-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-warning: var(--warning-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-success: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-discovery-bold: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-discovery-bold: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-discovery: var(--blueLight-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-discovery: var(--blueLight-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-information-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-information: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-purple-bold: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-purple: var(--purple-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-pink: var(--pink-300);\r\n    }\r\n\r\n    /* ----------------Border Color --------------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-bold: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-bold: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-subtle: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-subtle: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-subtler: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-subtler: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-disabled: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-disabled: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-inverse: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-input: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-input: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-focus: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-focus: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger-subtle: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger-subtle: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger-subtler: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger-subtler: var(--brandRed-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning: var(--warning-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning: var(--warning-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning-subtle: var(--warning-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning-subtle: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning-subtler: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning-subtler: var(--warning-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success-subtle: var(--success-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success-subtle: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success-subtler: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success-subtler: var(--success-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery-bold: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery-bold: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery: var(--blueLight-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery: var(--blueLight-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery-subtle: var(--blueLight-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery-subtle: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery-subtler: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery-subtler: var(--blueLight-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information-subtle: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information-subtle: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information-subtler: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information-subtler: var(--blue-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple-bold: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple: var(--purple-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple-subtle: var(--purple-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple-subtle: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple-subtler: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple-subtler: var(--purple-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink: var(--pink-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink-subtle: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink-subtle: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink-subtler: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink-subtler: var(--pink-900);\r\n    }\r\n\r\n\r\n\r\n    /* Emmanuel Kadiri starts from background color */\r\n\r\n    /* ----------------Background Color --------------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-card-bold: var(--gray-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-card-bold: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-card: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-card: var(--gray-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-input: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-input: var(--gray-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-disabled: var(--gray-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-disabled: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandRed-hover: var(--brandRed-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandRed-hover: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandRed-pressed: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandRed-pressed: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-bold: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-bold: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-subtle: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-subtle: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-subtler: var(--gray-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-subtler: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-subtlest: var(--gray-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-subtlest: var(--gray-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-subtle: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-subtle: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-subtler: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-subtler: var(--brandRed-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-subtlest: var(--brandRed-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-subtlest: var(--brandRed-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning: var(--warning-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning: var(--warning-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-subtle: var(--warning-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-subtle: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-subtler: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-subtler: var(--warning-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-subtlest: var(--warning-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-subtlest: var(--warning-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success: var(--success-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-subtle: var(--success-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-subtle: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-subtler: var(--success-100); \r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-subtler: var(--success-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-subtlest: var(--success-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-subtlest: var(--success-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery-bold: var(--lightBlue-800)\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-bold: var(--lightBlue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery: var(--lightBlue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery: var(--lightBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"]{\r\n        --color-background-discovery-subtle: var(--lightBlue-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-subtle: var(--lightBlue-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery-subtler: var(--lightBlue-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-subtler: var(--lightBlue-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery-subtlest: var(--lightBlue-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-subtlest: var(--lightBlue-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-bold: var(--blue-100)\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information-subtle: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtle: var(--blue-800);\r\n    }\r\n\r\n    [data-them=\"light\"] {\r\n        --color-background-information-subtler: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtler: var(--blue-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information-subtlest: var(--blue-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtlest: var(--blue-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtle: var(--purple-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtle: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtler: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtler: var(--purple-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtlest: var(--purple-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtlest: var(--purple-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtle: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtle: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtler: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtler: var(--pink-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtlest: var(--purple-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtlest: var(--pink-950);\r\n    }\r\n\r\n\r\n\r\n    /* ----------------Blanket Color --------------- */\r\n    [data-theme=\"light\"] {\r\n        --color-blanket: var(--darkBlue500-opacity20);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-blanket: var(--darkBlue200-opacity20);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n    }\r\n\r\n\r\n\r\n    /* ----------------Skeleton Color --------------- */\r\n    [data-theme=\"light\"] {\r\n        --color-skeleton: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-skeleton: var(--gray-800);\r\n    }\r\n\r\n\r\n\r\n    /* ----------------Surface Color --------------- */\r\n    [data-theme=\"light\"] {\r\n        --color-surface-bold: var(--gray-25);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface-bold: var(--gray-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-surface: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface: var(--gray-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-surface-hovered: var(--gray-100); \r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface-hovered: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-surface-pressed: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface-pressed: var(--gray-700);\r\n    }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root{\r\n    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n    --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n    --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n    --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);   \r\n    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n    --blur-sm: blur(4px);\r\n    --blur-md: blur(8px);\r\n    --blur-lg: blur(12px);\r\n    --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs{\r\n    box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm{\r\n    box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md{\r\n    box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg{\r\n    box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl{\r\n    box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl{\r\n    box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl{\r\n    box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm{\r\n    backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md{\r\n    backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg{\r\n    backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl{\r\n    backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n\r\n/* -----------------Gradients----------------- */\r\n:root{\r\n    /* Gray Gradients */\r\n    /* --gray-gradient-600: linear-gradient(); */\r\n    --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n    --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n    --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n    --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n    --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n    --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n    /* Brand Dark Blue Gradients */\r\n    --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n    --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n    --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n    --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n    --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n    --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n    /* Brand Red Gradients */\r\n    --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n    --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n    --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n    --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n    --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n    --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n    /* Blue Gradients */\r\n    --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n    --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n    --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n    --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n    --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n    --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n    background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n    background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n    background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n    background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n    background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n    background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d{\r\n    background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d{\r\n    background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d{\r\n    background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d{\r\n    background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d{\r\n    background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d{\r\n    background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d{\r\n    background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d{\r\n    background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d{\r\n    background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d{\r\n    background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d{\r\n    background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d{\r\n    background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d{\r\n    background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d{\r\n    background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d{\r\n    background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d{\r\n    background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d{\r\n    background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d{\r\n    background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root{\r\n    /* Positive spacing */\r\n    --spacing-none: 0rem;\r\n    --spacing-half: 0.125rem;\r\n    --spacing-1: 0.25rem;\r\n    --spacing-2: 0.5rem;\r\n    --spacing-3: 0.75rem;\r\n    --spacing-4: 1rem;\r\n    --spacing-5: 1.25rem;\r\n    --spacing-6: 1.5rem;\r\n    --spacing-7: 2rem;\r\n    --spacing-8: 2.5rem;\r\n    --spacing-12: 3rem;\r\n    --spacing-16: 4rem;\r\n    --spacing-20: 5rem;\r\n    --spacing-24: 6rem;\r\n    --spacing-32: 8rem;\r\n    --spacing-40: 10rem;\r\n    --spacing-48: 12rem;\r\n    --spacing-56: 14rem;\r\n    --spacing-64: 16rem;\r\n\r\n    /* Negative spacing */\r\n\r\n    --spacing-negative-half: -0.125rem;\r\n    --spacing-negative-1: -0.25rem;\r\n    --spacing-negative-2: -0.5rem;\r\n    --spacing-negative-3: -0.75rem;\r\n    --spacing-negative-4: -1rem;\r\n    --spacing-negative-5: -1.25rem;\r\n    --spacing-negative-6: -1.5rem;\r\n    --spacing-negative-7: -2rem;\r\n\r\n    /* Radius  */\r\n    --rounded-none: 0rem;\r\n    --rounded-xs: 0.25rem;\r\n    --rounded-sm: 0.5rem;\r\n    --rounded-md: 0.75rem;\r\n    --rounded-lg: 1rem;\r\n    --rounded-xl: 1.5rem;\r\n    --rounded-2xl: 2rem;\r\n    --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root{\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 4.5rem;\r\n    --font-size-d-xl: 3.75rem;\r\n    --font-size-d-lg: 3rem;\r\n    --font-size-d-md: 2.25rem;\r\n    --font-size-d-sm: 1.875rem;\r\n    --font-size-d-xs: 1.5rem;\r\n    --font-size-t-xl: 1.25rem;\r\n    --font-size-t-lg: 1.125rem;\r\n    --font-size-t-md: 1rem;\r\n    --font-size-t-sm: 0.875rem;\r\n    --font-size-t-xs: 0.75rem;\r\n    --font-size-t-xxs: 0.625rem;\r\n\r\n    /* Font Weights */\r\n    --font-weight-bold: 700;\r\n    --font-weight-semi-bold: 600;\r\n    --font-weight-medium: 500;\r\n    --font-weight-regular: 400; \r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 5rem;\r\n    --font-line-height-d-xl: 4.25rem;\r\n    --font-line-height-d-lg: 3.75rem;\r\n    --font-line-height-d-md: 2.75rem;\r\n    --font-line-height-d-sm: 2.375rem;   \r\n    --font-line-height-d-xs: 2rem;   \r\n    --font-line-height-t-xl: 1.875rem;\r\n    --font-line-height-t-lg: 1.688rem;\r\n    --font-line-height-t-md: 1.5rem;\r\n    --font-line-height-t-sm: 1.313rem;\r\n    --font-line-height-t-xs: 1.125rem;\r\n    --font-line-height-t-xxs: 0.938rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-d-2xl: -0.09rem;\r\n    --font-letter-spacing-d-xl: -0.075rem;\r\n    --font-letter-spacing-d-lg: -0.075rem;\r\n    --font-letter-spacing-d-md: -0.045rem;\r\n    --font-letter-spacing-d-sm: 0;\r\n    --font-letter-spacing-d-xs: 0;\r\n    --font-letter-spacing-d-xxs: 0;\r\n\r\n    /* Font Families */\r\n    --font-family-title: 'Sora';\r\n    --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n    :root{\r\n        /* Font Sizes */\r\n        --font-size-d-2xl: 3.75rem;\r\n        --font-size-d-xl: 3.5rem;\r\n        --font-size-d-lg: 2.75rem;\r\n        --font-size-d-md: 2.25rem;\r\n        --font-size-d-sm: 1.875rem;\r\n        --font-size-d-xs: 1.5rem;\r\n\r\n        /* Line Heights */\r\n        --font-line-height-d-2xl: 4.25rem;\r\n        --font-line-height-d-xl: 3.75rem;\r\n        --font-line-height-d-lg: 2.4375rem;\r\n        --font-line-height-d-md: 2.75rem;\r\n        --font-line-height-d-sm: 2.375rem;\r\n        --font-line-height-d-xs: 2rem;\r\n\r\n        /* Letter Spacings */\r\n        --font-letter-spacing-2xl: -0.075rem;\r\n        --font-letter-spacing-xl: -0.065rem;\r\n        --font-letter-spacing-lg: -0.045rem;\r\n        --font-letter-spacing-md: -0.045rem;\r\n        --font-letter-spacing-sm: 0rem;\r\n        --font-letter-spacing-xs: 0rem;\r\n    }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n    :root{\r\n        /* Font Sizes */\r\n        --font-size-d-2xl: 3rem;\r\n        --font-size-d-xl: 2.5rem;\r\n        --font-size-d-lg: 2rem;\r\n        --font-size-d-md: 1.75rem;\r\n        --font-size-d-sm: 1.5rem;\r\n        --font-size-d-xs: 1.25rem;\r\n\r\n        /* Line Heights */\r\n        --font-line-height-d-2xl: 3.375rem;\r\n        --font-line-height-d-xl: 2.875rem;\r\n        --font-line-height-d-lg: 2.5rem;\r\n        --font-line-height-d-md: 2.1375rem;\r\n        --font-line-height-d-sm: 2rem;\r\n        --font-line-height-d-xs: 1.75rem;\r\n\r\n        /* Letter Spacings */\r\n        --font-letter-spacing-2xl: -0.06rem;\r\n        --font-letter-spacing-xl: -0.05rem;\r\n        --font-letter-spacing-lg: -0.045rem;\r\n        --font-letter-spacing-md: 0rem;\r\n        --font-letter-spacing-sm: 0rem;\r\n        --font-letter-spacing-xs: 0rem;\r\n    }\r\n}\r\n\r\n.display-2xl-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-2xl);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-2xl);\r\n    letter-spacing: var(--font-letter-spacing-d-2xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-2xl-bold::before{\r\n    margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after{\r\n    margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-2xl);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-2xl);\r\n    letter-spacing: var(--font-letter-spacing-d-2xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before{\r\n    margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after{\r\n    margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xl);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-xl);\r\n    letter-spacing: var(--font-letter-spacing-d-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xl-bold::before{\r\n    margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after{\r\n    margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xl);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-xl);\r\n    letter-spacing: var(--font-letter-spacing-d-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before{\r\n    margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after{\r\n    margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-lg);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-lg);\r\n    letter-spacing: var(--font-letter-spacing-d-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-lg-bold::before{\r\n    margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after{\r\n    margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-lg);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-lg);\r\n    letter-spacing: var(--font-letter-spacing-d-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before{\r\n    margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after{\r\n    margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-md);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-md);\r\n    letter-spacing: var(--font-letter-spacing-d-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-md-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-md);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-md);\r\n    letter-spacing: var(--font-letter-spacing-d-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-md-semi-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-sm);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-sm);\r\n    letter-spacing: var(--font-letter-spacing-d-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-sm-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-sm);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-sm);\r\n    letter-spacing: var(--font-letter-spacing-d-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xs);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-xs);\r\n    letter-spacing: var(--font-letter-spacing-d-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xs-bold::before{\r\n    margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after{\r\n    margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-xs);\r\n    letter-spacing: var(--font-letter-spacing-d-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before{\r\n    margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after{\r\n    margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-bold::before{\r\n    margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after{\r\n    margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before{\r\n    margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after{\r\n    margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-medium::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-regular::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-bold::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-medium::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-regular::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-bold::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-semi-bold::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-medium::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-regular::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-bold::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after{\r\n    margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n    margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n    margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n    margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before{\r\n    margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-medium::before{\r\n    margin-bottom: -0.199em;\r\n}\r\n\r\n.text-xs-medium::after{\r\n    margin-top: -0.196em;\r\n}\r\n\r\n.text-xs-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n    margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-medium::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-regular::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.export_dropdown{\r\n    display: flex;\r\n    width: fit-content;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-none);\r\n    border-radius: var(--rounded-sm);\r\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n    background: var(--color-surface, #FFFFFF);\r\n    box-shadow: var(--shadow-sm);\r\n    position: relative;\r\n}\r\n\r\n.first_dropdown{\r\n    position: absolute;\r\n    top: 6rem;\r\n    left: -9.8rem;\r\n}\r\n\r\n.second_dropdown{\r\n    position: absolute;\r\n    top: 9rem;\r\n    left: -9.8rem;\r\n}";
 const GbExportDropdownStyle0 = gbExportDropdownCss;
@@ -17,7 +17,7 @@ const GbExportDropdown = class {
         console.log({ exportType, dataType });
     }
     render() {
-        return (h(Fragment, null, h("div", { key: 'e39cf3035d82f6814f4e90b341a99e8a8763f994', class: `export_dropdown` }, h("gb-export-dropdown-item", { key: '911684cbc27a3ffc1268c48bebb752c7f3cdd2c8', type: "pdf", state: StateEnum.Default, onMouseOver: () => (this.showFirstSubDropdown = true), onMouseOut: () => (this.showFirstSubDropdown = false) }), h("gb-export-dropdown-item", { key: 'bbfc0ecb8f9c5b70273da802109e35c6c00a6498', type: "csv", state: StateEnum.Default, onMouseOver: () => (this.showSecondSubDropdown = true), onMouseOut: () => (this.showSecondSubDropdown = false) })), this.showFirstSubDropdown && (h("gb-export-sub-dropdown", { key: 'ea6f836220c96288c54a0dfc4350622902635a9c', class: `first_dropdown`, onMouseOver: () => (this.showFirstSubDropdown = true), onMouseOut: () => (this.showFirstSubDropdown = false) }, h("p", { key: 'e0c83e6c0b20bbea149be2fa682da8b93d2888a1', slot: "label_one", onClick: () => this.onExportClicked('pdf', 'entire_data') }, "Entire Data"), h("p", { key: '1bf7bfa594e91d9af9aba5668ec9a6c752e247d6', slot: "label_two", onClick: () => this.onExportClicked('pdf', 'data_on_view') }, "Data on view"), h("p", { key: 'f66b1c20eda98c8432304a67438b6a8518adb02a', slot: "label_three", onClick: () => this.onExportClicked('pdf', 'filtered_data') }, "Filtered Data"))), this.showSecondSubDropdown && (h("gb-export-sub-dropdown", { key: '9ce50fd70735b132b579959cb714918d9819ceef', class: `second_dropdown`, onMouseOver: () => (this.showSecondSubDropdown = true), onMouseOut: () => (this.showSecondSubDropdown = false) }, h("p", { key: '1af04740e4fe8b391f247432f8eba37b30b72bc4', slot: "label_one", onClick: () => this.onExportClicked('csv', 'entire_data') }, "Entire Data"), h("p", { key: 'ff373e8b25362da894c51039bf7e03ccd6ed91d2', slot: "label_two", onClick: () => this.onExportClicked('csv', 'data_on_view') }, "Data on view"), h("p", { key: '05e0fa43668c1d47219b674a4e0456b3eb5b7c7f', slot: "label_three", onClick: () => this.onExportClicked('csv', 'filtered_data') }, "Filtered Data")))));
+        return (h(Fragment, null, h("div", { key: 'b5c31165cdffd35a9aa839d4bbc29b5b192f76c7', class: `export_dropdown` }, h("gb-export-dropdown-item", { key: '315130bba9ed9b2380835e683664ab0917b5e351', type: "pdf", state: StateEnum.Default, onMouseOver: () => (this.showFirstSubDropdown = true), onMouseOut: () => (this.showFirstSubDropdown = false) }), h("gb-export-dropdown-item", { key: '5261763d704d83a9287a5eda5868005961bc0a56', type: "csv", state: StateEnum.Default, onMouseOver: () => (this.showSecondSubDropdown = true), onMouseOut: () => (this.showSecondSubDropdown = false) })), this.showFirstSubDropdown && (h("gb-export-sub-dropdown", { key: '4192b8f5ad2486a12d3dd9913944dac4b58a0525', class: `first_dropdown`, onMouseOver: () => (this.showFirstSubDropdown = true), onMouseOut: () => (this.showFirstSubDropdown = false) }, h("p", { key: 'b59aed9c5a2b59a754f84fe14a9a6b5a2091a451', slot: "label_one", onClick: () => this.onExportClicked('pdf', 'entire_data') }, "Entire Data"), h("p", { key: '08bd0d865a71c9aa409ad5cc6486259ee4232e8e', slot: "label_two", onClick: () => this.onExportClicked('pdf', 'data_on_view') }, "Data on view"), h("p", { key: '14d405ef97234bf2fa922b63d648b31d7440e262', slot: "label_three", onClick: () => this.onExportClicked('pdf', 'filtered_data') }, "Filtered Data"))), this.showSecondSubDropdown && (h("gb-export-sub-dropdown", { key: 'c51f9b6c91bda7812832c55d5b503038f6094ce8', class: `second_dropdown`, onMouseOver: () => (this.showSecondSubDropdown = true), onMouseOut: () => (this.showSecondSubDropdown = false) }, h("p", { key: '705b034caba4985d686d81e3ce64dfe1668037a0', slot: "label_one", onClick: () => this.onExportClicked('csv', 'entire_data') }, "Entire Data"), h("p", { key: '529c0254371bf2326f6b7c602d6387dc5e6f8942', slot: "label_two", onClick: () => this.onExportClicked('csv', 'data_on_view') }, "Data on view"), h("p", { key: '46ff83cfce945dd44b9c85b312ac04d6b5289f51', slot: "label_three", onClick: () => this.onExportClicked('csv', 'filtered_data') }, "Filtered Data")))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/gb-export-sub-dropdown-item.entry.js CHANGED Viewed

@@ -27,7 +27,7 @@ const GbExportSubDropdownItem = class {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: 'd83ab143334962a5bddf53db4b68cbd4c921a3ef', class: `sub_dropdown_div ${this.state === 'disabled' ? 'disabled' : ''}` }, h("div", { key: '62a7bb11bb40ef0f98b4bedcf4c24a7d2559d044', class: `content` }, h("div", { key: '37caea2c2f3125cd767614bbb14c71aaa93d1bf9', class: `text_and_suppporting_text` }, h("div", { key: '58d7420f901fcf500900109c67c222a31a4f2bd8', class: `icon ${this.state}`, innerHTML: this.leadingIconSvg }), h("div", { key: 'fee690d6a59ee8687c780163a1c6904470016b26', class: `text` }, h("slot", { key: 'ae0a68eb179e6fb1da7915d7d9a3ac78ed9f7ccd', name: "label" }))))));
+        return (h("div", { key: 'bfd3b0f40a878041581e71388cbf0cb7ec721d27', class: `sub_dropdown_div ${this.state === 'disabled' ? 'disabled' : ''}` }, h("div", { key: '02d57c5d3f891562c8c57a12543a4e406ad190ec', class: `content` }, h("div", { key: 'b9768fecbfa98b1b9e8ec2d943f1f152328086d3', class: `text_and_suppporting_text` }, h("div", { key: '94c9a1277187034f06439809ca815cd4e7a203e6', class: `icon ${this.state}`, innerHTML: this.leadingIconSvg }), h("div", { key: '28a3f7da6dec84effa2e48e65c48bcaef8e10f77', class: `text` }, h("slot", { key: '9b548043f399ff084872ab2357ac633965f40a8a', name: "label" }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/gb-file-upload-item-base.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, F as Fragment } from './index-f6b9f9bf.js';
-import { S as StateEnum } from './reusableModels-8496e911.js';
+import { S as StateEnum } from './reusableModels-e864cf6e.js';
 const gbFileUploadItemBaseCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n    /* --------------------------------------Primary Colors--------------------------------------------- */\r\n    /* base color palette */\r\n    --base-white: #fff;\r\n    --base-black: #000;\r\n\r\n\r\n    /* gray color palette  */\r\n    --gray-25: #fcfcfd;\r\n    --gray-50: #f6f8fa;\r\n    --gray-100: #eef2f6;\r\n    --gray-200: #e3e8ef;\r\n    --gray-300: #cdd5df;\r\n    --gray-400: #9aa4b2;\r\n    --gray-500: #697586;\r\n    --gray-600: #4b5565;\r\n    --gray-700: #364152;\r\n    --gray-800: #202939;\r\n    --gray-900: #121926;\r\n    --gray-950: #0D121C;\r\n\r\n    /* brand dark blue color palette */\r\n    --brandDarkBlue-25: #F9F9FB;\r\n    --brandDarkBlue-50: #edeef3;\r\n    --brandDarkBlue-100: #d3d5e0;\r\n    --brandDarkBlue-200: #b5b9cc;\r\n    --brandDarkBlue-300: #9095b2;\r\n    --brandDarkBlue-400: #464f7f;\r\n    --brandDarkBlue-500: #212c65;\r\n    --brandDarkBlue-600: #1e285c;\r\n    --brandDarkBlue-700: #1c2554;\r\n    --brandDarkBlue-800: #161d43;\r\n    --brandDarkBlue-900: #0b0f22;\r\n    --brandDarkBlue-950: #070914;\r\n\r\n    /* brand red color palette */\r\n    --brandRed-25: #fffbfa;\r\n    --brandRed-50: #fef1f2;\r\n    --brandRed-100: #fde3e5;\r\n    --brandRed-200: #f9b4ba;\r\n    --brandRed-300: #f68e98;\r\n    --brandRed-400: #f36976;\r\n    --brandRed-500: #e21b2e;\r\n    --brandRed-600: #cc1a2a;\r\n    --brandRed-700: #b51726;\r\n    --brandRed-800: #8c121d;\r\n    --brandRed-900: #680d16;\r\n    --brandRed-950: #3f080d;\r\n\r\n    /* warning color palette */\r\n    --warning-25: #fffcf5;\r\n    --warning-50: #fffaeb;\r\n    --warning-100: #fef0c7;\r\n    --warning-200: #fedf89;\r\n    --warning-300: #fec84b;\r\n    --warning-400: #fdb022;\r\n    --warning-500: #f79009;\r\n    --warning-600: #dc6803;\r\n    --warning-700: #b54708;\r\n    --warning-800: #93370d;\r\n    --warning-900: #7A2e0e;\r\n    --warning-950: #4e1d09;\r\n\r\n    /* success color palette  */\r\n    --success-25: #f6fef9;\r\n    --success-50: #ecfdf3;\r\n    --success-100: #dcfaeb;\r\n    --success-200: #a9efc5;\r\n    --success-300: #75e0a7;\r\n    --success-400: #47cd89;\r\n    --success-500: #17b26a;\r\n    --success-600: #079455;\r\n    --success-700: #067647;\r\n    --success-800: #085d3a;\r\n    --success-900: #074d31;\r\n    --success-950: #053321;\r\n\r\n    /* ------------------------------------------opacity color palette--------------------------------------  */\r\n    /* 20% opacity */\r\n    --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n    --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n    /* 30% opacity */\r\n    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n    /* 40% opacity */\r\n    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n\r\n    /* ------------------------------------------Secondary Color------------------------------------------- */\r\n    /* blueLight color palete */\r\n    --lightBlue-25: #F5FBFF;\r\n    --lightBlue-50: #F0F9FF;\r\n    --lightBlue-100: #E0F2FE;\r\n    --lightBlue-200: #B9E6FE;\r\n    --lightBlue-300: #7CD4FD;\r\n    --lightBlue-400: #7CD4FD;\r\n    --lightBlue-500: #0BA5EC;\r\n    --lightBlue-600: #0086C9;\r\n    --lightBlue-700: #026AA2;\r\n    --lightBlue-800: #065986;\r\n    --lightBlue-900: #0B4A6F;\r\n    --lightBlue-950: #062C41;\r\n   \r\n\r\n    /* blue color palette */\r\n    --blue-25: #ECF5FE;\r\n    --blue-50: #E4F0FC;\r\n    --blue-100: #C8E0F9;\r\n    --blue-200: #9AC7F4;\r\n    --blue-300: #6AA9E7;\r\n    --blue-400: #378FE6;\r\n    --blue-500: #075DB2;\r\n    --blue-600: #064E94;\r\n    --blue-700: #053E77;\r\n    --blue-800: #042F59;\r\n    --blue-900: #022445;\r\n    --blue-950: #021D37;\r\n\r\n    /* Purple color palete */\r\n    --purple-25: #FAFAFF;\r\n    --purple-50: #F4F3FF;\r\n    --purple-100: #EBE9FE;\r\n    --purple-200: #D9D6FE;\r\n    --purple-300: #BDB4FE;\r\n    --purple-400: #9B8AFB;\r\n    --purple-500: #7A5AF8;\r\n    --purple-600: #6938EF;\r\n    --purple-700: #5925DC;\r\n    --purple-800: #4A1FB8;\r\n    --purple-900: #3E1C96;\r\n    --purple-950: #27115F;\r\n\r\n\r\n    /* pink color palette */\r\n    --pink-25: #FEF6FB;\r\n    --pink-50: #FDF2FA;\r\n    --pink-100: #FCE7F6;\r\n    --pink-200: #FCCEEE;\r\n    --pink-300: #FAA7E0;\r\n    --pink-400: #F670C7;\r\n    --pink-500: #EE46BC;\r\n    --pink-600: #DD2590;\r\n    --pink-700: #C11574;\r\n    --pink-800: #9E165F;\r\n    --pink-900: #851651;\r\n    --pink-950: #4E0D30;\r\n\r\n\r\n\r\n    /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n    /* -----------Text Color----------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-bold: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-bold: var(--gray-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-disabled: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-disabled: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-inverse: var(--base-black);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-brandDarkBlue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger: var(--brandRed-700);\r\n    }\r\n\r\n     [data-theme=\"light\"] {\r\n        --color-text-danger-subtle: var(--brandRed-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger-subtle: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-danger-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger-inverse: var(--brandRed-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-warning: var(--warning-600);\r\n    }\r\n\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-warning: var(--warning-300);\r\n    }\r\n\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-warning-subtle: var(--warning-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-warning-subtle: var(--warning-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-success: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-success-subtle: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-success-subtle: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-discovery-bold: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-discovery-bold: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-discovery: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-discovery: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-discovery-subtle: var(--blueLight-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-discovery-subtle: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-information-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-information: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-information-subtle: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-information-subtle: var(--blue-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-purple-bold: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-purple: var(--purple-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-purple-subtle: var(--purple-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-purple-subtle: var(--purple-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-pink: var(--pink-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-pink-subtle: var(--pink-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-pink-subtle: var(--pink-400);\r\n    }\r\n\r\n\r\n    /* --------------Link color--------------- */\r\n\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-link: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-link: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-link-pressed: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-link-pressed: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-link-visited: var(--blueLight-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-link-visited: var(--blueLight-300);\r\n    }\r\n\r\n\r\n    /* --------------Icon color--------------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-bold: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-bold: var(--gray-100);\r\n    }\r\n    \r\n    [data-theme=\"light\"] {\r\n        --color-icon: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-disabled: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-disabled: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-inverse: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-danger: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-danger-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-danger-inverse: var(--brandRed-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-warning: var(--warning-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-warning: var(--warning-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-success: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-discovery-bold: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-discovery-bold: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-discovery: var(--blueLight-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-discovery: var(--blueLight-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-information-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-information: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-purple-bold: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-purple: var(--purple-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-pink: var(--pink-300);\r\n    }\r\n\r\n    /* ----------------Border Color --------------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-bold: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-bold: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-subtle: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-subtle: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-subtler: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-subtler: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-disabled: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-disabled: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-inverse: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-input: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-input: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-focus: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-focus: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger-subtle: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger-subtle: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger-subtler: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger-subtler: var(--brandRed-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning: var(--warning-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning: var(--warning-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning-subtle: var(--warning-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning-subtle: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning-subtler: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning-subtler: var(--warning-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success-subtle: var(--success-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success-subtle: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success-subtler: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success-subtler: var(--success-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery-bold: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery-bold: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery: var(--blueLight-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery: var(--blueLight-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery-subtle: var(--blueLight-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery-subtle: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery-subtler: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery-subtler: var(--blueLight-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information-subtle: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information-subtle: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information-subtler: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information-subtler: var(--blue-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple-bold: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple: var(--purple-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple-subtle: var(--purple-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple-subtle: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple-subtler: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple-subtler: var(--purple-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink: var(--pink-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink-subtle: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink-subtle: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink-subtler: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink-subtler: var(--pink-900);\r\n    }\r\n\r\n\r\n\r\n    /* Emmanuel Kadiri starts from background color */\r\n\r\n    /* ----------------Background Color --------------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-card-bold: var(--gray-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-card-bold: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-card: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-card: var(--gray-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-input: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-input: var(--gray-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-disabled: var(--gray-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-disabled: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandRed-hover: var(--brandRed-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandRed-hover: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandRed-pressed: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandRed-pressed: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-bold: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-bold: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-subtle: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-subtle: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-subtler: var(--gray-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-subtler: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-subtlest: var(--gray-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-subtlest: var(--gray-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-subtle: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-subtle: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-subtler: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-subtler: var(--brandRed-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-subtlest: var(--brandRed-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-subtlest: var(--brandRed-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning: var(--warning-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning: var(--warning-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-subtle: var(--warning-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-subtle: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-subtler: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-subtler: var(--warning-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-subtlest: var(--warning-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-subtlest: var(--warning-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success: var(--success-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-subtle: var(--success-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-subtle: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-subtler: var(--success-100); \r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-subtler: var(--success-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-subtlest: var(--success-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-subtlest: var(--success-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery-bold: var(--lightBlue-800)\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-bold: var(--lightBlue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery: var(--lightBlue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery: var(--lightBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"]{\r\n        --color-background-discovery-subtle: var(--lightBlue-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-subtle: var(--lightBlue-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery-subtler: var(--lightBlue-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-subtler: var(--lightBlue-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery-subtlest: var(--lightBlue-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-subtlest: var(--lightBlue-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-bold: var(--blue-100)\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information-subtle: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtle: var(--blue-800);\r\n    }\r\n\r\n    [data-them=\"light\"] {\r\n        --color-background-information-subtler: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtler: var(--blue-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information-subtlest: var(--blue-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtlest: var(--blue-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtle: var(--purple-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtle: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtler: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtler: var(--purple-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtlest: var(--purple-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtlest: var(--purple-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtle: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtle: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtler: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtler: var(--pink-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtlest: var(--purple-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtlest: var(--pink-950);\r\n    }\r\n\r\n\r\n\r\n    /* ----------------Blanket Color --------------- */\r\n    [data-theme=\"light\"] {\r\n        --color-blanket: var(--darkBlue500-opacity20);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-blanket: var(--darkBlue200-opacity20);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n    }\r\n\r\n\r\n\r\n    /* ----------------Skeleton Color --------------- */\r\n    [data-theme=\"light\"] {\r\n        --color-skeleton: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-skeleton: var(--gray-800);\r\n    }\r\n\r\n\r\n\r\n    /* ----------------Surface Color --------------- */\r\n    [data-theme=\"light\"] {\r\n        --color-surface-bold: var(--gray-25);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface-bold: var(--gray-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-surface: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface: var(--gray-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-surface-hovered: var(--gray-100); \r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface-hovered: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-surface-pressed: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface-pressed: var(--gray-700);\r\n    }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root{\r\n    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n    --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n    --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n    --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);   \r\n    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n    --blur-sm: blur(4px);\r\n    --blur-md: blur(8px);\r\n    --blur-lg: blur(12px);\r\n    --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs{\r\n    box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm{\r\n    box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md{\r\n    box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg{\r\n    box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl{\r\n    box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl{\r\n    box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl{\r\n    box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm{\r\n    backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md{\r\n    backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg{\r\n    backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl{\r\n    backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n\r\n/* -----------------Gradients----------------- */\r\n:root{\r\n    /* Gray Gradients */\r\n    /* --gray-gradient-600: linear-gradient(); */\r\n    --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n    --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n    --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n    --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n    --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n    --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n    /* Brand Dark Blue Gradients */\r\n    --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n    --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n    --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n    --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n    --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n    --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n    /* Brand Red Gradients */\r\n    --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n    --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n    --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n    --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n    --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n    --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n    /* Blue Gradients */\r\n    --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n    --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n    --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n    --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n    --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n    --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n    background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n    background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n    background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n    background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n    background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n    background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d{\r\n    background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d{\r\n    background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d{\r\n    background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d{\r\n    background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d{\r\n    background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d{\r\n    background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d{\r\n    background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d{\r\n    background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d{\r\n    background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d{\r\n    background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d{\r\n    background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d{\r\n    background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d{\r\n    background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d{\r\n    background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d{\r\n    background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d{\r\n    background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d{\r\n    background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d{\r\n    background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root{\r\n    /* Positive spacing */\r\n    --spacing-none: 0rem;\r\n    --spacing-half: 0.125rem;\r\n    --spacing-1: 0.25rem;\r\n    --spacing-2: 0.5rem;\r\n    --spacing-3: 0.75rem;\r\n    --spacing-4: 1rem;\r\n    --spacing-5: 1.25rem;\r\n    --spacing-6: 1.5rem;\r\n    --spacing-7: 2rem;\r\n    --spacing-8: 2.5rem;\r\n    --spacing-12: 3rem;\r\n    --spacing-16: 4rem;\r\n    --spacing-20: 5rem;\r\n    --spacing-24: 6rem;\r\n    --spacing-32: 8rem;\r\n    --spacing-40: 10rem;\r\n    --spacing-48: 12rem;\r\n    --spacing-56: 14rem;\r\n    --spacing-64: 16rem;\r\n\r\n    /* Negative spacing */\r\n\r\n    --spacing-negative-half: -0.125rem;\r\n    --spacing-negative-1: -0.25rem;\r\n    --spacing-negative-2: -0.5rem;\r\n    --spacing-negative-3: -0.75rem;\r\n    --spacing-negative-4: -1rem;\r\n    --spacing-negative-5: -1.25rem;\r\n    --spacing-negative-6: -1.5rem;\r\n    --spacing-negative-7: -2rem;\r\n\r\n    /* Radius  */\r\n    --rounded-none: 0rem;\r\n    --rounded-xs: 0.25rem;\r\n    --rounded-sm: 0.5rem;\r\n    --rounded-md: 0.75rem;\r\n    --rounded-lg: 1rem;\r\n    --rounded-xl: 1.5rem;\r\n    --rounded-2xl: 2rem;\r\n    --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root{\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 4.5rem;\r\n    --font-size-d-xl: 3.75rem;\r\n    --font-size-d-lg: 3rem;\r\n    --font-size-d-md: 2.25rem;\r\n    --font-size-d-sm: 1.875rem;\r\n    --font-size-d-xs: 1.5rem;\r\n    --font-size-t-xl: 1.25rem;\r\n    --font-size-t-lg: 1.125rem;\r\n    --font-size-t-md: 1rem;\r\n    --font-size-t-sm: 0.875rem;\r\n    --font-size-t-xs: 0.75rem;\r\n    --font-size-t-xxs: 0.625rem;\r\n\r\n    /* Font Weights */\r\n    --font-weight-bold: 700;\r\n    --font-weight-semi-bold: 600;\r\n    --font-weight-medium: 500;\r\n    --font-weight-regular: 400; \r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 5rem;\r\n    --font-line-height-d-xl: 4.25rem;\r\n    --font-line-height-d-lg: 3.75rem;\r\n    --font-line-height-d-md: 2.75rem;\r\n    --font-line-height-d-sm: 2.375rem;   \r\n    --font-line-height-d-xs: 2rem;   \r\n    --font-line-height-t-xl: 1.875rem;\r\n    --font-line-height-t-lg: 1.688rem;\r\n    --font-line-height-t-md: 1.5rem;\r\n    --font-line-height-t-sm: 1.313rem;\r\n    --font-line-height-t-xs: 1.125rem;\r\n    --font-line-height-t-xxs: 0.938rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-d-2xl: -0.09rem;\r\n    --font-letter-spacing-d-xl: -0.075rem;\r\n    --font-letter-spacing-d-lg: -0.075rem;\r\n    --font-letter-spacing-d-md: -0.045rem;\r\n    --font-letter-spacing-d-sm: 0;\r\n    --font-letter-spacing-d-xs: 0;\r\n    --font-letter-spacing-d-xxs: 0;\r\n\r\n    /* Font Families */\r\n    --font-family-title: 'Sora';\r\n    --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n    :root{\r\n        /* Font Sizes */\r\n        --font-size-d-2xl: 3.75rem;\r\n        --font-size-d-xl: 3.5rem;\r\n        --font-size-d-lg: 2.75rem;\r\n        --font-size-d-md: 2.25rem;\r\n        --font-size-d-sm: 1.875rem;\r\n        --font-size-d-xs: 1.5rem;\r\n\r\n        /* Line Heights */\r\n        --font-line-height-d-2xl: 4.25rem;\r\n        --font-line-height-d-xl: 3.75rem;\r\n        --font-line-height-d-lg: 2.4375rem;\r\n        --font-line-height-d-md: 2.75rem;\r\n        --font-line-height-d-sm: 2.375rem;\r\n        --font-line-height-d-xs: 2rem;\r\n\r\n        /* Letter Spacings */\r\n        --font-letter-spacing-2xl: -0.075rem;\r\n        --font-letter-spacing-xl: -0.065rem;\r\n        --font-letter-spacing-lg: -0.045rem;\r\n        --font-letter-spacing-md: -0.045rem;\r\n        --font-letter-spacing-sm: 0rem;\r\n        --font-letter-spacing-xs: 0rem;\r\n    }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n    :root{\r\n        /* Font Sizes */\r\n        --font-size-d-2xl: 3rem;\r\n        --font-size-d-xl: 2.5rem;\r\n        --font-size-d-lg: 2rem;\r\n        --font-size-d-md: 1.75rem;\r\n        --font-size-d-sm: 1.5rem;\r\n        --font-size-d-xs: 1.25rem;\r\n\r\n        /* Line Heights */\r\n        --font-line-height-d-2xl: 3.375rem;\r\n        --font-line-height-d-xl: 2.875rem;\r\n        --font-line-height-d-lg: 2.5rem;\r\n        --font-line-height-d-md: 2.1375rem;\r\n        --font-line-height-d-sm: 2rem;\r\n        --font-line-height-d-xs: 1.75rem;\r\n\r\n        /* Letter Spacings */\r\n        --font-letter-spacing-2xl: -0.06rem;\r\n        --font-letter-spacing-xl: -0.05rem;\r\n        --font-letter-spacing-lg: -0.045rem;\r\n        --font-letter-spacing-md: 0rem;\r\n        --font-letter-spacing-sm: 0rem;\r\n        --font-letter-spacing-xs: 0rem;\r\n    }\r\n}\r\n\r\n.display-2xl-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-2xl);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-2xl);\r\n    letter-spacing: var(--font-letter-spacing-d-2xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-2xl-bold::before{\r\n    margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after{\r\n    margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-2xl);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-2xl);\r\n    letter-spacing: var(--font-letter-spacing-d-2xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before{\r\n    margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after{\r\n    margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xl);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-xl);\r\n    letter-spacing: var(--font-letter-spacing-d-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xl-bold::before{\r\n    margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after{\r\n    margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xl);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-xl);\r\n    letter-spacing: var(--font-letter-spacing-d-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before{\r\n    margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after{\r\n    margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-lg);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-lg);\r\n    letter-spacing: var(--font-letter-spacing-d-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-lg-bold::before{\r\n    margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after{\r\n    margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-lg);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-lg);\r\n    letter-spacing: var(--font-letter-spacing-d-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before{\r\n    margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after{\r\n    margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-md);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-md);\r\n    letter-spacing: var(--font-letter-spacing-d-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-md-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-md);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-md);\r\n    letter-spacing: var(--font-letter-spacing-d-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-md-semi-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-sm);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-sm);\r\n    letter-spacing: var(--font-letter-spacing-d-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-sm-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-sm);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-sm);\r\n    letter-spacing: var(--font-letter-spacing-d-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xs);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-xs);\r\n    letter-spacing: var(--font-letter-spacing-d-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xs-bold::before{\r\n    margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after{\r\n    margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-xs);\r\n    letter-spacing: var(--font-letter-spacing-d-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before{\r\n    margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after{\r\n    margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-bold::before{\r\n    margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after{\r\n    margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before{\r\n    margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after{\r\n    margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-medium::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-regular::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-bold::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-medium::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-regular::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-bold::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-semi-bold::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-medium::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-regular::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-bold::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after{\r\n    margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n    margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n    margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n    margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before{\r\n    margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-medium::before{\r\n    margin-bottom: -0.199em;\r\n}\r\n\r\n.text-xs-medium::after{\r\n    margin-top: -0.196em;\r\n}\r\n\r\n.text-xs-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n    margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-medium::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-regular::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n/* .file_upload_item_base_div{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n} */\r\n\r\n.file_upload_item_base_container {\r\n  display: flex;\r\n  width: 32rem;\r\n  border-radius: var(--rounded-sm);\r\n  padding: var(--spacing-6);\r\n  background-color: var(--color-background-card, #ffffff);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n.file_upload_item_base_container.default:hover{\r\n  border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.file_upload_item_base_container.disabled{\r\n  background-color: var(--color-background-disabled, #F6F8FA);\r\n  border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.file_upload_item_base_container.md{\r\n    flex-direction: row;\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n    flex-direction: column;\r\n}\r\n\r\n.close_button {\r\n  position: absolute;\r\n  top: var(--spacing-4);\r\n  right: var(--spacing-4);\r\n}\r\n\r\n.progress_bar{\r\n  margin-top: 0.5rem;\r\n}\r\n\r\n.file_type_text.in_progress,\r\n.file_type_text.complete{\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text.error,\r\n.file_size_text.error{\r\n  color: var(--color-background-danger, #B51726);\r\n}\r\n\r\n.file_size_text.in_progress,\r\n.file_size_text.complete{\r\n  color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n/* Default Styles */\r\n.file_upload_icon{\r\n  background-color: #EEF2F6;\r\n  border-radius: var(--rounded-full);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: var(--spacing-3);\r\n}\r\n\r\n.file_upload_icon svg{\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\n.default.md{\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n  align-items: center;\r\n}\r\n\r\n.default.lg{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.default_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n/* In Progress Styles */\r\n.in_progress_div.md{\r\n  width: 100%;\r\n}\r\n\r\n.in_progress_div.lg{\r\n  text-align: center;\r\n}\r\n\r\n.in_progress_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n  width: 100%;\r\n}\r\n\r\n.upload_btn_md{\r\n  position: absolute;\r\n  top: 45%;\r\n  right: 1.5rem;\r\n}\r\n\r\n.upload_btn_lg{\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n/* Complete Styles */\r\n.complete{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.complete.md{\r\n  flex-direction: row;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n.complete.lg{\r\n  align-items: center;\r\n  text-align: center;\r\n}\r\n\r\n.complete_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.complete_content.md{\r\n  justify-content: center;\r\n}\r\n\r\n.complete_content.lg{\r\n  align-items: center;\r\n}\r\n\r\n.delete_button{\r\n  position: absolute;\r\n  top: 25%;\r\n  right: 1rem;\r\n}\r\n\r\n.delete_btn{\r\n  position: absolute;\r\n  top: 35%;\r\n  right: 1.5rem;\r\n}\r\n\r\n/* Error Styles */\r\n.error{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n  border-color: var(--color-border-danger-subtle, #F9B4BA);\r\n}\r\n\r\n.error.lg{\r\n  text-align: center;\r\n}\r\n\r\n.error_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.btns{\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--spacing-6);\r\n}\r\n\r\n.btn{\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n/* Text Styles*/\r\n.text-sm-semi-bold{\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n    margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-regular{\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n  content: \"\";\r\n  display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n  margin-top: -0.396em;\r\n}\r\n\r\np.lg{\r\n  display: flex;\r\n  gap: var(--spacing-1);\r\n}";
 const GbFileUploadItemBaseStyle0 = gbFileUploadItemBaseCss;
@@ -23,7 +23,7 @@ const GbFileUploadItemBase = class {
         }
     }
     render() {
-        return (h("div", { key: 'ffdba165636ad77c11783a5fb336fdbf80f952d9', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.state === 'in_progress' && (h("div", { key: 'd9a9b97f28f7d02036c1259144f0396406314a1e', class: `in_progress_div ${this.heightSize}` }, h("div", { key: '1b57a639bf48b4d9ef1c1181f1bb166a84cc2d04', class: "file_icon" }), h("div", { key: 'e8626be18b9c636afe878dfcaf313fe703baf2f0', class: "in_progress_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '3e5e9c3814aa0e36f0edeb43713ceb351c8b4d9e', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '6f176296292dd70c8a5140a5e71222863fc9f6f0', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: '95315f7b515248fb77528c54588531539f777e79', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '68d4fc48c0385d2b7224ff0fe12c443ccd1981fb', size: "sm", color: "gray", class: "close_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '6615330ece413255993bb92d3b1df55a2e837b6a', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'f111e8667452526946a6f0e0ea907db2f401a02d', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: '1e0702e8dc11d1103b24f4a4b0cf1c346e34a2cb', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '8774802285ffa45ef99dd649d299c6b41d569a97', size: "sm", color: "gray", class: "close_button" })))))), this.state === 'complete' && (h("div", { key: '1bed6d4540f812abfae4d551907e941253421ff2', class: `complete ${this.heightSize}` }, h("div", { key: '6f45c9358ebff5aa678931ce3109a955816c3c85', class: "file_icon" }), h("div", { key: '97c8827820008e80ee4ffc70603f7585cc7f88b8', class: `complete_content ${this.heightSize}` }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: 'f8ffd00f3a10c66bf94e2c968a0bd765fd025d83', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '2e506b2a90edddf49923b78b21faafc60b7c3a70', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: '95841feac1918e77bf7f1e50004328cf8fa629fd', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '34b128d544a7dcb434caa50270881d330d091047', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '751d428979956245d6604faaf975fa4b1afa3cc4', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: 'e6348799190cbdf44fec411c918803e090177de0', size: "sm", hierarchy: "tertiary_gray", icon: "default", "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: '248d00adb012f00efe3c33d1e3a154ddb16df125' }, "Clear"))))))), this.state === 'error' && (h("div", { key: 'ccfbcb99769fb03d9afd5a4abc7fd846282df2cb', class: `error ${this.heightSize}` }, h("div", { key: 'e1a9a0425f959153f9da0e58dfafd3286eceefde', class: "file_icon" }), h("div", { key: 'db8cccbe07cd66c5fc9879dfd013a4f0da6cdab8', class: "error_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: 'b976e4552ace73bda34230bcbc721c5af4258b0e', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'c032dddd6879cd2052a7bf47d291adf9ee2787ff', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("gb-button", { key: 'da7512391ed93627a1d1177f6cbccccbbe3b4d3c', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true }, h("p", { key: '2ec84ceec2d8761b6a1b008e32150d1a9374cdfb' }, "Try again")), h("gb-button", { key: '99282bff4fd9f80f3e981c8caea98b215772b15e', size: "sm", hierarchy: "tertiary_gray", icon: "only", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: 'c686ab15100871c0053dfd212a8491db34c5d7f0', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '524e04cd3469fff430be22e488913467572bffe4', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("div", { key: '893064bacffb183e324193a9a126f4571a1bda2e', class: "btns" }, h("test-button", { key: '1b6d5aaed6e66ea95bb22f8e0489b4f36d72ab43', size: "sm", hierarchy: "tertiary_gray", icon: "default", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: '42021cacd58e3887fb4999a7d2847f334252690e' }, "Clear")), h("div", { key: '579a35a009a795ece07d6feb5998cf01cd4e07d3', class: "btn" }, h("test-button", { key: '4d90b496a522c3580b261fcd4eec7ab2334d9500', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true, class: "btn" }, h("p", { key: '8cd75920993179725f643b0ad52941722684bda4' }, "Try again")))))))))));
+        return (h("div", { key: '6c17ec315ba40a5d1c2b9bc32270a5eb059baeec', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.state === 'in_progress' && (h("div", { key: '2be3587c1d68c780ce8a956cba3fae32d77a82ab', class: `in_progress_div ${this.heightSize}` }, h("div", { key: 'a79dbde022bd4dd7c4cf80e77b3960744fb3952b', class: "file_icon" }), h("div", { key: 'a76a051e2d088700bd0208b6a4e07afea265e313', class: "in_progress_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '88e9e4df79a97192d99aefb9156f08d8709594c3', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'c4cd9f89f8325b644416d0ebba34c06e716e44dc', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: 'abfaf2ad25b31afddf19d02862f6942ea8232022', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: 'fb5f23f7fd6ce2784b20c6df13ae3b95aa01c197', size: "sm", color: "gray", class: "close_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '8f8be56ddeff8442e246127e470269c6810123de', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'f33c87abed015990f97366baa9c3dc91324b852c', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: '682719fc45d8c0538ad70b318bb1899525fd0743', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '67fb66e61b77ad0bbf1dc5193df5e3745d1297b6', size: "sm", color: "gray", class: "close_button" })))))), this.state === 'complete' && (h("div", { key: '85cd942ac5e9a982f90f27abd27f568356cd8365', class: `complete ${this.heightSize}` }, h("div", { key: '7da9327dca061590e1b08d6ce1e1082353ef9a92', class: "file_icon" }), h("div", { key: '5193f044c72774d93d8278797e08cc3dc2b43edb', class: `complete_content ${this.heightSize}` }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: 'da02eb38cbc4a0b4690e925e6aacbedd9766f6d8', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '54e3011ee232867a7154d3a74e82a1389c4e203f', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: '34218cfc92d158bab7199accb797497215b849e9', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '939b2b1d538ed4aeca99dae54268602b78bc797a', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '4af18bd888a8c61ee6602f69103dc986b57bf1ce', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: '6cb8d5119cf0a8a11d182677207d3983eace66dd', size: "sm", hierarchy: "tertiary_gray", icon: "default", "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: 'ca0a93c22e961da8f2bcc1d94c898afe120f4135' }, "Clear"))))))), this.state === 'error' && (h("div", { key: 'd6063d00342aa37c688fd570eadec0cf435d0834', class: `error ${this.heightSize}` }, h("div", { key: 'fbe9e20bcc13ebf685fcad2fc1de5e5e7279cac5', class: "file_icon" }), h("div", { key: '8bedf127c6a9e454b790c13e73d654b9c806c25c', class: "error_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '415eab3e41e968917aa499294716f2e3a3437142', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '86ca84b73e54d56460d47c2c7e67436532221061', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("gb-button", { key: '6627bdcde76dbe438dbd63d73bdd465b7bb0da6b', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true }, h("p", { key: '7d7c80befc4b075ed558927f90226bbe2785bfcf' }, "Try again")), h("gb-button", { key: '5429dff4c21cb3af5ee2baace64d89d9a4815652', size: "sm", hierarchy: "tertiary_gray", icon: "only", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '8e9c5d0c6c078ab7a0eb4d723fe18ba41e598230', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'd9b82a75b9c13879bb492b500da511376b7f8f62', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("div", { key: '8324652108af88777bd9e57fd2289695efaa9788', class: "btns" }, h("test-button", { key: '83f45ed620159c3d4334018767700fbd8c497e40', size: "sm", hierarchy: "tertiary_gray", icon: "default", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: 'f2b471e5b586a1da42fdf9cabbe2004d388e7be1' }, "Clear")), h("div", { key: '52cc781798b1440fbe00a938edd5218be1731bda', class: "btn" }, h("test-button", { key: 'bfe89df00604286faa8ffdbbed587993fffb113f', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true, class: "btn" }, h("p", { key: '1e3dc1012b4957b21a02b29185ecabded2aa7cd2' }, "Try again")))))))))));
     }
 };
 GbFileUploadItemBase.style = GbFileUploadItemBaseStyle0;