globuswebcomponents 1.1.1 → 1.1.2

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 (142) hide show
  1. package/dist/cjs/{gb-avatar_20.cjs.entry.js → gb-avatar_21.cjs.entry.js} +303 -58
  2. package/dist/cjs/gb-avatar_21.cjs.entry.js.map +1 -0
  3. package/dist/cjs/{gb-textarea-input-field.cjs.entry.js → gb-mega-input-field-base.cjs.entry.js} +20 -196
  4. package/dist/cjs/gb-mega-input-field-base.cjs.entry.js.map +1 -0
  5. package/dist/cjs/gb-slider.cjs.entry.js +2 -1
  6. package/dist/cjs/gb-slider.cjs.entry.js.map +1 -1
  7. package/dist/cjs/gb-token-field-compact.cjs.entry.js +28 -0
  8. package/dist/cjs/gb-token-field-compact.cjs.entry.js.map +1 -0
  9. package/dist/cjs/{gb-pagination-button-group-base_2.cjs.entry.js → gb-token-field-compressed.cjs.entry.js} +17 -57
  10. package/dist/cjs/gb-token-field-compressed.cjs.entry.js.map +1 -0
  11. package/dist/cjs/globuscomponents.cjs.js +1 -1
  12. package/dist/cjs/loader.cjs.js +1 -1
  13. package/dist/collection/collection-manifest.json +3 -3
  14. package/dist/collection/components/{gb-megainput-field-base/gb-megainput-field.js → gb-mega-input-field-base/gb-mega-input-field-base.js} +8 -8
  15. package/dist/collection/components/gb-mega-input-field-base/gb-mega-input-field-base.js.map +1 -0
  16. package/dist/collection/components/gb-pagination/gb-pagination.js +17 -12
  17. package/dist/collection/components/gb-pagination/gb-pagination.js.map +1 -1
  18. package/dist/collection/components/gb-slider/gb-slider.js +2 -1
  19. package/dist/collection/components/gb-slider/gb-slider.js.map +1 -1
  20. package/dist/collection/components/{gb-token-field/gb-token-field.js → gb-token-field-compact/gb-token-field-compact.js} +6 -6
  21. package/dist/collection/components/gb-token-field-compact/gb-token-field-compact.js.map +1 -0
  22. package/dist/collection/components/{gb-verification-code-field/gb-verification-code-field.js → gb-token-field-compressed/gb-token-field-compressed.js} +7 -7
  23. package/dist/collection/components/gb-token-field-compressed/gb-token-field-compressed.js.map +1 -0
  24. package/dist/collection/components/gb-tooltip/gb-tooltip.js +1 -1
  25. package/dist/components/gb-avatar-add-button.js +1 -1
  26. package/dist/components/gb-avatar-group.js +2 -2
  27. package/dist/components/gb-collapse-button.js +1 -1
  28. package/dist/components/gb-complex-primary-side-bar-item.js +1 -1
  29. package/dist/components/gb-complex-secondary-side-bar-item.js +1 -1
  30. package/dist/components/gb-file-upload-item-base.js +1 -1
  31. package/dist/components/gb-file-upload.js +3 -3
  32. package/dist/components/gb-help-tooltip.js +1 -1
  33. package/dist/components/gb-input-dropdown.js +1 -1
  34. package/dist/components/gb-input-field.js +1 -1
  35. package/dist/components/gb-mega-input-field-base.d.ts +11 -0
  36. package/dist/components/gb-mega-input-field-base.js +8 -0
  37. package/dist/components/gb-mega-input-field-base.js.map +1 -0
  38. package/dist/components/gb-pagination.js +18 -13
  39. package/dist/components/gb-pagination.js.map +1 -1
  40. package/dist/components/gb-progress-bar.js +1 -1
  41. package/dist/components/gb-sidebar.js +5 -5
  42. package/dist/components/gb-simple-side-bar-item.js +1 -1
  43. package/dist/components/gb-slider-control-handle.js +1 -1
  44. package/dist/components/gb-slider.js +4 -3
  45. package/dist/components/gb-slider.js.map +1 -1
  46. package/dist/components/{gb-megainput-field.d.ts → gb-token-field-compact.d.ts} +4 -4
  47. package/dist/components/gb-token-field-compact.js +56 -0
  48. package/dist/components/gb-token-field-compact.js.map +1 -0
  49. package/dist/components/gb-token-field-compressed.d.ts +11 -0
  50. package/dist/components/gb-token-field-compressed.js +60 -0
  51. package/dist/components/gb-token-field-compressed.js.map +1 -0
  52. package/dist/components/gb-tooltip.js +1 -1
  53. package/dist/components/p-042bf4b6.js +58 -0
  54. package/dist/components/{p-e5dd6c7d.js.map → p-042bf4b6.js.map} +1 -1
  55. package/dist/components/{p-279889b1.js → p-0e0aeeea.js} +4 -4
  56. package/dist/components/{p-279889b1.js.map → p-0e0aeeea.js.map} +1 -1
  57. package/dist/components/{p-5af36f2c.js → p-1601548c.js} +2 -2
  58. package/dist/components/{p-5af36f2c.js.map → p-1601548c.js.map} +1 -1
  59. package/dist/components/{p-637ca96f.js → p-48308048.js} +2 -2
  60. package/dist/components/{p-637ca96f.js.map → p-48308048.js.map} +1 -1
  61. package/dist/components/{p-b3bb7571.js → p-5075b910.js} +2 -2
  62. package/dist/components/{p-b3bb7571.js.map → p-5075b910.js.map} +1 -1
  63. package/dist/components/{p-026144e6.js → p-52ec14c7.js} +3 -3
  64. package/dist/components/{p-026144e6.js.map → p-52ec14c7.js.map} +1 -1
  65. package/dist/components/{p-70bbf877.js → p-690bdd0a.js} +2 -2
  66. package/dist/components/{p-70bbf877.js.map → p-690bdd0a.js.map} +1 -1
  67. package/dist/components/{p-8f876fd9.js → p-6bb11c3f.js} +2 -2
  68. package/dist/components/{p-8f876fd9.js.map → p-6bb11c3f.js.map} +1 -1
  69. package/dist/components/{p-46f8e60a.js → p-6d8df327.js} +2 -2
  70. package/dist/components/{p-46f8e60a.js.map → p-6d8df327.js.map} +1 -1
  71. package/dist/components/{p-52cc93fe.js → p-7ad758be.js} +3 -3
  72. package/dist/components/{p-52cc93fe.js.map → p-7ad758be.js.map} +1 -1
  73. package/dist/components/{p-f99a8c69.js → p-7f8b6821.js} +2 -2
  74. package/dist/components/{p-f99a8c69.js.map → p-7f8b6821.js.map} +1 -1
  75. package/dist/components/{p-26d4c568.js → p-b5e0cfc2.js} +2 -2
  76. package/dist/components/{p-26d4c568.js.map → p-b5e0cfc2.js.map} +1 -1
  77. package/dist/components/{p-1d2d60ae.js → p-d82dee00.js} +2 -2
  78. package/dist/components/{p-1d2d60ae.js.map → p-d82dee00.js.map} +1 -1
  79. package/dist/docs.json +174 -174
  80. package/dist/esm/{gb-avatar_20.entry.js → gb-avatar_21.entry.js} +300 -56
  81. package/dist/esm/gb-avatar_21.entry.js.map +1 -0
  82. package/dist/esm/{gb-textarea-input-field.entry.js → gb-mega-input-field-base.entry.js} +21 -197
  83. package/dist/esm/gb-mega-input-field-base.entry.js.map +1 -0
  84. package/dist/esm/gb-slider.entry.js +2 -1
  85. package/dist/esm/gb-slider.entry.js.map +1 -1
  86. package/dist/esm/gb-token-field-compact.entry.js +24 -0
  87. package/dist/esm/gb-token-field-compact.entry.js.map +1 -0
  88. package/dist/esm/{gb-pagination-button-group-base_2.entry.js → gb-token-field-compressed.entry.js} +18 -57
  89. package/dist/esm/gb-token-field-compressed.entry.js.map +1 -0
  90. package/dist/esm/globuscomponents.js +1 -1
  91. package/dist/esm/loader.js +1 -1
  92. package/dist/globuscomponents/globuscomponents.esm.js +1 -1
  93. package/dist/globuscomponents/globuscomponents.esm.js.map +1 -1
  94. package/dist/globuscomponents/{p-dbb2cc9c.entry.js → p-651e8370.entry.js} +2 -2
  95. package/dist/globuscomponents/p-651e8370.entry.js.map +1 -0
  96. package/dist/globuscomponents/{p-fa7e8127.entry.js → p-702db42d.entry.js} +2 -2
  97. package/dist/globuscomponents/p-702db42d.entry.js.map +1 -0
  98. package/dist/globuscomponents/p-ad0ab2b2.entry.js +2 -0
  99. package/dist/globuscomponents/p-ad0ab2b2.entry.js.map +1 -0
  100. package/dist/globuscomponents/p-d170d1ae.entry.js +2 -0
  101. package/dist/globuscomponents/p-d170d1ae.entry.js.map +1 -0
  102. package/dist/globuscomponents/p-f7770f70.entry.js +2 -0
  103. package/dist/globuscomponents/p-f7770f70.entry.js.map +1 -0
  104. package/dist/types/components/{gb-megainput-field-base/gb-megainput-field.d.ts → gb-mega-input-field-base/gb-mega-input-field-base.d.ts} +1 -1
  105. package/dist/types/components/gb-pagination/gb-pagination.d.ts +5 -1
  106. package/dist/types/components/{gb-token-field/gb-token-field.d.ts → gb-token-field-compact/gb-token-field-compact.d.ts} +1 -1
  107. package/dist/types/components/{gb-verification-code-field/gb-verification-code-field.d.ts → gb-token-field-compressed/gb-token-field-compressed.d.ts} +1 -1
  108. package/dist/types/components.d.ts +41 -41
  109. package/package.json +4 -4
  110. package/dist/cjs/gb-avatar_20.cjs.entry.js.map +0 -1
  111. package/dist/cjs/gb-pagination-button-group-base_2.cjs.entry.js.map +0 -1
  112. package/dist/cjs/gb-pagination.cjs.entry.js +0 -53
  113. package/dist/cjs/gb-pagination.cjs.entry.js.map +0 -1
  114. package/dist/cjs/gb-textarea-input-field.cjs.entry.js.map +0 -1
  115. package/dist/collection/components/gb-megainput-field-base/gb-megainput-field.js.map +0 -1
  116. package/dist/collection/components/gb-token-field/gb-token-field.js.map +0 -1
  117. package/dist/collection/components/gb-verification-code-field/gb-verification-code-field.js.map +0 -1
  118. package/dist/components/gb-megainput-field.js +0 -8
  119. package/dist/components/gb-megainput-field.js.map +0 -1
  120. package/dist/components/gb-token-field.d.ts +0 -11
  121. package/dist/components/gb-token-field.js +0 -56
  122. package/dist/components/gb-token-field.js.map +0 -1
  123. package/dist/components/gb-verification-code-field.d.ts +0 -11
  124. package/dist/components/gb-verification-code-field.js +0 -60
  125. package/dist/components/gb-verification-code-field.js.map +0 -1
  126. package/dist/components/p-e5dd6c7d.js +0 -58
  127. package/dist/esm/gb-avatar_20.entry.js.map +0 -1
  128. package/dist/esm/gb-pagination-button-group-base_2.entry.js.map +0 -1
  129. package/dist/esm/gb-pagination.entry.js +0 -49
  130. package/dist/esm/gb-pagination.entry.js.map +0 -1
  131. package/dist/esm/gb-textarea-input-field.entry.js.map +0 -1
  132. package/dist/globuscomponents/p-37fcb2a9.entry.js +0 -2
  133. package/dist/globuscomponents/p-37fcb2a9.entry.js.map +0 -1
  134. package/dist/globuscomponents/p-3a3ddb02.entry.js +0 -2
  135. package/dist/globuscomponents/p-3a3ddb02.entry.js.map +0 -1
  136. package/dist/globuscomponents/p-6ea11621.entry.js +0 -2
  137. package/dist/globuscomponents/p-6ea11621.entry.js.map +0 -1
  138. package/dist/globuscomponents/p-dbb2cc9c.entry.js.map +0 -1
  139. package/dist/globuscomponents/p-fa7e8127.entry.js.map +0 -1
  140. /package/dist/collection/components/{gb-megainput-field-base/gb-megainput-field.css → gb-mega-input-field-base/gb-mega-input-field-base.css} +0 -0
  141. /package/dist/collection/components/{gb-token-field/gb-token-field.css → gb-token-field-compact/gb-token-field-compact.css} +0 -0
  142. /package/dist/collection/components/{gb-verification-code-field/gb-verification-code-field.css → gb-token-field-compressed/gb-token-field-compressed.css} +0 -0
package/dist/globuscomponents/{p-fa7e8127.entry.js → p-702db42d.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r,c as n,h as e,g as a}from"./p-bf92be61.js";const t='/* @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.285em;\r\n}\r\n\r\n.text-xs-medium::after{\r\n margin-top: -0.396em;\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:host {\r\n display: block;\r\n height: 4px;\r\n padding: 20px;\r\n cursor: pointer;\r\n}\r\n \r\n.slider-container {\r\n position: relative;\r\n width: 100%;\r\n height: 8px;\r\n background-color: var(--color-border-subtler, #E3E8EF);\r\n border-radius: var(--rounded-xs);\r\n}\r\n \r\n.track {\r\n position: absolute;\r\n height: 100%;\r\n background-color: var(--color-border-selected, #075DB2);\r\n}\r\n \r\ngb-slider-control-handle {\r\n position: absolute;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n cursor: pointer;\r\n}';const o=t;const i=class{constructor(e){r(this,e);this.thumbValueChanged=n(this,"thumbValueChanged",7);this.isDragging=false;this.activeThumb=null;this.handleMouseDown=(r,n)=>{this.isDragging=true;this.activeThumb=n;if(n==="left"){this.leftValue=Math.min(this.leftValue,this.rightValue-1)}else{this.rightValue=Math.max(this.rightValue,this.leftValue+1)}document.addEventListener("mousemove",this.handleMouseMove);document.addEventListener("mouseup",this.handleMouseUp)};this.handleMouseMove=r=>{if(!this.isDragging)return;const n=this.containerEl.getBoundingClientRect();const e=(r.clientX-n.left)/n.width*(this.max-this.min)+this.min;const a=Math.round(e);if(this.activeThumb==="left"){this.leftValue=Math.max(this.min,Math.min(a,this.rightValue-1))}else{this.rightValue=Math.min(this.max,Math.max(a,this.leftValue+1))}this.updateTrack();this.thumbValueChanged.emit({left:this.leftValue,right:this.rightValue})};this.handleMouseUp=()=>{this.isDragging=false;this.activeThumb=null;document.removeEventListener("mousemove",this.handleMouseMove);document.removeEventListener("mouseup",this.handleMouseUp)};this.min=0;this.max=100;this.thumbType=undefined;this.leftControl=0;this.rightControl=100;this.label=undefined;this.unit="";this.unitPosition="left";this.leftValue=undefined;this.rightValue=undefined}componentWillLoad(){this.leftValue=Math.max(this.min,Math.min(this.leftControl,this.max));this.rightValue=Math.max(this.min,Math.min(this.rightControl,this.max))}componentDidLoad(){this.trackEl=this.el.shadowRoot.querySelector(".track");this.containerEl=this.el.shadowRoot.querySelector(".slider-container");this.updateTrack()}updateTrack(){const r=(this.leftValue-this.min)/(this.max-this.min)*100;const n=(this.rightValue-this.min)/(this.max-this.min)*100;this.trackEl.style.left=`${r}%`;this.trackEl.style.width=`${n-r}%`}formatValue(r){return this.unitPosition==="left"?`${this.unit}${r}`:`${r}${this.unit}`}render(){return e("div",{key:"d8010ec2090be4e24b73972f0b4de7bf39636960",class:"slider-container",ref:r=>this.containerEl=r},e("div",{key:"e8f16f03ee2e7bc1df17cdd6c90cbc9982985f4f",class:"track",ref:r=>this.trackEl=r}),e("gb-slider-control-handle",{key:"df0189a47446e1eb42b7fe081618cec4578e3de1",class:"left",value:this.formatValue(this.leftValue),type:this.label==="false"?"":this.label==="bottom"?"text":this.label==="top_floating"?"tooltip":null,style:{left:`${(this.leftValue-this.min)/(this.max-this.min)*100}%`},onMouseDown:r=>this.handleMouseDown(r,"left")}),e("gb-slider-control-handle",{key:"226933471e683070db91e9d5889e089b010c8d76",class:"right",value:this.formatValue(this.rightValue),type:this.label==="false"?"":this.label==="bottom"?"text":this.label==="top_floating"?"tooltip":null,style:{left:`${(this.rightValue-this.min)/(this.max-this.min)*100}%`},onMouseDown:r=>this.handleMouseDown(r,"right")}))}get el(){return a(this)}};i.style=o;export{i as gb_slider};
2
- //# sourceMappingURL=p-fa7e8127.entry.js.map
1
+ import{r,c as n,h as e,g as a}from"./p-bf92be61.js";const t='/* @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.285em;\r\n}\r\n\r\n.text-xs-medium::after{\r\n margin-top: -0.396em;\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:host {\r\n display: block;\r\n height: 4px;\r\n padding: 20px;\r\n cursor: pointer;\r\n}\r\n \r\n.slider-container {\r\n position: relative;\r\n width: 100%;\r\n height: 8px;\r\n background-color: var(--color-border-subtler, #E3E8EF);\r\n border-radius: var(--rounded-xs);\r\n}\r\n \r\n.track {\r\n position: absolute;\r\n height: 100%;\r\n background-color: var(--color-border-selected, #075DB2);\r\n}\r\n \r\ngb-slider-control-handle {\r\n position: absolute;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n cursor: pointer;\r\n}';const o=t;const i=class{constructor(e){r(this,e);this.thumbValueChanged=n(this,"thumbValueChanged",7);this.isDragging=false;this.activeThumb=null;this.handleMouseDown=(r,n)=>{this.isDragging=true;this.activeThumb=n;if(n==="left"){this.leftValue=Math.min(this.leftValue,this.rightValue-1)}else{this.rightValue=Math.max(this.rightValue,this.leftValue+1)}document.addEventListener("mousemove",this.handleMouseMove);document.addEventListener("mouseup",this.handleMouseUp)};this.handleMouseMove=r=>{if(!this.isDragging)return;const n=this.containerEl.getBoundingClientRect();const e=(r.clientX-n.left)/n.width*(this.max-this.min)+this.min;const a=Math.round(e);if(this.activeThumb==="left"){this.leftValue=Math.max(this.min,Math.min(a,this.rightValue-1))}else{this.rightValue=Math.min(this.max,Math.max(a,this.leftValue+1))}this.updateTrack();console.log({left:this.leftValue,right:this.rightValue});this.thumbValueChanged.emit({left:this.leftValue,right:this.rightValue})};this.handleMouseUp=()=>{this.isDragging=false;this.activeThumb=null;document.removeEventListener("mousemove",this.handleMouseMove);document.removeEventListener("mouseup",this.handleMouseUp)};this.min=0;this.max=100;this.thumbType=undefined;this.leftControl=0;this.rightControl=100;this.label=undefined;this.unit="";this.unitPosition="left";this.leftValue=undefined;this.rightValue=undefined}componentWillLoad(){this.leftValue=Math.max(this.min,Math.min(this.leftControl,this.max));this.rightValue=Math.max(this.min,Math.min(this.rightControl,this.max))}componentDidLoad(){this.trackEl=this.el.shadowRoot.querySelector(".track");this.containerEl=this.el.shadowRoot.querySelector(".slider-container");this.updateTrack()}updateTrack(){const r=(this.leftValue-this.min)/(this.max-this.min)*100;const n=(this.rightValue-this.min)/(this.max-this.min)*100;this.trackEl.style.left=`${r}%`;this.trackEl.style.width=`${n-r}%`}formatValue(r){return this.unitPosition==="left"?`${this.unit}${r}`:`${r}${this.unit}`}render(){return e("div",{key:"5e06932776e12a133592f638b8f4d4e85c31173d",class:"slider-container",ref:r=>this.containerEl=r},e("div",{key:"caeed9242e968b34199f8e66d1e7288a8565d49b",class:"track",ref:r=>this.trackEl=r}),e("gb-slider-control-handle",{key:"9e69ada4c3dd1cea5f5e9e9f97162a874d1bf6c9",class:"left",value:this.formatValue(this.leftValue),type:this.label==="false"?"":this.label==="bottom"?"text":this.label==="top_floating"?"tooltip":null,style:{left:`${(this.leftValue-this.min)/(this.max-this.min)*100}%`},onMouseDown:r=>this.handleMouseDown(r,"left")}),e("gb-slider-control-handle",{key:"98536b676d355af3f8f48255719cf799f48e2dab",class:"right",value:this.formatValue(this.rightValue),type:this.label==="false"?"":this.label==="bottom"?"text":this.label==="top_floating"?"tooltip":null,style:{left:`${(this.rightValue-this.min)/(this.max-this.min)*100}%`},onMouseDown:r=>this.handleMouseDown(r,"right")}))}get el(){return a(this)}};i.style=o;export{i as gb_slider};
2
+ //# sourceMappingURL=p-702db42d.entry.js.map
package/dist/globuscomponents/p-702db42d.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["gbSliderCss","GbSliderStyle0","GbSlider","this","isDragging","activeThumb","handleMouseDown","_e","thumb","leftValue","Math","min","rightValue","max","document","addEventListener","handleMouseMove","handleMouseUp","e","boundingBox","containerEl","getBoundingClientRect","position","clientX","left","width","value","round","updateTrack","console","log","right","thumbValueChanged","emit","removeEventListener","componentWillLoad","leftControl","rightControl","componentDidLoad","trackEl","el","shadowRoot","querySelector","leftPos","rightPos","style","formatValue","unitPosition","unit","render","h","key","class","ref","type","label","onMouseDown"],"sources":["src/components/gb-slider/gb-slider.css?tag=gb-slider&encapsulation=shadow","src/components/gb-slider/gb-slider.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n display: block;\r\n height: 4px;\r\n padding: 20px;\r\n cursor: pointer;\r\n}\r\n \r\n.slider-container {\r\n position: relative;\r\n width: 100%;\r\n height: 8px;\r\n background-color: var(--color-border-subtler, #E3E8EF);\r\n border-radius: var(--rounded-xs);\r\n}\r\n \r\n.track {\r\n position: absolute;\r\n height: 100%;\r\n background-color: var(--color-border-selected, #075DB2);\r\n}\r\n \r\ngb-slider-control-handle {\r\n position: absolute;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n cursor: pointer;\r\n}","import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-slider',\r\n styleUrl: 'gb-slider.css',\r\n shadow: true,\r\n})\r\nexport class GbSlider {\r\n @Element() el: HTMLElement;\r\n @Prop() min: number = 0;\r\n @Prop() max: number = 100;\r\n @Prop() thumbType: 'text' | 'tooltip';\r\n @Prop() leftControl: number = 0; // Developer can set this\r\n @Prop() rightControl: number = 100; // Developer can set this\r\n @Prop() label: 'false' | 'bottom' | 'top_floating';\r\n @Prop() unit: string = '';\r\n @Prop() unitPosition: 'left' | 'right' = 'left';\r\n @State() leftValue: number;\r\n @State() rightValue: number; \r\n @Event() thumbValueChanged: EventEmitter<{ left: number; right: number }>;\r\n\r\n private trackEl: HTMLDivElement;\r\n private containerEl: HTMLDivElement;\r\n private isDragging: boolean = false;\r\n private activeThumb: 'left' | 'right' | null = null;\r\n\r\n componentWillLoad() {\r\n // Set the initial values for the slider\r\n this.leftValue = Math.max(this.min, Math.min(this.leftControl, this.max));\r\n this.rightValue = Math.max(this.min, Math.min(this.rightControl, this.max));\r\n }\r\n\r\n componentDidLoad() {\r\n this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n this.updateTrack();\r\n }\r\n\r\n handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n this.isDragging = true;\r\n this.activeThumb = thumb;\r\n\r\n // Clamp the initial value of the thumb within bounds\r\n if (thumb === 'left') {\r\n this.leftValue = Math.min(this.leftValue, this.rightValue - 1);\r\n } else {\r\n this.rightValue = Math.max(this.rightValue, this.leftValue + 1);\r\n }\r\n\r\n document.addEventListener('mousemove', this.handleMouseMove);\r\n document.addEventListener('mouseup', this.handleMouseUp);\r\n };\r\n\r\n handleMouseMove = (e: MouseEvent) => {\r\n if (!this.isDragging) return;\r\n\r\n // Get the bounding box of the slider container\r\n const boundingBox = this.containerEl.getBoundingClientRect();\r\n\r\n // Calculate the mouse position relative to the slider container\r\n const position = ((e.clientX - boundingBox.left) / boundingBox.width) * (this.max - this.min) + this.min;\r\n\r\n // Snap the position to the nearest integer increment of 1\r\n const value = Math.round(position);\r\n\r\n // Update the appropriate thumb's value, clamping it within bounds\r\n if (this.activeThumb === 'left') {\r\n this.leftValue = Math.max(this.min, Math.min(value, this.rightValue - 1)); // Ensure it doesn't exceed right thumb\r\n } else {\r\n this.rightValue = Math.min(this.max, Math.max(value, this.leftValue + 1)); // Ensure it doesn't go below left thumb\r\n }\r\n\r\n // Update the track's appearance and emit the new values\r\n this.updateTrack();\r\n console.log({ left: this.leftValue, right: this.rightValue });\r\n this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });\r\n };\r\n\r\n handleMouseUp = () => {\r\n this.isDragging = false;\r\n this.activeThumb = null;\r\n document.removeEventListener('mousemove', this.handleMouseMove);\r\n document.removeEventListener('mouseup', this.handleMouseUp);\r\n };\r\n\r\n updateTrack() {\r\n const leftPos = ((this.leftValue - this.min) / (this.max - this.min)) * 100;\r\n const rightPos = ((this.rightValue - this.min) / (this.max - this.min)) * 100;\r\n\r\n // Update the track's left position and width to match the thumb positions.\r\n this.trackEl.style.left = `${leftPos}%`;\r\n this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n }\r\n\r\n formatValue(value: number): string {\r\n return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;\r\n }\r\n\r\n render() {\r\n return (\r\n <div class=\"slider-container\" ref={el => (this.containerEl = el as HTMLDivElement)}>\r\n <div class=\"track\" ref={el => (this.trackEl = el as HTMLDivElement)}></div>\r\n\r\n <gb-slider-control-handle\r\n class=\"left\"\r\n value={this.formatValue(this.leftValue)}\r\n type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n style={{ left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n onMouseDown={e => this.handleMouseDown(e, 'left')}\r\n ></gb-slider-control-handle>\r\n <gb-slider-control-handle\r\n class=\"right\"\r\n value={this.formatValue(this.rightValue)}\r\n type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n style={{ left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n onMouseDown={e => this.handleMouseDown(e, 'right')}\r\n ></gb-slider-control-handle>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"mappings":"oDAAA,MAAMA,EAAc,05oEACpB,MAAAC,EAAeD,E,MCMFE,EAAQ,M,8EAgBXC,KAAAC,WAAsB,MACtBD,KAAAE,YAAuC,KAc/CF,KAAAG,gBAAkB,CAACC,EAAgBC,KACjCL,KAAKC,WAAa,KAClBD,KAAKE,YAAcG,EAGnB,GAAIA,IAAU,OAAQ,CACpBL,KAAKM,UAAYC,KAAKC,IAAIR,KAAKM,UAAWN,KAAKS,WAAa,E,KACvD,CACLT,KAAKS,WAAaF,KAAKG,IAAIV,KAAKS,WAAYT,KAAKM,UAAY,E,CAG/DK,SAASC,iBAAiB,YAAaZ,KAAKa,iBAC5CF,SAASC,iBAAiB,UAAWZ,KAAKc,cAAc,EAG1Dd,KAAAa,gBAAmBE,IACjB,IAAKf,KAAKC,WAAY,OAGtB,MAAMe,EAAchB,KAAKiB,YAAYC,wBAGrC,MAAMC,GAAaJ,EAAEK,QAAUJ,EAAYK,MAAQL,EAAYM,OAAUtB,KAAKU,IAAMV,KAAKQ,KAAOR,KAAKQ,IAGrG,MAAMe,EAAQhB,KAAKiB,MAAML,GAGzB,GAAInB,KAAKE,cAAgB,OAAQ,CAC/BF,KAAKM,UAAYC,KAAKG,IAAIV,KAAKQ,IAAKD,KAAKC,IAAIe,EAAOvB,KAAKS,WAAa,G,KACjE,CACLT,KAAKS,WAAaF,KAAKC,IAAIR,KAAKU,IAAKH,KAAKG,IAAIa,EAAOvB,KAAKM,UAAY,G,CAIxEN,KAAKyB,cACLC,QAAQC,IAAI,CAAEN,KAAMrB,KAAKM,UAAWsB,MAAO5B,KAAKS,aAChDT,KAAK6B,kBAAkBC,KAAK,CAAET,KAAMrB,KAAKM,UAAWsB,MAAO5B,KAAKS,YAAa,EAG/ET,KAAAc,cAAgB,KACdd,KAAKC,WAAa,MAClBD,KAAKE,YAAc,KACnBS,SAASoB,oBAAoB,YAAa/B,KAAKa,iBAC/CF,SAASoB,oBAAoB,UAAW/B,KAAKc,cAAc,E,SAzEvC,E,SACA,I,0CAEQ,E,kBACC,I,+BAER,G,kBACkB,O,mDAUzC,iBAAAkB,GAEEhC,KAAKM,UAAYC,KAAKG,IAAIV,KAAKQ,IAAKD,KAAKC,IAAIR,KAAKiC,YAAajC,KAAKU,MACpEV,KAAKS,WAAaF,KAAKG,IAAIV,KAAKQ,IAAKD,KAAKC,IAAIR,KAAKkC,aAAclC,KAAKU,K,CAGxE,gBAAAyB,GACEnC,KAAKoC,QAAUpC,KAAKqC,GAAGC,WAAWC,cAAc,UAChDvC,KAAKiB,YAAcjB,KAAKqC,GAAGC,WAAWC,cAAc,qBACpDvC,KAAKyB,a,CAkDP,WAAAA,GACE,MAAMe,GAAYxC,KAAKM,UAAYN,KAAKQ,MAAQR,KAAKU,IAAMV,KAAKQ,KAAQ,IACxE,MAAMiC,GAAazC,KAAKS,WAAaT,KAAKQ,MAAQR,KAAKU,IAAMV,KAAKQ,KAAQ,IAG1ER,KAAKoC,QAAQM,MAAMrB,KAAO,GAAGmB,KAC7BxC,KAAKoC,QAAQM,MAAMpB,MAAQ,GAAGmB,EAAWD,I,CAG3C,WAAAG,CAAYpB,GACV,OAAOvB,KAAK4C,eAAiB,OAAS,GAAG5C,KAAK6C,OAAOtB,IAAU,GAAGA,IAAQvB,KAAK6C,M,CAGjF,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBAAmBC,IAAKb,GAAOrC,KAAKiB,YAAcoB,GAC3DU,EAAA,OAAAC,IAAA,2CAAKC,MAAM,QAAQC,IAAKb,GAAOrC,KAAKoC,QAAUC,IAE9CU,EAAA,4BAAAC,IAAA,2CACEC,MAAM,OACN1B,MAAOvB,KAAK2C,YAAY3C,KAAKM,WAC7B6C,KAAMnD,KAAKoD,QAAU,QAAU,GAAKpD,KAAKoD,QAAU,SAAW,OAASpD,KAAKoD,QAAU,eAAiB,UAAY,KACnHV,MAAO,CAAErB,KAAM,IAAKrB,KAAKM,UAAYN,KAAKQ,MAAQR,KAAKU,IAAMV,KAAKQ,KAAQ,QAC1E6C,YAAatC,GAAKf,KAAKG,gBAAgBY,EAAG,UAE5CgC,EAAA,4BAAAC,IAAA,2CACEC,MAAM,QACN1B,MAAOvB,KAAK2C,YAAY3C,KAAKS,YAC7B0C,KAAMnD,KAAKoD,QAAU,QAAU,GAAKpD,KAAKoD,QAAU,SAAW,OAASpD,KAAKoD,QAAU,eAAiB,UAAY,KACnHV,MAAO,CAAErB,KAAM,IAAKrB,KAAKS,WAAaT,KAAKQ,MAAQR,KAAKU,IAAMV,KAAKQ,KAAQ,QAC3E6C,YAAatC,GAAKf,KAAKG,gBAAgBY,EAAG,W","ignoreList":[]}
package/dist/globuscomponents/p-ad0ab2b2.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r,h as n}from"./p-bf92be61.js";const e='/* @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.285em;\r\n}\r\n\r\n.text-xs-medium::after{\r\n margin-top: -0.396em;\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}';const a=e;const t=class{constructor(n){r(this,n);this.size=undefined;this.digits=undefined;this.showLabel=undefined;this.label="";this.showSupportingText=undefined;this.supportingText=""}render(){return n("div",{key:"aa7ef7d0d489bc8638e7b6a8ce0ce9e748af7645",class:this.size},n("div",{key:"c1447926334c0fbd54ef96e51599391242d406d7",class:"input-with-label"},this.showLabel&&n("label",{key:"18acbd11c18464a676e97eebbb23b92c55e802ba"},this.label),this.digits===4&&n("div",{key:"c63d49f1791405afeb0bf67e2d5d8afa3f51312f",class:"input-wrapper"},n("gb-mega-input-field-base",{key:"52231cb7be130c9f65fc23210ebf5bd0c839416e",size:this.size}),n("gb-mega-input-field-base",{key:"aa5c10e67280a14b942b6780d6d026f6081d5312",size:this.size}),n("gb-mega-input-field-base",{key:"ff613023049f76355c68785b8a648e014f1413a9",size:this.size}),n("gb-mega-input-field-base",{key:"33e661275acbde4ad353fbba643ac3eb9c67d696",size:this.size})),this.digits===6&&n("div",{key:"e91711ce0d64271612d6323afd33ceea83d2809b",class:"input-wrapper"},n("div",{key:"73aa40233fb041082754d551b45b768123d0ac3a",class:"first=section"},n("gb-mega-input-field-base",{key:"12b780b1bd6944101c26de654d8ad740827d6c29",size:this.size}),n("gb-mega-input-field-base",{key:"cb462902ae51c86f608fe52dac66195e3a5540de",size:this.size}),n("gb-mega-input-field-base",{key:"2530b5aee228ac50d3af44f800b10a4096f591ff",size:this.size})),n("div",{key:"d387e24779257658ec4c96d17067684d7981a3cf",class:"second=section"},n("gb-mega-input-field-base",{key:"1be4b4246b9c19578f1428f92032d83bfb2c7d80",size:this.size}),n("gb-mega-input-field-base",{key:"cbcef4a46d2cbbe36f11e1a62d3e376b7fc92183",size:this.size}),n("gb-mega-input-field-base",{key:"6f062d88d323864908aa49bdf1a5cae11ed98016",size:this.size}))),this.digits===8&&n("div",{key:"ced031eaae33331fafa02403297b1c4b2f749925",class:"input-wrapper"},n("div",{key:"6c46541312e713b766af0b359d6bb8a8d58e327d",class:"first=section"},n("gb-mega-input-field-base",{key:"cff644fbf07d3aff9c4e036ab9d95b7488e29620",size:this.size}),n("gb-mega-input-field-base",{key:"9e2161c038b9d88e4ea6643d8e8b46ba912dede2",size:this.size}),n("gb-mega-input-field-base",{key:"110b32be52fcc56393d81e18809f0d97c8b9c303",size:this.size}),n("gb-mega-input-field-base",{key:"d33613808f6190d3cd9ed0b987402596a429fa2b",size:this.size})),n("div",{key:"6b168f48a16569d97337a55bae010af7764522b8",class:"second=section"},n("gb-mega-input-field-base",{key:"d4d1f2a15909f36207b3595a221282a532acc837",size:this.size}),n("gb-mega-input-field-base",{key:"0582db30f6f2ec6ac4e33254c2033a02c5d6a682",size:this.size}),n("gb-mega-input-field-base",{key:"463692b97f27d33b3d6adcab4757efd847143e24",size:this.size}),n("gb-mega-input-field-base",{key:"caaf46b2a88e62749f3f612beabead250465b4de",size:this.size})))),n("p",{key:"e25ea15ed904e88a32b2bc1812d79c7a4bc74e30"},this.supportingText))}};t.style=a;export{t as gb_token_field_compact};
2
+ //# sourceMappingURL=p-ad0ab2b2.entry.js.map
package/dist/globuscomponents/p-ad0ab2b2.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["gbTokenFieldCompactCss","GbTokenFieldCompactStyle0","GbTokenFieldCompact","render","h","key","class","this","size","showLabel","label","digits","supportingText"],"sources":["src/components/gb-token-field-compact/gb-token-field-compact.css?tag=gb-token-field-compact&encapsulation=shadow","src/components/gb-token-field-compact/gb-token-field-compact.tsx"],"sourcesContent":["@import './../../global/global.css';","import {Component, Prop, h } from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-token-field-compact',\r\n styleUrl: 'gb-token-field-compact.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbTokenFieldCompact {\r\n @Prop() size: GeneralSizes\r\n @Prop() digits: 4 | 6 | 8;\r\n @Prop() showLabel: boolean;\r\n @Prop() label: string = '';\r\n @Prop() showSupportingText: boolean;\r\n @Prop() supportingText: string = '';\r\n\r\n render() {\r\n\r\n return (\r\n <div class={this.size}>\r\n <div class=\"input-with-label\">\r\n {this.showLabel && (\r\n <label>{this.label}</label>\r\n )}\r\n {this.digits === 4 && (\r\n <div class=\"input-wrapper\">\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n </div>\r\n )} \r\n {this.digits === 6 && (\r\n <div class=\"input-wrapper\">\r\n <div class=\"first=section\">\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n </div>\r\n <div class=\"second=section\">\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n </div>\r\n </div>\r\n )}\r\n {this.digits === 8 && (\r\n <div class=\"input-wrapper\">\r\n <div class=\"first=section\">\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n </div>\r\n <div class=\"second=section\">\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n <gb-mega-input-field-base size={this.size}></gb-mega-input-field-base>\r\n </div>\r\n </div>\r\n )}\r\n </div> \r\n <p>{this.supportingText}</p> \r\n </div>\r\n );\r\n }\r\n}"],"mappings":"sCAAA,MAAMA,EAAyB,m2nEAC/B,MAAAC,EAAeD,E,MCQFE,EAAmB,M,uGAIJ,G,sDAES,E,CAEjC,MAAAC,GAEI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAOC,KAAKC,MACbJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACNC,KAAKE,WACFL,EAAA,SAAAC,IAAA,4CAAQE,KAAKG,OAEhBH,KAAKI,SAAW,GACbP,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACPF,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,QAG5CD,KAAKI,SAAW,GACbP,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACPF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACPF,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,QAEzCJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACPF,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,SAIhDD,KAAKI,SAAW,GACbP,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACPF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACPF,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,QAEzCJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACPF,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,OACrCJ,EAAA,4BAAAC,IAAA,2CAA0BG,KAAMD,KAAKC,UAKrDJ,EAAA,KAAAC,IAAA,4CAAIE,KAAKK,gB","ignoreList":[]}