@esportsplus/ui 0.7.16 → 0.8.2

package/src/tokens/scss/color.scss

@@ -1,65 +1,64 @@
-@use '../../lib';
-
-// https://uicolors.app/generate
-$color: (
-    'black': (
-        300: #030826,
-        400: #020517,
-        500: #000105
-    ),
-    'blue': (
-        300: #335fff,
-        400: #2545ff,
-        500: #1a3af3
-    ),
-    'border': (
-        300: #9ca2c4,
-        400: #9095bb,
-        500: #8083ac
-    ),
-    'green': (
-        300: #65ff50,
-        400: #15ff00,
-        500: #0ceb00
-    ),
-    'grey': (
-        300: #f6fafe,
-        400: #e7f1fa,
-        500: #d9e4ed
-    ),
-    'purple': (
-        300: #7614ff,
-        400: #6a00ff,
-        500: #5f00e5
-    ),
-    'red': (
-        300: #ff293b,
-        400: #ff0017,
-        500: #eb0014
-    ),
-    'text': (
-        300: #1F2542,
-        400: #171D39,
-        500: #0F152F
-    ),
-    'white': (
-        300: #fff,
-        400: #fff,
-        500: #fff
-    ),
-    'yellow': (
-        300: #f8ff47,
-        400: #fbff29,
-        500: #fcf803
-    )
-);
-
-@function color($keys, $opacity) {
-    $c: $color;
-
-    @each $key in $keys {
-        $c: lib.map-get($c, $key);
-    }
-
-    @return lib.color-change($c, $alpha: $opacity);
-}
+@use '../../lib';
+
+$color: (
+    'black': (
+        300: #151726,
+        400: #020412,
+        500: #010312
+    ),
+    'blue': (
+        300: #3755ff,
+        400: #2545ff,
+        500: #1e3def
+    ),
+    'border': (
+        300: #bec3dd,
+        400: #b4b9d2,
+        500: #a5a9c2
+    ),
+    'green': (
+        300: #6aff5c,
+        400: #15ff00,
+        500: #13eb00
+    ),
+    'grey': (
+        300: #f4f9ff,
+        400: #e7f1fa,
+        500: #d4dde6
+    ),
+    'purple': (
+        300: #7d15ff,
+        400: #7300ff,
+        500: #6a00eb
+    ),
+    'red': (
+        300: #ff2a3d,
+        400: #ff0017,
+        500: #eb0015
+    ),
+    'text': (
+        300: #1e243f,
+        400: #171d39,
+        500: #121832
+    ),
+    'white': (
+        300: #fff,
+        400: #fff,
+        500: #fff
+    ),
+    'yellow': (
+        300: #fbff5e,
+        400: #f9ff00,
+        500: #e3eb00
+    )
+);
+
+@function color($keys, $opacity) {
+    $c: $color;
+
+    @each $key in $keys {
+        $c: lib.map-get($c, $key);
+    }
+
+    @return lib.color-change($c, $alpha: $opacity);
+}

package/src/tokens/scss/font-size.scss

@@ -1,16 +1,16 @@
-// https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=400&minRatio=1.16&maxFontSize=14&maxWidth=1400&maxRatio=1.32&steps=100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&baseStep=400&prefix=-&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Montserrat&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1400
-$font-size: (
-    100: clamp(0.48rem, -0.16vi + 0.52rem, 0.38rem),
-    200: clamp(0.56rem, -0.09vi + 0.58rem, 0.5rem),
-    300: clamp(0.65rem, 0.03vi + 0.64rem, 0.66rem),
-    400: clamp(0.75rem, 0.2vi + 0.7rem, 0.88rem),
-    500: clamp(0.87rem, 0.46vi + 0.76rem, 1.16rem),
-
-    // Primarily Used For Headers h1 - h4
-    600: clamp(1.01rem, 0.82vi + 0.8rem, 1.52rem),
-    700: clamp(1.17rem, 1.35vi + 0.83rem, 2.01rem),
-    800: clamp(1.36rem, 2.08vi + 0.84rem, 2.66rem),
-    900: clamp(1.58rem, 3.09vi + 0.8rem, 3.51rem),
-);
-
-
+// https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=400&minRatio=1.16&maxFontSize=14&maxWidth=1400&maxRatio=1.32&steps=100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&baseStep=400&prefix=-&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=2&previewFont=Montserrat&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1400
+$font-size: (
+    100: clamp(0.48rem, -0.16vi + 0.52rem, 0.38rem),
+    200: clamp(0.56rem, -0.09vi + 0.58rem, 0.5rem),
+    300: clamp(0.65rem, 0.03vi + 0.64rem, 0.66rem),
+    400: clamp(0.75rem, 0.2vi + 0.7rem, 0.88rem),
+    500: clamp(0.87rem, 0.46vi + 0.76rem, 1.16rem),
+
+    // Primarily Used For Headers h1 - h4
+    600: clamp(1.01rem, 0.82vi + 0.8rem, 1.52rem),
+    700: clamp(1.17rem, 1.35vi + 0.83rem, 2.01rem),
+    800: clamp(1.36rem, 2.08vi + 0.84rem, 2.66rem),
+    900: clamp(1.58rem, 3.09vi + 0.8rem, 3.51rem),
+);
+
+

package/src/tokens/scss/font-weight.scss

@@ -1,6 +1,6 @@
-$font-weight: (
-    300: 400,
-    400: 500,
-    500: 600,
-    600: 700
-);
+$font-weight: (
+    300: 400,
+    400: 500,
+    500: 600,
+    600: 700
+);

package/src/tokens/scss/line-height.scss

@@ -1,6 +1,6 @@
-$line-height: (
-    100: 1,
-    200: 1.2,
-    300: 1.4,
-    400: 1.6
-);
+$line-height: (
+    100: 1,
+    200: 1.2,
+    300: 1.4,
+    400: 1.6
+);

package/src/tokens/scss/size.scss

@@ -1,13 +1,13 @@
-$size: (
-    0px: 0px,
-
-    100: 4px,
-    200: 8px,
-    300: 12px,
-    400: 16px,
-    500: 20px,
-    600: 24px,
-    700: 32px,
-    800: 40px,
-    900: 48px
-);
+$size: (
+    0px: 0px,
+
+    100: 4px,
+    200: 8px,
+    300: 12px,
+    400: 16px,
+    500: 20px,
+    600: 24px,
+    700: 32px,
+    800: 40px,
+    900: 48px
+);

package/src/tokens/scss/spacer.scss

@@ -1,8 +1,10 @@
-@use '../../lib';
-@use 'size';
-
-$spacer: (
-    300: lib.map-get(size.$size, 900) * 1,
-    400: lib.map-get(size.$size, 900) * 2,
-    500: lib.map-get(size.$size, 900) * 3
-);
+@use '../../lib';
+@use 'size';
+
+$spacer: (
+    200: 60px,
+    300: 80px,
+    400: 120px,
+    500: 160px,
+    600: 180px,
+);

package/src/tokens/scss/state.scss

@@ -1,87 +1,87 @@
-/**
- *------------------------------------------------------------------------------
- *
- *  Buttons, Links, And Other Modules Display CSS Properties Based On Module
- *  'State' ( :hover, :active, etc. )
- *
- *  Desired Result:
- *  - Default Colors Assigned To Element;
- *  - On 'highlight' Or ':hover' Display A Slightly Brighter Version Of
- *    The Default Color;
- *  - On 'pressed' Or ':active' Display Slightly Darker Version Of The
- *    Default Color;
- *
- *  End Product Gives Off The Illusion Of A Static -> Hovering -> Pressed
- *  Button Without Dealing With Transforms To Shift Elements.
- *
- *  Mixin Also Handles Removing Duplicate List Keys
- *
- */
-
-@use 'sass:meta';
-@use '../../lib';
-
-$state: (
-    active: '&.--active',
-    inactive: '&:not(.--active)',
-
-    disabled: '&.--disabled',
-    enabled: '&:not(.--disabled)',
-
-    default: '&:not(.--active):not(:hover)',
-    hover: '&:not(.--active):hover',
-    pressed: '&:not(.--active):active'
-);
-
-
-@function state($key, $replace: null) {
-    $selector: lib.map-get($state, $key);
-
-    // To Avoid Overcomplicating The Responsibility Of This Function Limit
-    // Replace Parameter To String Values Only
-    @if $replace {
-        @if meta.type-of($replace) != 'string' or meta.type-of($selector) != 'string' {
-            @error "'lib.string-replace' Cannot Be Used On A List!";
-        }
-
-        $selector: lib.string-replace('&', $replace, $selector);
-    }
-
-    @return $selector;
-}
-
-
-@mixin state($states) {
-    $selector: ();
-
-    @each $s in lib.list-to-list($states) {
-        $section: state($s);
-
-        @if $section {
-            $selector: lib.list-append($selector, $section);
-        }
-    }
-
-    #{lib.list-implode(',', lib.list-unique($selector))} {
-        @content;
-    }
-}
-
-@mixin state-utility($class, $property, $values) {
-    $keys: $values;
-
-    @if meta.type-of($keys) == 'map' {
-        $keys: lib.map-keys($keys);
-    }
-
-    #{$class} {
-        @each $key in $keys {
-            &-#{$key} {
-                --#{$property}-active: var(--color-#{$key}-300);
-                --#{$property}-default: var(--color-#{$key}-400);
-                --#{$property}-hover: var(--color-#{$key}-300);
-                --#{$property}-pressed: var(--color-#{$key}-500);
-            }
-        }
-    }
-}
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Buttons, Links, And Other Modules Display CSS Properties Based On Module
+ *  'State' ( :hover, :active, etc. )
+ *
+ *  Desired Result:
+ *  - Default Colors Assigned To Element;
+ *  - On 'highlight' Or ':hover' Display A Slightly Brighter Version Of
+ *    The Default Color;
+ *  - On 'pressed' Or ':active' Display Slightly Darker Version Of The
+ *    Default Color;
+ *
+ *  End Product Gives Off The Illusion Of A Static -> Hovering -> Pressed
+ *  Button Without Dealing With Transforms To Shift Elements.
+ *
+ *  Mixin Also Handles Removing Duplicate List Keys
+ *
+ */
+
+@use 'sass:meta';
+@use '../../lib';
+
+$state: (
+    active: '&.--active',
+    inactive: '&:not(.--active)',
+
+    disabled: '&.--disabled',
+    enabled: '&:not(.--disabled)',
+
+    default: '&:not(.--active):not(:hover)',
+    hover: '&:not(.--active):hover',
+    pressed: '&:not(.--active):active'
+);
+
+
+@function state($key, $replace: null) {
+    $selector: lib.map-get($state, $key);
+
+    // To Avoid Overcomplicating The Responsibility Of This Function Limit
+    // Replace Parameter To String Values Only
+    @if $replace {
+        @if meta.type-of($replace) != 'string' or meta.type-of($selector) != 'string' {
+            @error "'lib.string-replace' Cannot Be Used On A List!";
+        }
+
+        $selector: lib.string-replace('&', $replace, $selector);
+    }
+
+    @return $selector;
+}
+
+
+@mixin state($states) {
+    $selector: ();
+
+    @each $s in lib.list-to-list($states) {
+        $section: state($s);
+
+        @if $section {
+            $selector: lib.list-append($selector, $section);
+        }
+    }
+
+    #{lib.list-implode(',', lib.list-unique($selector))} {
+        @content;
+    }
+}
+
+@mixin state-utility($class, $property, $values) {
+    $keys: $values;
+
+    @if meta.type-of($keys) == 'map' {
+        $keys: lib.map-keys($keys);
+    }
+
+    #{$class} {
+        @each $key in $keys {
+            &-#{$key} {
+                --#{$property}-active: var(--color-#{$key}-300);
+                --#{$property}-default: var(--color-#{$key}-400);
+                --#{$property}-hover: var(--color-#{$key}-300);
+                --#{$property}-pressed: var(--color-#{$key}-500);
+            }
+        }
+    }
+}

package/src/tokens/scss/transition-duration.scss

@@ -1 +1 @@
-$transition-duration: 0.16s;
+$transition-duration: 0.16s;

package/storage/fonts/montserrat/index.css

@@ -1,79 +1,79 @@
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Montserrat Regular'), local('Montserrat-Regular'),
-         url('Montserrat-Regular.woff2') format('woff2'),
-         url('Montserrat-Regular.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: italic;
-    font-weight: 400;
-    src: local('Montserrat Italic'), local('Montserrat-Italic'),
-         url('Montserrat-Italic.woff2') format('woff2'),
-         url('Montserrat-Italic.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 500;
-    src: local('Montserrat Medium'), local('Montserrat-Medium'),
-         url('Montserrat-Medium.woff2') format('woff2'),
-         url('Montserrat-Medium.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: italic;
-    font-weight: 500;
-    src: local('Montserrat MediumItalic'), local('Montserrat-MediumItalic'),
-         url('Montserrat-MediumItalic.woff2') format('woff2'),
-         url('Montserrat-MediumItalic.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 600;
-    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
-         url('Montserrat-SemiBold.woff2') format('woff2'),
-         url('Montserrat-SemiBold.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: italic;
-    font-weight: 600;
-    src: local('Montserrat SemiBoldItalic'), local('Montserrat-SemiBoldItalic'),
-         url('Montserrat-SemiBoldItalic.woff2') format('woff2'),
-         url('Montserrat-SemiBoldItalic.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 700;
-    src: local('Montserrat Bold'), local('Montserrat Bold'),
-         url('Montserrat-Bold.woff2') format('woff2'),
-         url('Montserrat-Bold.woff') format('woff');
-}
-
-@font-face {
-    font-display: swap;
-    font-family: 'Montserrat';
-    font-style: italic;
-    font-weight: 700;
-    src: local('Montserrat BoldItalic'), local('Montserrat-BoldItalic'),
-         url('Montserrat-BoldItalic.woff2') format('woff2'),
-         url('Montserrat-BoldItalic.woff') format('woff');
-}
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Montserrat Regular'), local('Montserrat-Regular'),
+         url('Montserrat-Regular.woff2') format('woff2'),
+         url('Montserrat-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Montserrat Italic'), local('Montserrat-Italic'),
+         url('Montserrat-Italic.woff2') format('woff2'),
+         url('Montserrat-Italic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Montserrat Medium'), local('Montserrat-Medium'),
+         url('Montserrat-Medium.woff2') format('woff2'),
+         url('Montserrat-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 500;
+    src: local('Montserrat MediumItalic'), local('Montserrat-MediumItalic'),
+         url('Montserrat-MediumItalic.woff2') format('woff2'),
+         url('Montserrat-MediumItalic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
+         url('Montserrat-SemiBold.woff2') format('woff2'),
+         url('Montserrat-SemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 600;
+    src: local('Montserrat SemiBoldItalic'), local('Montserrat-SemiBoldItalic'),
+         url('Montserrat-SemiBoldItalic.woff2') format('woff2'),
+         url('Montserrat-SemiBoldItalic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Montserrat Bold'), local('Montserrat Bold'),
+         url('Montserrat-Bold.woff2') format('woff2'),
+         url('Montserrat-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Montserrat BoldItalic'), local('Montserrat-BoldItalic'),
+         url('Montserrat-BoldItalic.woff2') format('woff2'),
+         url('Montserrat-BoldItalic.woff') format('woff');
+}

package/tokens.scss

@@ -1,2 +1,2 @@
-// Dart sass doesn't support changing root directory for the package to 'src'
+// Dart sass doesn't support changing root directory for the package to 'src'
 @forward './src/tokens';

package/tsconfig.json

@@ -1,3 +1,3 @@
-{
-    "extends": "@esportsplus/typescript/tsconfig.package.json"
+{
+    "extends": "@esportsplus/typescript/tsconfig.package.json"
 }

package/utilities/styles.css

@@ -1,5 +1,4 @@
 .--background-state{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default)}.--background-state.--active{--background: var(--background-active)}.--background-state:not(.--active):hover{--background: var(--background-hover)}.--background-state:not(.--active):active{--background: var(--background-pressed)}.--border,.--border-bottom,.--border-left,.--border-right,.--border-top{--border-color: var(--border-color-default);--border-style: solid;--border-width: var(--border-width-400)}.--border-dashed{--border-style: dashed}.--border-dotted{--border-style: dotted}.--border-radius{--border-radius: var(--border-radius-400)}.--border-radius-0px{--border-radius: var(--border-radius-0px)}.--border-radius-circle{--border-radius: var(--border-radius-circle)}.--border-radius-curved{--border-radius: var(--border-radius-curved)}.--border-radius-100{--border-radius: var(--border-radius-100)}.--border-radius-200{--border-radius: var(--border-radius-200)}.--border-radius-300{--border-radius: var(--border-radius-300)}.--border-radius-400{--border-radius: var(--border-radius-400)}.--border-radius-500{--border-radius: var(--border-radius-500)}.--border-radius-600{--border-radius: var(--border-radius-600)}.--border-state{--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: transparent;--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default)}.--border-state.--active{--border-color: var(--border-color-active)}.--border-state:not(.--active):hover{--border-color: var(--border-color-hover)}.--border-state:not(.--active):active{--border-color: var(--border-color-pressed)}.--border-width{--border-width: var(--border-width-400)}.--border-width-400{--border-width: var(--border-width-400)}.--border-width-500{--border-width: var(--border-width-500)}.--border-width-600{--border-width: var(--border-width-600)}.--border-width-700{--border-width: var(--border-width-700)}.--color-inherit{--color: inherit}.--color-state{--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default)}.--color-state.--active{--color: var(--color-active)}.--color-state:not(.--active):hover{--color: var(--color-hover)}.--color-state:not(.--active):active{--color: var(--color-pressed)}.--background-primary{--background-active: var(--color-primary-300);--background-default: var(--color-primary-400);--background-hover: var(--color-primary-300);--background-pressed: var(--color-primary-500)}.--background-secondary{--background-active: var(--color-secondary-300);--background-default: var(--color-secondary-400);--background-hover: var(--color-secondary-300);--background-pressed: var(--color-secondary-500)}.--background-black{--background-active: var(--color-black-300);--background-default: var(--color-black-400);--background-hover: var(--color-black-300);--background-pressed: var(--color-black-500)}.--background-blue{--background-active: var(--color-blue-300);--background-default: var(--color-blue-400);--background-hover: var(--color-blue-300);--background-pressed: var(--color-blue-500)}.--background-border{--background-active: var(--color-border-300);--background-default: var(--color-border-400);--background-hover: var(--color-border-300);--background-pressed: var(--color-border-500)}.--background-green{--background-active: var(--color-green-300);--background-default: var(--color-green-400);--background-hover: var(--color-green-300);--background-pressed: var(--color-green-500)}.--background-grey{--background-active: var(--color-grey-300);--background-default: var(--color-grey-400);--background-hover: var(--color-grey-300);--background-pressed: var(--color-grey-500)}.--background-purple{--background-active: var(--color-purple-300);--background-default: var(--color-purple-400);--background-hover: var(--color-purple-300);--background-pressed: var(--color-purple-500)}.--background-red{--background-active: var(--color-red-300);--background-default: var(--color-red-400);--background-hover: var(--color-red-300);--background-pressed: var(--color-red-500)}.--background-text{--background-active: var(--color-text-300);--background-default: var(--color-text-400);--background-hover: var(--color-text-300);--background-pressed: var(--color-text-500)}.--background-white{--background-active: var(--color-white-300);--background-default: var(--color-white-400);--background-hover: var(--color-white-300);--background-pressed: var(--color-white-500)}.--background-yellow{--background-active: var(--color-yellow-300);--background-default: var(--color-yellow-400);--background-hover: var(--color-yellow-300);--background-pressed: var(--color-yellow-500)}.--border-primary{--border-color-active: var(--color-primary-300);--border-color-default: var(--color-primary-400);--border-color-hover: var(--color-primary-300);--border-color-pressed: var(--color-primary-500)}.--border-secondary{--border-color-active: var(--color-secondary-300);--border-color-default: var(--color-secondary-400);--border-color-hover: var(--color-secondary-300);--border-color-pressed: var(--color-secondary-500)}.--border-black{--border-color-active: var(--color-black-300);--border-color-default: var(--color-black-400);--border-color-hover: var(--color-black-300);--border-color-pressed: var(--color-black-500)}.--border-blue{--border-color-active: var(--color-blue-300);--border-color-default: var(--color-blue-400);--border-color-hover: var(--color-blue-300);--border-color-pressed: var(--color-blue-500)}.--border-border{--border-color-active: var(--color-border-300);--border-color-default: var(--color-border-400);--border-color-hover: var(--color-border-300);--border-color-pressed: var(--color-border-500)}.--border-green{--border-color-active: var(--color-green-300);--border-color-default: var(--color-green-400);--border-color-hover: var(--color-green-300);--border-color-pressed: var(--color-green-500)}.--border-grey{--border-color-active: var(--color-grey-300);--border-color-default: var(--color-grey-400);--border-color-hover: var(--color-grey-300);--border-color-pressed: var(--color-grey-500)}.--border-purple{--border-color-active: var(--color-purple-300);--border-color-default: var(--color-purple-400);--border-color-hover: var(--color-purple-300);--border-color-pressed: var(--color-purple-500)}.--border-red{--border-color-active: var(--color-red-300);--border-color-default: var(--color-red-400);--border-color-hover: var(--color-red-300);--border-color-pressed: var(--color-red-500)}.--border-text{--border-color-active: var(--color-text-300);--border-color-default: var(--color-text-400);--border-color-hover: var(--color-text-300);--border-color-pressed: var(--color-text-500)}.--border-white{--border-color-active: var(--color-white-300);--border-color-default: var(--color-white-400);--border-color-hover: var(--color-white-300);--border-color-pressed: var(--color-white-500)}.--border-yellow{--border-color-active: var(--color-yellow-300);--border-color-default: var(--color-yellow-400);--border-color-hover: var(--color-yellow-300);--border-color-pressed: var(--color-yellow-500)}.--color-primary{--color-active: var(--color-primary-300);--color-default: var(--color-primary-400);--color-hover: var(--color-primary-300);--color-pressed: var(--color-primary-500)}.--color-secondary{--color-active: var(--color-secondary-300);--color-default: var(--color-secondary-400);--color-hover: var(--color-secondary-300);--color-pressed: var(--color-secondary-500)}.--color-black{--color-active: var(--color-black-300);--color-default: var(--color-black-400);--color-hover: var(--color-black-300);--color-pressed: var(--color-black-500)}.--color-blue{--color-active: var(--color-blue-300);--color-default: var(--color-blue-400);--color-hover: var(--color-blue-300);--color-pressed: var(--color-blue-500)}.--color-border{--color-active: var(--color-border-300);--color-default: var(--color-border-400);--color-hover: var(--color-border-300);--color-pressed: var(--color-border-500)}.--color-green{--color-active: var(--color-green-300);--color-default: var(--color-green-400);--color-hover: var(--color-green-300);--color-pressed: var(--color-green-500)}.--color-grey{--color-active: var(--color-grey-300);--color-default: var(--color-grey-400);--color-hover: var(--color-grey-300);--color-pressed: var(--color-grey-500)}.--color-purple{--color-active: var(--color-purple-300);--color-default: var(--color-purple-400);--color-hover: var(--color-purple-300);--color-pressed: var(--color-purple-500)}.--color-red{--color-active: var(--color-red-300);--color-default: var(--color-red-400);--color-hover: var(--color-red-300);--color-pressed: var(--color-red-500)}.--color-text{--color-active: var(--color-text-300);--color-default: var(--color-text-400);--color-hover: var(--color-text-300);--color-pressed: var(--color-text-500)}.--color-white{--color-active: var(--color-white-300);--color-default: var(--color-white-400);--color-hover: var(--color-white-300);--color-pressed: var(--color-white-500)}.--color-yellow{--color-active: var(--color-yellow-300);--color-default: var(--color-yellow-400);--color-hover: var(--color-yellow-300);--color-pressed: var(--color-yellow-500)}
-.--margin,.--margin-horizontal{margin-left:var(--margin-horizontal);margin-right:var(--margin-horizontal)}.--margin,.--margin-vertical{margin-bottom:var(--margin-vertical);margin-top:var(--margin-vertical)}.--margin-bottom{margin-bottom:var(--margin-vertical)}.--margin-top{margin-top:var(--margin-vertical)}.--margin-left{margin-left:var(--margin-horizontal)}.--margin-right{margin-right:var(--margin-horizontal)}.--padding,.--padding-horizontal{padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.--padding.--border,.--padding-horizontal.--border{padding-left:calc(var(--padding-horizontal) - var(--border-width));padding-right:calc(var(--padding-horizontal) - var(--border-width))}.--padding,.--padding-vertical{padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical)}.--padding.--border,.--padding-vertical.--border{padding-bottom:calc(var(--padding-vertical) - var(--border-width));padding-top:calc(var(--padding-vertical) - var(--border-width))}.--padding-bottom{padding-bottom:var(--padding-vertical)}.--padding-top{padding-top:var(--padding-vertical)}.--padding-left{padding-left:var(--padding-horizontal)}.--padding-right{padding-right:var(--padding-horizontal)}
 .--absolute-horizontal-bottom,.--absolute-vertical-bottom{bottom:0}.--absolute-horizontal-top,.--absolute-vertical-top{top:0}.--absolute-horizontal,.--absolute-horizontal-bottom,.--absolute-horizontal-top{position:absolute;right:50%;transform:translateX(50%)}.--absolute-vertical,.--absolute-vertical-left,.--absolute-vertical-right{position:absolute;bottom:50%;transform:translateY(50%)}.--absolute-bottom{position:absolute;inset:auto 0 0 0}.--absolute-center{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%)}.--absolute-full{position:absolute;inset:0 0 0 0}.--absolute-left{position:absolute;inset:0 auto 0 0}.--absolute-right{position:absolute;inset:0 0 0 auto}.--absolute-top{position:absolute;inset:0 0 auto 0}
 .--border{border:var(--border-width) var(--border-style) var(--border-color)}.--border-bottom{border-bottom:var(--border-width) var(--border-style) var(--border-color)}.--border-left{border-left:var(--border-width) var(--border-style) var(--border-color)}.--border-right{border-right:var(--border-width) var(--border-style) var(--border-color)}.--border-top{border-top:var(--border-width) var(--border-style) var(--border-color)}.--border-offset-bottom{margin-bottom:calc(var(--border-width)*-1)}.--border-offset-left{margin-left:calc(var(--border-width)*-1)}.--border-offset-right{margin-right:calc(var(--border-width)*-1)}.--border-offset-top{margin-top:calc(var(--border-width)*-1)}.--border-radius{border-radius:var(--border-radius)}
 .--disabled{opacity:.64;pointer-events:none}
@@ -14,3 +13,4 @@
 .--text-bold{font-weight:var(--font-weight-500)}.--text-bold-600{font-weight:var(--font-weight-600)}.--text-center{text-align:center}.--text-crop::after,.--text-crop::before,.--text-crop-bottom::after,.--text-crop-top::before{content:"";display:block;height:0;width:100%}.--text-crop::after,.--text-crop-bottom::after{margin-bottom:calc((1 - var(--line-height))*.618em)}.--text-crop::before,.--text-crop-top::before{margin-top:calc((1 - var(--line-height))*.618em)}.--text-italic{font-style:italic}.--text-line-through{text-decoration:line-through;text-decoration-thickness:var(--line-width)}.--text-multiplier{font-size:calc(var(--font-size)*var(--text-multiplier))}.--text-outline{color:var(--color);word-break:break-word;word-wrap:break-word}@supports(-webkit-text-stroke-width: 1px){.--text-outline{color:rgba(0,0,0,0);-webkit-text-fill-color:rgba(0,0,0,0);-webkit-text-stroke-color:var(--color);-webkit-text-stroke-width:var(--stroke-width)}}.--text-truncate{line-height:var(--size);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.--text-underline{text-decoration:underline}.--text-underline-dotted{text-decoration:underline;text-decoration-style:dotted}.--text-uppercase{text-transform:uppercase}
 .--viewport{overflow:hidden;height:calc(100svh - var(--margin-vertical, 0px)*2);width:calc(100vw - var(--margin-horizontal, 0px)*2)}
 .--width{width:var(--width)}
+.--margin,.--margin-horizontal{margin-left:var(--margin-horizontal);margin-right:var(--margin-horizontal)}.--margin,.--margin-vertical{margin-bottom:var(--margin-vertical);margin-top:var(--margin-vertical)}.--margin-bottom{margin-bottom:var(--margin-vertical)}.--margin-top{margin-top:var(--margin-vertical)}.--margin-left{margin-left:var(--margin-horizontal)}.--margin-right{margin-right:var(--margin-horizontal)}.--padding,.--padding-horizontal{padding-left:var(--padding-horizontal);padding-right:var(--padding-horizontal)}.--padding.--border,.--padding-horizontal.--border{padding-left:calc(var(--padding-horizontal) - var(--border-width));padding-right:calc(var(--padding-horizontal) - var(--border-width))}.--padding,.--padding-vertical{padding-bottom:var(--padding-vertical);padding-top:var(--padding-vertical)}.--padding.--border,.--padding-vertical.--border{padding-bottom:calc(var(--padding-vertical) - var(--border-width));padding-top:calc(var(--padding-vertical) - var(--border-width))}.--padding-bottom{padding-bottom:var(--padding-vertical)}.--padding-top{padding-top:var(--padding-vertical)}.--padding-left{padding-left:var(--padding-horizontal)}.--padding-right{padding-right:var(--padding-horizontal)}