@casinogate/ui 0.0.3

package/dist/assets/css/theme.css

@@ -0,0 +1,255 @@
+@theme inline {
+  /* Primary colors */
+  --color-primary-100: var(--cg-ui-palette-primary-100);
+  --color-primary-80: var(--cg-ui-palette-primary-80);
+  --color-primary-60: var(--cg-ui-palette-primary-60);
+  --color-primary-40: var(--cg-ui-palette-primary-40);
+  --color-primary-10: var(--cg-ui-palette-primary-10);
+
+  /* Neutral colors */
+  --color-neutral-100: var(--cg-ui-palette-neutral-100);
+  --color-neutral-80: var(--cg-ui-palette-neutral-80);
+  --color-neutral-60: var(--cg-ui-palette-neutral-60);
+  --color-neutral-50: var(--cg-ui-palette-neutral-50);
+  --color-neutral-40: var(--cg-ui-palette-neutral-40);
+  --color-neutral-20: var(--cg-ui-palette-neutral-20);
+  --color-neutral-10: var(--cg-ui-palette-neutral-10);
+  --color-neutral-0: var(--cg-ui-palette-neutral-0);
+
+  /* System colors */
+  --color-system-error-100: var(--cg-ui-palette-system-error-100);
+  --color-system-error-10: var(--cg-ui-palette-system-error-10);
+  --color-system-warning-100: var(--cg-ui-palette-system-warning-100);
+  --color-system-warning-10: var(--cg-ui-palette-system-warning-10);
+  --color-system-success-100: var(--cg-ui-palette-system-success-100);
+  --color-system-success-10: var(--cg-ui-palette-system-success-10);
+  --color-system-info-100: var(--cg-ui-palette-system-info-100);
+  --color-system-info-10: var(--cg-ui-palette-system-info-10);
+
+  /* Surface */
+  --color-surface-primary: var(--cg-ui-palette-primary-80);
+  --color-surface-primary-active: var(--cg-ui-palette-primary-60);
+  --color-surface-primary-light: var(--cg-ui-palette-primary-40);
+  --color-surface-primary-light-active: var(--cg-ui-palette-primary-10);
+  --color-surface-darkest: var(--cg-ui-palette-neutral-100);
+  --color-surface-dark: var(--cg-ui-palette-neutral-80);
+  --color-surface-regular: var(--cg-ui-palette-neutral-50);
+  --color-surface-semilight: var(--cg-ui-palette-neutral-40);
+  --color-surface-light: var(--cg-ui-palette-neutral-20);
+  --color-surface-lightest: var(--cg-ui-palette-neutral-10);
+  --color-surface-white: var(--cg-ui-palette-neutral-0);
+  --color-surface-hover: var(--cg-ui-palette-neutral-01);
+
+  /* Background */
+  --color-bg-white: var(--cg-ui-palette-neutral-0);
+  --color-bg-main: var(--cg-ui-palette-neutral-20);
+  --color-bg-dark: var(--cg-ui-palette-neutral-100);
+
+  /* Foreground */
+  --color-fg-darkest: var(--cg-ui-palette-neutral-100);
+  --color-fg-dark: var(--cg-ui-palette-neutral-80);
+  --color-fg-medium: var(--cg-ui-palette-neutral-60);
+  --color-fg-regular: var(--cg-ui-palette-neutral-50);
+  --color-fg-semilight: var(--cg-ui-palette-neutral-40);
+  --color-fg-primary: var(--cg-ui-palette-primary-80);
+  --color-fg-white: var(--cg-ui-palette-neutral-0);
+  --color-fg-error: var(--cg-ui-palette-system-error-100);
+  --color-fg-success: var(--cg-ui-palette-system-success-100);
+
+  /* Stroke */
+  --color-stroke-default: var(--cg-ui-palette-neutral-40);
+  --color-stroke-minimum: var(--cg-ui-palette-neutral-10);
+  --color-stroke-focus: var(--cg-ui-palette-primary-60);
+  --color-stroke-primary: var(--cg-ui-palette-primary-80);
+  --color-stroke-divider: var(--cg-ui-palette-neutral-20);
+  --color-stroke-error: var(--cg-ui-palette-system-error-100);
+
+  /* Icon */
+  --color-icon-regular: var(--cg-ui-palette-neutral-50);
+  --color-icon-default: var(--cg-ui-palette-neutral-40);
+  --color-icon-primary: var(--cg-ui-palette-primary-80);
+  --color-icon-focus: var(--cg-ui-palette-primary-60);
+  --color-icon-white: var(--cg-ui-palette-neutral-0);
+
+  /* States */
+  --color-state-error: var(--cg-ui-palette-system-error-100);
+  --color-state-error-light: var(--cg-ui-palette-system-error-10);
+  --color-state-warning: var(--cg-ui-palette-system-warning-100);
+  --color-state-warning-light: var(--cg-ui-palette-system-warning-10);
+  --color-state-success: var(--cg-ui-palette-system-success-100);
+  --color-state-success-light: var(--cg-ui-palette-system-success-10);
+  --color-state-info: var(--cg-ui-palette-system-info-100);
+  --color-state-info-light: var(--cg-ui-palette-system-info-10);
+
+  /* Breakpoints */
+  --breakpoint-phone-sm: 320px;
+  --breakpoint-phone: 375px;
+  --breakpoint-phone-lg: 425px;
+  --breakpoint-tablet-sm: 640px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-tablet-lg: 1024px;
+  --breakpoint-desktop-sm: 1280px;
+  --breakpoint-desktop: 1440px;
+  --breakpoint-desktop-lg: 1920px;
+
+  /* Blur Effects */
+  --blur-xxs: var(--cg-ui-number-xxs) * 1px;
+  --blur-xs: calc(var(--cg-ui-number-xs) * 1px);
+  --blur-sm: calc(var(--cg-ui-number-sm) * 1px);
+  --blur-md: calc(var(--cg-ui-number-md) * 1px);
+  --blur-lg: calc(var(--cg-ui-number-lg) * 1px);
+  --blur-xl: calc(var(--cg-ui-number-xl) * 1px);
+  --blur-2xl: calc(var(--cg-ui-number-2xl) * 1px);
+
+  /* Radius */
+  --radius-null: calc(var(--cg-ui-number-null) * 1px);
+  --radius-xxxs: calc(var(--cg-ui-number-xxxs) * 1px);
+  --radius-xxs: calc(var(--cg-ui-number-xxs) * 1px);
+  --radius-xs: calc(var(--cg-ui-number-xs) * 1px);
+  --radius-sm: calc(var(--cg-ui-number-sm) * 1px);
+  --radius-md: calc(var(--cg-ui-number-md) * 1px);
+  --radius-lg: calc(var(--cg-ui-number-lg) * 1px);
+  --radius-xl: calc(var(--cg-ui-number-xl) * 1px);
+  --radius-2xl: calc(var(--cg-ui-number-2xl) * 1px);
+  --radius-xxl: calc(var(--cg-ui-number-xxl) * 1px);
+  --radius-2xxl: calc(var(--cg-ui-number-2xxl) * 1px);
+  --radius-max: calc(var(--cg-ui-number-max) * 1px);
+
+  /* Shadows */
+  --shadow-toast: var(--cg-ui-shadow-toast);
+  --shadow-switch-thumb: var(--cg-ui-shadow-switch-thumb);
+
+  /* Font sizes, Line heights */
+  --text-heading: var(--cg-ui-fz-heading);
+  --text-heading--line-height: var(--cg-ui-lh-heading);
+
+  --text-heading-2: var(--cg-ui-fz-heading-2);
+  --text-heading-2--line-height: var(--cg-ui-lh-heading-2);
+
+  --text-body: var(--cg-ui-fz-body);
+  --text-body--line-height: var(--cg-ui-lh-body);
+
+  --text-body-2: var(--cg-ui-fz-body-2);
+  --text-body-2--line-height: var(--cg-ui-lh-body-2);
+
+  --text-caption: var(--cg-ui-fz-caption);
+  --text-caption--line-height: var(--cg-ui-lh-caption);
+
+  --text-caption-2: var(--cg-ui-fz-caption-2);
+  --text-caption-2--line-height: var(--cg-ui-lh-caption-2);
+}
+
+:root {
+  /* Primary colors */
+  --cg-ui-primary-hue: 220;
+  --cg-ui-primary-saturation: 80%;
+
+  --cg-ui-palette-primary-100: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 38%, 1);
+  --cg-ui-palette-primary-80: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 50%, 1);
+  --cg-ui-palette-primary-60: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 64%, 1);
+  --cg-ui-palette-primary-40: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 94%, 1);
+  --cg-ui-palette-primary-10: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 97%, 1);
+
+  /* Neutral colors */
+  --cg-ui-neutral-hue: 230;
+  --cg-ui-neutral-saturation: 20%;
+
+  --cg-ui-palette-neutral-100: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 12%, 1);
+  --cg-ui-palette-neutral-80: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 20%, 1);
+  --cg-ui-palette-neutral-60: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 40%, 1);
+  --cg-ui-palette-neutral-50: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 58%, 1);
+
+  /* Fixed colors */
+  --cg-ui-palette-neutral-40: hsla(230, 20%, 78%, 1);
+  --cg-ui-palette-neutral-20: hsla(230, 20%, 95%, 1);
+  --cg-ui-palette-neutral-10: hsla(230, 20%, 98%, 1);
+  --cg-ui-palette-neutral-0: hsla(0, 0%, 100%, 1);
+  --cg-ui-palette-neutral-01: hsla(0, 0%, 100%, 0.1);
+
+  /* System colors */
+  --cg-ui-palette-system-error-100: hsla(2, 100%, 40%, 1);
+  --cg-ui-palette-system-error-10: hsla(3, 67%, 93%, 1);
+
+  --cg-ui-palette-system-warning-100: hsla(52, 100%, 50%, 1);
+  --cg-ui-palette-system-warning-10: hsla(18, 88%, 94%, 1);
+
+  --cg-ui-palette-system-success-100: hsla(162, 100%, 25%, 1);
+  --cg-ui-palette-system-success-10: hsla(162, 64%, 94%, 1);
+
+  --cg-ui-palette-system-info-100: hsla(232, 22%, 29%, 1);
+  --cg-ui-palette-system-info-10: hsla(240, 12%, 93%, 1);
+
+  /* Base numbers */
+  --cg-ui-number-null: 0;
+  --cg-ui-number-xxxs: 2;
+  --cg-ui-number-xxs: 4;
+  --cg-ui-number-xs: 6;
+  --cg-ui-number-sm: 8;
+  --cg-ui-number-md: 12;
+  --cg-ui-number-lg: 16;
+  --cg-ui-number-xl: 20;
+  --cg-ui-number-2xl: 24;
+  --cg-ui-number-xxl: 40;
+  --cg-ui-number-2xxl: 48;
+  --cg-ui-number-max: 360;
+
+  /* Shadows */
+  --cg-ui-shadow-toast: 0px 0px 8px 0px hsla(0, 0%, 0%, 0.2);
+  --cg-ui-shadow-switch-thumb: 0px 1px 1px 0px hsla(0, 0%, 0%, 0.25);
+
+  /* Font sizes, Line heights */
+  --cg-ui-fz-base: 16;
+
+  --cg-ui-fz-heading: calc(16 / var(--cg-ui-fz-base) * 1rem);
+  --cg-ui-lh-heading: calc(22 / var(--cg-ui-fz-base) * 1rem);
+
+  --cg-ui-fz-heading-2: calc(16 / var(--cg-ui-fz-base) * 1rem);
+  --cg-ui-lh-heading-2: calc(18 / var(--cg-ui-fz-base) * 1rem);
+
+  --cg-ui-fz-body: calc(14 / var(--cg-ui-fz-base) * 1rem);
+  --cg-ui-lh-body: calc(18 / var(--cg-ui-fz-base) * 1rem);
+
+  --cg-ui-fz-body-2: calc(14 / var(--cg-ui-fz-base) * 1rem);
+  --cg-ui-lh-body-2: calc(16 / var(--cg-ui-fz-base) * 1rem);
+
+  --cg-ui-fz-caption: calc(12 / var(--cg-ui-fz-base) * 1rem);
+  --cg-ui-lh-caption: calc(18 / var(--cg-ui-fz-base) * 1rem);
+
+  --cg-ui-fz-caption-2: calc(12 / var(--cg-ui-fz-base) * 1rem);
+  --cg-ui-lh-caption-2: calc(16 / var(--cg-ui-fz-base) * 1rem);
+}
+
+.dark,
+[data-theme='dark'] {
+  /* Primary colors */
+  --cg-ui-primary-hue: 160;
+  --cg-ui-primary-saturation: 80%;
+
+  --cg-ui-palette-primary-100: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 28%, 1);
+  --cg-ui-palette-primary-80: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 40%, 1);
+  --cg-ui-palette-primary-60: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 64%, 1);
+  --cg-ui-palette-primary-40: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 94%, 1);
+  --cg-ui-palette-primary-10: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 97%, 1);
+
+  /* Neutral colors */
+  --cg-ui-neutral-hue: 225;
+  --cg-ui-neutral-saturation: 50%;
+
+  --cg-ui-palette-neutral-100: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 8%, 1);
+  --cg-ui-palette-neutral-80: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 12%, 1);
+  --cg-ui-palette-neutral-60: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 16%, 1);
+  --cg-ui-palette-neutral-50: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 28%, 1);
+
+  /* System colors */
+  --cg-ui-palette-system-error-100: hsla(2, 100%, 40%, 1);
+  --cg-ui-palette-system-error-10: hsla(3, 67%, 93%, 1);
+
+  --cg-ui-palette-system-warning-100: hsla(32, 98%, 40%, 1);
+  --cg-ui-palette-system-warning-10: hsla(18, 88%, 94%, 1);
+
+  --cg-ui-palette-system-success-100: hsla(162, 100%, 25%, 1);
+  --cg-ui-palette-system-success-10: hsla(162, 64%, 94%, 1);
+
+  --cg-ui-palette-system-info-100: hsla(232, 22%, 29%, 1);
+  --cg-ui-palette-system-info-10: hsla(240, 12%, 93%, 1);
+}

package/dist/assets/icons/check.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.94964 15.7264L5.6133 12.3865C5.52606 12.298 5.42215 12.2279 5.30761 12.18C5.19307 12.1321 5.07017 12.1074 4.94603 12.1074C4.8219 12.1074 4.699 12.1321 4.58445 12.18C4.46991 12.2279 4.36601 12.298 4.27876 12.3865C4.19046 12.4738 4.12034 12.5778 4.07249 12.6925C4.02464 12.8071 4 12.9302 4 13.0544C4 13.1787 4.02464 13.3018 4.07249 13.4164C4.12034 13.5311 4.19046 13.6351 4.27876 13.7224L8.27284 17.7209C8.6446 18.093 9.24514 18.093 9.6169 17.7209L19.7212 7.61506C19.8095 7.52772 19.8797 7.4237 19.9275 7.30904C19.9754 7.19437 20 7.07133 20 6.94706C20 6.82279 19.9754 6.69976 19.9275 6.58509C19.8797 6.47042 19.8095 6.36641 19.7212 6.27907C19.634 6.19066 19.5301 6.12048 19.4155 6.07257C19.301 6.02467 19.1781 6 19.054 6C18.9298 6 18.8069 6.02467 18.6924 6.07257C18.5778 6.12048 18.4739 6.19066 18.3867 6.27907L8.94964 15.7264Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/chevron-down.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.71888 8.46936C4.78854 8.39952 4.87131 8.3441 4.96243 8.30629C5.05354 8.26849 5.15122 8.24902 5.24988 8.24902C5.34853 8.24902 5.44621 8.26849 5.53733 8.30629C5.62844 8.3441 5.71121 8.39952 5.78088 8.46936L11.9999 14.6899L18.2189 8.46936C18.3597 8.32853 18.5507 8.24942 18.7499 8.24942C18.949 8.24942 19.14 8.32853 19.2809 8.46936C19.4217 8.61019 19.5008 8.8012 19.5008 9.00036C19.5008 9.19953 19.4217 9.39053 19.2809 9.53136L12.5309 16.2814C12.4612 16.3512 12.3784 16.4066 12.2873 16.4444C12.1962 16.4822 12.0985 16.5017 11.9999 16.5017C11.9012 16.5017 11.8035 16.4822 11.7124 16.4444C11.6213 16.4066 11.5385 16.3512 11.4689 16.2814L4.71888 9.53136C4.64903 9.4617 4.59362 9.37893 4.55581 9.28781C4.518 9.1967 4.49854 9.09901 4.49854 9.00036C4.49854 8.90171 4.518 8.80403 4.55581 8.71291C4.59362 8.6218 4.64903 8.53903 4.71888 8.46936Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/chevron-left.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.9061 5.09436C15.976 5.16403 16.0314 5.2468 16.0692 5.33791C16.107 5.42903 16.1265 5.52671 16.1265 5.62536C16.1265 5.72402 16.107 5.8217 16.0692 5.91281C16.0314 6.00393 15.976 6.0867 15.9061 6.15636L9.68562 12.3754L15.9061 18.5944C16.0469 18.7352 16.1261 18.9262 16.1261 19.1254C16.1261 19.3245 16.0469 19.5155 15.9061 19.6564C15.7653 19.7972 15.5743 19.8763 15.3751 19.8763C15.176 19.8763 14.9849 19.7972 14.8441 19.6564L8.09412 12.9064C8.02427 12.8367 7.96886 12.7539 7.93105 12.6628C7.89324 12.5717 7.87378 12.474 7.87378 12.3754C7.87378 12.2767 7.89324 12.179 7.93105 12.0879C7.96886 11.9968 8.02427 11.914 8.09412 11.8444L14.8441 5.09436C14.9138 5.02452 14.9966 4.96911 15.0877 4.9313C15.1788 4.89349 15.2765 4.87402 15.3751 4.87402C15.4738 4.87402 15.5715 4.89349 15.6626 4.9313C15.7537 4.96911 15.8365 5.02452 15.9061 5.09436Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/chevron-right.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.09412 19.656C8.02427 19.5863 7.96886 19.5035 7.93105 19.4124C7.89324 19.3213 7.87378 19.2236 7.87378 19.125C7.87378 19.0263 7.89324 18.9286 7.93105 18.8375C7.96886 18.7464 8.02427 18.6636 8.09412 18.594L14.3146 12.375L8.09412 6.15597C7.95329 6.01514 7.87417 5.82413 7.87417 5.62497C7.87417 5.42581 7.95329 5.2348 8.09412 5.09397C8.23495 4.95314 8.42596 4.87402 8.62512 4.87402C8.82428 4.87402 9.01529 4.95314 9.15612 5.09397L15.9061 11.844C15.976 11.9136 16.0314 11.9964 16.0692 12.0875C16.107 12.1786 16.1265 12.2763 16.1265 12.375C16.1265 12.4736 16.107 12.5713 16.0692 12.6624C16.0314 12.7535 15.976 12.8363 15.9061 12.906L9.15612 19.656C9.08645 19.7258 9.00369 19.7812 8.91257 19.819C8.82145 19.8568 8.72377 19.8763 8.62512 19.8763C8.52647 19.8763 8.42879 19.8568 8.33767 19.819C8.24655 19.7812 8.16379 19.7258 8.09412 19.656Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/chevron-small-down.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/chevron-small-left.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967Z" fill="currentColor"/>
+</svg>
+  

package/dist/assets/icons/chevron-small-right.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/chevron-small-up.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4697 9.46967C11.7626 9.17678 12.2374 9.17678 12.5303 9.46967L16.5303 13.4697C16.8232 13.7626 16.8232 14.2374 16.5303 14.5303C16.2374 14.8232 15.7626 14.8232 15.4697 14.5303L12 11.0607L8.53033 14.5303C8.23744 14.8232 7.76256 14.8232 7.46967 14.5303C7.17678 14.2374 7.17678 13.7626 7.46967 13.4697L11.4697 9.46967Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/chevron-up.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.281 16.2814C19.2113 16.3512 19.1285 16.4066 19.0374 16.4444C18.9463 16.4822 18.8486 16.5017 18.75 16.5017C18.6513 16.5017 18.5536 16.4822 18.4625 16.4444C18.3714 16.4066 18.2886 16.3512 18.219 16.2814L12 10.0609L5.78097 16.2814C5.64014 16.4222 5.44913 16.5013 5.24997 16.5013C5.05081 16.5013 4.8598 16.4222 4.71897 16.2814C4.57814 16.1405 4.49902 15.9495 4.49902 15.7504C4.49902 15.5512 4.57814 15.3602 4.71897 15.2194L11.469 8.46936C11.5386 8.39952 11.6214 8.34411 11.7125 8.3063C11.8036 8.26849 11.9013 8.24902 12 8.24902C12.0986 8.24902 12.1963 8.26849 12.2874 8.3063C12.3785 8.34411 12.4613 8.39952 12.531 8.46936L19.281 15.2194C19.3508 15.289 19.4062 15.3718 19.444 15.4629C19.4818 15.554 19.5013 15.6517 19.5013 15.7504C19.5013 15.849 19.4818 15.9467 19.444 16.0378C19.4062 16.1289 19.3508 16.2117 19.281 16.2814Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/error.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 3C7.041 3 3 7.041 3 12C3 16.959 7.041 21 12 21C16.959 21 21 16.959 21 12C21 7.041 16.959 3 12 3ZM15.024 14.07C15.285 14.331 15.285 14.763 15.024 15.024C14.889 15.159 14.718 15.222 14.547 15.222C14.376 15.222 14.205 15.159 14.07 15.024L12 12.954L9.93 15.024C9.795 15.159 9.624 15.222 9.453 15.222C9.282 15.222 9.111 15.159 8.976 15.024C8.715 14.763 8.715 14.331 8.976 14.07L11.046 12L8.976 9.93C8.715 9.669 8.715 9.237 8.976 8.976C9.237 8.715 9.669 8.715 9.93 8.976L12 11.046L14.07 8.976C14.331 8.715 14.763 8.715 15.024 8.976C15.285 9.237 15.285 9.669 15.024 9.93L12.954 12L15.024 14.07Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/info.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 21C16.959 21 21 16.959 21 12C21 7.041 16.959 3 12 3C7.041 3 3 7.041 3 12C3 16.959 7.041 21 12 21ZM12.675 15.6C12.675 15.969 12.369 16.275 12 16.275C11.631 16.275 11.325 15.969 11.325 15.6L11.325 11.1C11.325 10.731 11.631 10.425 12 10.425C12.369 10.425 12.675 10.731 12.675 11.1L12.675 15.6ZM11.172 8.058C11.217 7.941 11.28 7.851 11.361 7.761C11.451 7.68 11.55 7.617 11.658 7.572C11.766 7.527 11.883 7.5 12 7.5C12.117 7.5 12.234 7.527 12.342 7.572C12.45 7.617 12.549 7.68 12.639 7.761C12.72 7.851 12.783 7.941 12.828 8.058C12.873 8.166 12.9 8.283 12.9 8.4C12.9 8.517 12.873 8.634 12.828 8.742C12.783 8.85 12.72 8.949 12.639 9.039C12.549 9.12 12.45 9.183 12.342 9.228C12.126 9.318 11.874 9.318 11.658 9.228C11.55 9.183 11.451 9.12 11.361 9.039C11.28 8.949 11.217 8.85 11.172 8.742C11.127 8.634 11.1 8.517 11.1 8.4C11.1 8.283 11.127 8.166 11.172 8.058Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/minus.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 12C5 11.4477 5.39175 11 5.875 11H18.125C18.6082 11 19 11.4477 19 12C19 12.5523 18.6082 13 18.125 13H5.875C5.39175 13 5 12.5523 5 12Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/success.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 3.5C7.041 3.5 3 7.541 3 12.5C3 17.459 7.041 21.5 12 21.5C16.959 21.5 21 17.459 21 12.5C21 7.541 16.959 3.5 12 3.5ZM16.302 10.43L11.199 15.533C11.073 15.659 10.902 15.731 10.722 15.731C10.542 15.731 10.371 15.659 10.245 15.533L7.698 12.986C7.437 12.725 7.437 12.293 7.698 12.032C7.959 11.771 8.391 11.771 8.652 12.032L10.722 14.102L15.348 9.476C15.609 9.215 16.041 9.215 16.302 9.476C16.563 9.737 16.563 10.16 16.302 10.43Z" fill="currentColor"/>
+  </svg>
+  

package/dist/assets/icons/warning.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.3487 15.7641L15.2184 5.20071C14.3947 3.77942 13.2548 3 12 3C10.7452 3 9.60535 3.77942 8.78159 5.20071L2.65127 15.7641C1.8754 17.1121 1.78919 18.405 2.4118 19.4228C3.03441 20.4407 4.26048 21 5.86968 21H18.1303C19.7395 21 20.9656 20.4407 21.5882 19.4228C22.2108 18.405 22.1246 17.1029 21.3487 15.7641ZM11.2816 9.41875C11.2816 9.04279 11.6073 8.73102 12 8.73102C12.3927 8.73102 12.7184 9.04279 12.7184 9.41875V14.0036C12.7184 14.3795 12.3927 14.6913 12 14.6913C11.6073 14.6913 11.2816 14.3795 11.2816 14.0036V9.41875ZM12.6801 17.4055C12.6322 17.4422 12.5843 17.4789 12.5364 17.5155C12.4789 17.5522 12.4215 17.5797 12.364 17.5981C12.3065 17.6256 12.249 17.6439 12.182 17.6531C12.1245 17.6623 12.0575 17.6714 12 17.6714C11.9425 17.6714 11.8755 17.6623 11.8084 17.6531C11.751 17.6439 11.6935 17.6256 11.636 17.5981C11.5785 17.5797 11.5211 17.5522 11.4636 17.5155C11.4157 17.4789 11.3678 17.4422 11.3199 17.4055C11.1475 17.2313 11.0421 16.9929 11.0421 16.7545C11.0421 16.516 11.1475 16.2776 11.3199 16.1034C11.3678 16.0667 11.4157 16.0301 11.4636 15.9934C11.5211 15.9567 11.5785 15.9292 11.636 15.9109C11.6935 15.8833 11.751 15.865 11.8084 15.8558C11.933 15.8283 12.067 15.8283 12.182 15.8558C12.249 15.865 12.3065 15.8833 12.364 15.9109C12.4215 15.9292 12.4789 15.9567 12.5364 15.9934C12.5843 16.0301 12.6322 16.0667 12.6801 16.1034C12.8525 16.2776 12.9579 16.516 12.9579 16.7545C12.9579 16.9929 12.8525 17.2313 12.6801 17.4055Z" fill="currentColor"/>
+</svg>

package/dist/components/button/button.component.svelte

@@ -0,0 +1,173 @@
+<script lang="ts" module>
+  import type { WithVariants } from '../../internal/types/composition.js';
+  import { cn } from '../../internal/utils/common.js';
+  import { tv } from '../../internal/utils/tailwindcss.js';
+
+  export const buttonStyles = tv({
+    slots: {
+      root: [
+        'cgui:flex cgui:items-center cgui:justify-center cgui:gap-1.5 cgui:cursor-pointer cgui:px-2 cgui:text-center cgui:overflow-hidden',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:select-none cgui:font-medium',
+        'cgui:disabled:cursor-not-allowed cgui:disabled:opacity-50',
+      ],
+
+      chevron: ['cgui:inline-flex cgui:items-center cgui:justify-center cgui:shrink-0'],
+    },
+
+    variants: {
+      variant: {
+        primary: {
+          root: ['cgui:bg-primary-80  cgui:text-fg-white', 'cgui:hover:bg-primary-60 ', ' cgui:active:bg-primary-100'],
+        },
+        outline: {
+          root: [
+            'cgui:bg-transparent cgui:text-primary-80 cgui:border cgui:border-stroke-primary',
+            'cgui:hover:text-primary-60 cgui:hover:border-stroke-primary-60',
+            'cgui:active:text-primary-100 cgui:active:border-stroke-primary-100',
+          ],
+        },
+        ghost: {
+          root: [
+            'cgui:bg-transparent cgui:text-primary-80',
+            'cgui:hover:text-primary-60',
+            'cgui:active:text-primary-100',
+          ],
+        },
+        link: {
+          root: [
+            'cgui:bg-transparent cgui:text-primary-80',
+            'cgui:hover:text-primary-60',
+            'cgui:active:text-primary-100',
+            'cgui:underline',
+          ],
+        },
+      },
+
+      loading: {
+        true: {
+          root: 'cgui:pointer-events-none cgui:opacity-50',
+        },
+      },
+
+      shadow: {
+        true: {
+          root: 'cgui:shadow-btn',
+        },
+      },
+
+      size: {
+        xs: {
+          root: 'cgui:h-7.5',
+        },
+        sm: {
+          root: 'cgui:h-8',
+        },
+        md: {
+          root: 'cgui:h-8.5',
+        },
+        lg: {
+          root: 'cgui:h-14',
+        },
+      },
+
+      w: {
+        full: {
+          root: 'cgui:w-full',
+        },
+        auto: {
+          root: 'cgui:w-auto',
+        },
+        fit: {
+          root: 'cgui:w-fit',
+        },
+        clean: {
+          root: '',
+        },
+      },
+
+      rounded: {
+        sm: {
+          root: 'cgui:rounded-sm',
+        },
+        md: {
+          root: 'cgui:rounded-md',
+        },
+        lg: {
+          root: 'cgui:rounded-lg',
+        },
+        xl: {
+          root: 'cgui:rounded-xl',
+        },
+        full: {
+          root: 'cgui:rounded-full',
+        },
+        clean: {
+          root: '',
+        },
+      },
+    },
+
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+      shadow: true,
+      rounded: 'md',
+    },
+  });
+
+  export type ButtonProps = WithVariants<
+    ButtonRootProps & {
+      startChevron?: Snippet;
+
+      endChevron?: Snippet;
+    },
+    typeof buttonStyles
+  >;
+</script>
+
+<script lang="ts">
+  import { Button, type ButtonRootProps } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { fly } from 'svelte/transition';
+
+  let {
+    startChevron,
+    endChevron,
+    children,
+    ref = $bindable(null),
+    variant = 'primary',
+    size = 'md',
+    rounded = 'md',
+    disabled = false,
+    shadow = true,
+    w = 'full',
+    loading = false,
+    class: className,
+    ...props
+  }: ButtonProps = $props();
+
+  const styles = $derived(buttonStyles({ variant, size, rounded, shadow, w, loading }));
+</script>
+
+<Button.Root data-slot="button" bind:ref class={cn(styles.root(), className)} {disabled} {...props}>
+  {#if startChevron}
+    <span data-slot="start-chevron" class={styles.chevron}>
+      {@render startChevron()}
+    </span>
+  {/if}
+
+  {@render children?.()}
+
+  {#if loading}
+    <span in:fly={{ duration: 200, x: 20 }} data-slot="loading" class={styles.chevron()}>
+      <!-- <AnimatedLoaderIcon width={18} height={18} /> -->
+    </span>
+  {/if}
+
+  {#if endChevron && !loading}
+    <span data-slot="end-chevron" class={styles.chevron}>
+      {@render endChevron()}
+    </span>
+  {/if}
+</Button.Root>