@streamscloud/kit 0.2.42-1778522742378 → 0.9.0

package/dist/core/toastr/toastr.svelte.js

@@ -1,30 +0,0 @@
-import { ToasterHost } from './toaster-host.svelte';
-const toExternalToast = (options) => {
-    if (!options) {
-        return {};
-    }
-    const { theme, ...rest } = options;
-    return { ...rest, class: theme ? `sc-toast--${theme}` : undefined };
-};
-export class Toastr {
-    static async error(message, options) {
-        const toast = await ToasterHost.ensure();
-        toast.error(message, toExternalToast(options));
-    }
-    static async success(message, options) {
-        const toast = await ToasterHost.ensure();
-        toast.success(message, toExternalToast(options));
-    }
-    static async warning(message, options) {
-        const toast = await ToasterHost.ensure();
-        toast.warning(message, toExternalToast(options));
-    }
-    static async info(message, options) {
-        const toast = await ToasterHost.ensure();
-        toast.info(message, toExternalToast(options));
-    }
-    static async promise(promise, messages, options) {
-        const toast = await ToasterHost.ensure();
-        toast.promise(promise, { ...messages, ...toExternalToast(options) });
-    }
-}

package/dist/core/toastr/types.d.ts

@@ -1,16 +0,0 @@
-export interface ToastrAction {
-    label: string;
-    onClick: () => void;
-}
-export type ToastrTheme = 'light' | 'dark';
-export interface ToastrOptions {
-    action?: ToastrAction;
-    description?: string;
-    duration?: number;
-    theme?: ToastrTheme;
-}
-export interface ToastrPromiseMessages<T> {
-    loading: string;
-    success: string | ((data: T) => string);
-    error: string | ((error: unknown) => string);
-}

package/dist/styles/_colors.scss

@@ -1,126 +0,0 @@
-$color-white: #ffffff;
-$color-black: #000000;
-
-$color-dark-50: #383838;
-$color-dark-100: #343434;
-$color-dark-200: #333333;
-$color-dark-300: #2e2e2e;
-$color-dark-400: #2c2c2c;
-$color-dark-500: #272727;
-$color-dark-600: #242424;
-$color-dark-700: #222222;
-$color-dark-800: #1e1e1e;
-$color-dark-900: #121212;
-
-$color-neutral-50: #f9fafb;
-$color-neutral-100: #f2f2f3;
-$color-neutral-200: #e5e7eb;
-$color-neutral-300: #d1d5db;
-$color-neutral-400: #9ca3af;
-$color-neutral-500: #6b7280;
-$color-neutral-600: #4b5563;
-$color-neutral-700: #374151;
-$color-neutral-800: #1f2937;
-$color-neutral-900: #111827;
-
-$color-primary-50: #f1f6fd;
-$color-primary-100: #dfe9fb;
-$color-primary-200: #bad0f7;
-$color-primary-300: #91b3f3;
-$color-primary-400: #5a8dec;
-$color-primary-500: #144ab0;
-$color-primary-600: #1244a0;
-$color-primary-700: #103a89;
-$color-primary-800: #0c2d69;
-$color-primary-900: #0a2557;
-
-$color-success-50: #ecfef4;
-$color-success-100: #d4fce7;
-$color-success-200: #bbf7d0;
-$color-success-300: #39f393;
-$color-success-400: #0de374;
-$color-success-500: #0cce6b;
-$color-success-600: #0bbc60;
-$color-success-700: #0aa454;
-$color-success-800: #088745;
-$color-success-900: #066031;
-
-$color-warning-50: #fffbeb;
-$color-warning-100: #fef3c7;
-$color-warning-200: #fde68a;
-$color-warning-300: #fcd34d;
-$color-warning-400: #fbbf24;
-$color-warning-500: #ffa62b;
-$color-warning-600: #d97706;
-$color-warning-700: #b45309;
-$color-warning-800: #92400e;
-$color-warning-900: #78350f;
-
-$color-destructive-50: #fef1f3;
-$color-destructive-100: #fde8ea;
-$color-destructive-200: #f9c8cd;
-$color-destructive-300: #f6a7b1;
-$color-destructive-400: #f17e8b;
-$color-destructive-500: #e71d36;
-$color-destructive-600: #d4172d;
-$color-destructive-700: #b81427;
-$color-destructive-800: #981020;
-$color-destructive-900: #730c18;
-
-$color-secondary-purple: #b497d6;
-$color-secondary-light-blue: #72a1e5;
-$color-secondary-burgundy: #45062e;
-$color-secondary-dark-green: #3d7068;
-$color-secondary-pink: #f26ca7;
-
-// Legacy - to be removed later
-
-$color-system-blue: $color-primary-500;
-$color-system-red: $color-destructive-500;
-$color-system-green: $color-success-500;
-$color-system-orange: $color-warning-500;
-
-$color-gray-50: #fafafa;
-$color-gray-100: #f2f2f2;
-$color-gray-200: #c1c1c1;
-$color-gray-500: #999999;
-$color-gray-550: #83838b;
-$color-gray-600: #7d7d7d;
-$color-gray-700: #4d4d4d;
-$color-gray-800: #2e2e2e;
-$color-gray-900: #1c1c1c;
-
-// Q3 Figma Colors
-$colors--primary--blue-50: #f1f6fd;
-$colors--primary--blue-100: #dfe9fb;
-$colors--primary--blue-200: #bad0f7;
-$colors--primary--blue-800: #0c2d69;
-
-$backgrounds--bg-brand: #144ab0;
-$backgrounds--bg-secondary: #ffffff;
-$backgrounds--bg-secondary-dark: #121212;
-$backgrounds--bg-element: #f9fafb;
-$backgrounds--bg-element-dark: #1e1e1e;
-$backgrounds--bg-primary: #ffffff;
-$backgrounds--bg-light: #9ca3af;
-$backgrounds--bg-menu-active: #f1f6fd;
-
-$borders--border-primary: #f2f2f3;
-$borders--border-primary-dark: #1e1e1e;
-$borders--border-white: #ffffff;
-$borders--border-white-dark: #121212;
-$borders--border-secondary: #f2f2f3;
-$borders--border-secondary--dark: #343434;
-$borders--border-active: #5a8dec;
-
-$icons--icon-primary: #1f2937;
-$icons--icon-brand: #144ab0;
-$icons--icon-brand-dark: #ffffff;
-
-$texts--text-brand: #5a8dec;
-$texts--text-secondary: #6b7280;
-$texts--text-secondary-dark: #d1d5db;
-$texts--text-primary: #000000;
-$texts--text-primary-dark: #ffffff;
-
-$graphics--button--green: #0cce6b;

package/dist/styles/_form-group.scss

@@ -1,37 +0,0 @@
-@use 'functions';
-@use 'colors';
-
-.g-form-group {
-  --_form-group--margin-bottom: var(--form-group--margin-bottom, #{functions.rem(20)});
-  --_form-group--label--font-size: var(--form-group--label--font-size, #{functions.rem(14)});
-  --_form-group--label--font-weight: var(--form-group--label--font-weight, 400);
-  --_form-group--label--color: var(--form-group--label--color);
-  --_form-group--label--margin-bottom: var(--form-group--label--margin-bottom, #{functions.rem(8)});
-  --_form-group--note--font-size: var(--form-group--note--font-size, #{functions.rem(14)});
-  --_form-group--note--font-weight: var(--form-group--note--font-weight, 300);
-
-  display: block;
-  margin-bottom: var(--_form-group--margin-bottom);
-
-  &__label {
-    font-size: var(--_form-group--label--font-size);
-    padding: 0;
-    margin-bottom: var(--_form-group--label--margin-bottom);
-    font-weight: var(--_form-group--label--font-weight);
-    display: block;
-    color: var(--_form-group--label--color);
-
-    &--with-tooltip {
-      display: flex;
-      align-items: center;
-      gap: functions.rem(4);
-    }
-  }
-
-  &__note {
-    margin-top: functions.rem(8);
-    color: colors.$color-neutral-400;
-    font-size: var(--_form-group--note--font-size);
-    font-weight: var(--_form-group--note--font-weight);
-  }
-}

package/dist/styles/_input.scss

@@ -1,100 +0,0 @@
-@use 'colors';
-@use 'functions';
-@use 'transitions';
-
-@mixin input-container() {
-  --_input--root--font-size: var(--_--input--root--font-size, 1rem);
-  --_input--height: var(--_--input--height, #{functions.em(32)});
-  --_input--width: var(--_--input--width, 100%);
-  --_input--background: var(--_--input--background, light-dark(#{colors.$color-white}, #{colors.$color-gray-900}));
-  --_input--background--disabled: var(--_--input--background--disabled, light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800}));
-  --_input--border-color: var(--_--input--border-color, light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800}));
-  --_input--border-radius: var(--_--input--border-radius, #{functions.em(4)});
-
-  --_input--icon--size: var(--_--input--icon--size, 1em);
-  --_input--icon--color: var(--_--input--icon--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
-
-  --_input--text--font-size: var(--_--input--text--font-size, #{functions.em(14)});
-  --_input--text--color: var(--_--input--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
-  --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
-  --input--placeholder--color: var(--_--input--placeholder--color);
-
-  --_input--accent-color: var(--_--input--accent-color, light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400}));
-
-  --_input--padding--inline: var(--_--input--padding--inline, #{functions.em(8)});
-  --_input--padding--block: var(--_--input--padding--block, 0);
-  --_input--padding-top: var(--_--input--padding-top, var(--_input--padding--block));
-  --_input--padding-right: var(--_--input--padding-right, var(--_input--padding--inline));
-  --_input--padding-bottom: var(--_--input--padding-bottom, var(--_input--padding--block));
-  --_input--padding-left: var(--_--input--padding-left, var(--_input--padding--inline));
-
-  font-size: var(--_input--root--font-size);
-  height: var(--_input--height);
-  color: var(--_input--text--color);
-  border: 1px solid var(--_input--border-color);
-  border-radius: var(--_input--border-radius);
-  width: var(--_input--width);
-  min-width: var(--_input--width);
-  background: var(--_input--background);
-
-  padding-top: var(--_input--padding-top);
-  padding-right: var(--_input--padding-right);
-  padding-bottom: var(--_input--padding-bottom);
-  padding-left: var(--_input--padding-left);
-
-  @include input-accent-shadow;
-  @include transitions.transition(box-shadow border-color width background padding);
-
-  &--disabled {
-    background-color: var(--_input--background--disabled);
-    cursor: default;
-  }
-}
-
-@mixin input-text() {
-  font-size: var(--_input--text--font-size);
-  color: var(--_input--text--color);
-
-  &::placeholder {
-    color: var(--_input--placeholder--color);
-  }
-
-  &:-webkit-autofill {
-    -webkit-text-fill-color: var(--_input--text--color) !important;
-  }
-}
-
-@mixin input-icon() {
-  color: var(--_input--icon--color);
-  font-size: var(--_input--icon--size);
-  line-height: 0;
-  cursor: pointer;
-}
-
-@mixin input-accent-shadow() {
-  --_input--default-shadow-color: transparent;
-  --_input--accent-shadow: var(--_input--explicit-shadow-color, var(--_input--default-shadow-color));
-  position: relative;
-  box-shadow: inset 0 -0.13em var(--_input--accent-shadow);
-
-  &:focus,
-  &:focus-within {
-    --_input--default-shadow-color: var(--_input--accent-color);
-  }
-}
-
-@mixin input-accented($color: null) {
-  @if ($color) {
-    --_input--explicit-shadow-color: #{$color};
-  } @else {
-    --_input--explicit-shadow-color: var(--_input--accent-color);
-  }
-}
-
-@mixin input-borderless() {
-  --_input--border-color: transparent;
-  --_input--background: transparent;
-  --_input--background--disabled: transparent;
-  --_input--accent-color: transparent;
-  --_input--explicit-shadow-color: transparent;
-}

package/dist/styles/_row.scss

@@ -1,81 +0,0 @@
-$_desktop: 960px;
-$_tablet: 768px;
-$_grid-cols: 12;
-
-.g-row {
-  display: flex !important;
-  flex-wrap: wrap;
-}
-
-.g-row-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-[class*='g-col-'] {
-  flex: 0 1 auto;
-  max-width: 100%;
-}
-
-@for $i from 1 through $_grid-cols {
-  .g-col-#{$i} {
-    flex-basis: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
-    max-width: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
-  }
-}
-
-@for $i from 0 through ($_grid-cols - 1) {
-  .g-col-offset-#{$i} {
-    margin-left: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
-  }
-}
-
-/* Tablets */
-@media only screen and (min-width: $_tablet) and (max-width: $_desktop - 1) {
-  [class*='g-col-'] {
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-
-  [class*='g-col-offset-'] {
-    margin-left: 0;
-  }
-
-  @for $i from 1 through $_grid-cols {
-    .g-tablet-col-#{$i} {
-      flex-basis: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
-      max-width: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
-    }
-  }
-
-  @for $i from 0 through ($_grid-cols - 1) {
-    .g-tablet-col-offset-#{$i} {
-      margin-left: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
-    }
-  }
-}
-
-/* Mobile portrait and landscape modes */
-@media only screen and (max-width: $_tablet - 1) {
-  [class*='g-tablet-col-'] {
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-
-  [class*='g-tablet-col-offset-'] {
-    margin-left: 0;
-  }
-
-  @for $i from 1 through $_grid-cols {
-    .g-mobile-col-#{$i} {
-      flex-basis: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
-      max-width: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
-    }
-  }
-
-  @for $i from 0 through ($_grid-cols - 1) {
-    .g-mobile-col-offset-#{$i} {
-      margin-left: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
-    }
-  }
-}

package/dist/styles/_theme.scss

@@ -1,68 +0,0 @@
-@use 'colors';
-
-:root {
-  /* Backgrounds */
-  --sc-color--bg-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400});
-  --sc-color--bg-button: light-dark(#{colors.$color-white}, #{colors.$color-dark-800});
-  --sc-color--bg-element: light-dark(#{colors.$color-neutral-50}, #{colors.$color-dark-800});
-  --sc-color--bg-header: light-dark(#{colors.$color-neutral-50}, #{colors.$color-black});
-  --sc-color--bg-images: #{colors.$color-neutral-300};
-  --sc-color--bg-images-secondary: #{colors.$color-neutral-400};
-  --sc-color--bg-inactive: light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-100});
-  --sc-color--bg-menu-active: light-dark(#{colors.$color-primary-50}, #{colors.$color-primary-800});
-  --sc-color--bg-menu-hover: light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800});
-  --sc-color--bg-page: light-dark(#{colors.$color-white}, #{colors.$color-black});
-  --sc-color--bg-primary: light-dark(#{colors.$color-white}, #{colors.$color-dark-900});
-  --sc-color--bg-screen: light-dark(#{colors.$color-neutral-50}, #{colors.$color-black});
-  --sc-color--bg-secondary: light-dark(#{colors.$color-neutral-50}, #{colors.$color-dark-800});
-  --sc-color--bg-section: #f3f4f6;
-
-  /* Borders */
-  --sc-color--border-active: #{colors.$color-primary-400};
-  --sc-color--border-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400});
-  --sc-color--border-error: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-600});
-  --sc-color--border-gray: light-dark(#{colors.$color-neutral-200}, #{colors.$color-dark-200});
-  --sc-color--border-green: light-dark(#{colors.$color-success-500}, #{colors.$color-success-700});
-  --sc-color--border-input: light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800});
-  --sc-color--border-input-dark: light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-500});
-  --sc-color--border-light: light-dark(#{colors.$color-neutral-100}, #{colors.$color-neutral-300});
-  --sc-color--border-primary: light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800});
-  --sc-color--border-secondary: light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-100});
-  --sc-color--border-white: light-dark(#{colors.$color-white}, #{colors.$color-dark-900});
-
-  /* Buttons */
-  --sc-color--button-blue: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-800});
-  --sc-color--button-blue-bg: light-dark(#{colors.$color-primary-50}, #{colors.$color-dark-300});
-  --sc-color--button-green: light-dark(#{colors.$color-success-500}, #{colors.$color-success-700});
-  --sc-color--button-green-bg: light-dark(#{colors.$color-success-50}, #{colors.$color-success-900});
-  --sc-color--button-red: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-700});
-
-  /* Badges */
-  --sc-color--badge-blue: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400});
-  --sc-color--badge-blue-bg: light-dark(#{colors.$color-primary-50}, #{colors.$color-primary-900});
-  --sc-color--badge-green: light-dark(#{colors.$color-success-500}, #{colors.$color-success-400});
-  --sc-color--badge-green-bg: light-dark(#{colors.$color-success-50}, #{colors.$color-success-900});
-  --sc-color--badge-red: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-400});
-  --sc-color--badge-red-bg: light-dark(#{colors.$color-destructive-50}, #{colors.$color-destructive-900});
-  --sc-color--badge-gray: light-dark(#{colors.$color-neutral-500}, #{colors.$color-neutral-400});
-  --sc-color--badge-gray-bg: light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-900});
-
-  /* Icons */
-  --sc-color--icon-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-white});
-  --sc-color--icon-menu: light-dark(#{colors.$color-neutral-800}, #{colors.$color-white});
-  --sc-color--icon-overlay: #{colors.$color-white};
-  --sc-color--icon-primary: light-dark(#{colors.$color-black}, #{colors.$color-white});
-  --sc-color--icon-secondary: #{colors.$color-neutral-400};
-  --sc-color--icon-warning: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-600});
-
-  /* Text */
-  --sc-color--text-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400});
-  --sc-color--text-error: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-600});
-  --sc-color--text-inverted: #{colors.$color-white};
-  --sc-color--text-paragraph: #{colors.$color-neutral-400};
-  --sc-color--text-primary: light-dark(#{colors.$color-black}, #{colors.$color-white});
-  --sc-color--text-secondary: #{colors.$color-neutral-400};
-
-  /* Shadows */
-  --sc-color--box-shadow: light-dark(#2f2b431a, #ffffff1a);
-}

package/dist/ui/button/cmp.options-button.svelte

@@ -1,214 +0,0 @@
-<script lang="ts">import { Icon } from '../icon';
-import { default as ButtonBase } from './resources/button-base.svelte';
-import { default as ButtonTheme } from './resources/button-theme.svelte';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
-import { createPopper } from '@popperjs/core';
-let { type = 'button', disabled = false, autofocus = false, variant = null, size = null, optionsPosition = 'bottom-start', optionsOffset = 4, on, children, options, rightOptions } = $props();
-let leftOpened = $state(false);
-let rightOpened = $state(false);
-let leftTriggerRef = $state(null);
-let rightTriggerRef = $state(null);
-const initPopper = (node, triggerEl) => {
-    const popper = createPopper(triggerEl, node, {
-        placement: optionsPosition,
-        modifiers: [
-            {
-                name: 'offset',
-                options: { offset: [0, optionsOffset] }
-            },
-            { name: 'flip' },
-            {
-                name: 'preventOverflow',
-                options: { boundary: document.body, padding: 8 }
-            }
-        ]
-    });
-    return {
-        destroy() {
-            popper.destroy();
-        }
-    };
-};
-const close = () => {
-    leftOpened = false;
-    rightOpened = false;
-};
-$effect(() => {
-    if (leftOpened || rightOpened) {
-        window.addEventListener(/*@wc-ignore*/ 'click', close);
-        return () => {
-            window.removeEventListener(/*@wc-ignore*/ 'click', close);
-        };
-    }
-});
-const toggleLeft = (e) => {
-    e.stopPropagation();
-    if (disabled) {
-        return;
-    }
-    rightOpened = false;
-    leftOpened = !leftOpened;
-};
-const toggleRight = (e) => {
-    e.stopPropagation();
-    if (disabled) {
-        return;
-    }
-    leftOpened = false;
-    rightOpened = !rightOpened;
-};
-</script>
-
-<ButtonTheme variant={variant} size={size}>
-  <div class="options-button" class:options-button--disabled={disabled}>
-    {#if options}
-      <div class="options-button__options">
-        <button
-          class="options-button__options-trigger"
-          type="button"
-          disabled={disabled}
-          aria-label="Options"
-          aria-expanded={leftOpened}
-          bind:this={leftTriggerRef}
-          onclick={toggleLeft}>
-          <span class="options-button__options-trigger-icon"><Icon src={IconChevronDown} /></span>
-        </button>
-        {#if leftOpened && leftTriggerRef}
-          <div class="options-button__dropdown" use:initPopper={leftTriggerRef} role="menu" tabindex="-1">
-            {@render options()}
-          </div>
-        {/if}
-      </div>
-      <span class="options-button__options-separator">&zwj;</span>
-    {/if}
-
-    <div class="options-button__trigger">
-      <ButtonBase type={type} disabled={disabled} autofocus={autofocus} on={on}>
-        {@render children()}
-      </ButtonBase>
-    </div>
-
-    {#if rightOptions}
-      <span class="options-button__options-separator">&zwj;</span>
-      <div class="options-button__options">
-        <button
-          class="options-button__options-trigger"
-          type="button"
-          disabled={disabled}
-          aria-label="Options"
-          aria-expanded={rightOpened}
-          bind:this={rightTriggerRef}
-          onclick={toggleRight}>
-          <span class="options-button__options-trigger-icon"><Icon src={IconChevronDown} /></span>
-        </button>
-        {#if rightOpened && rightTriggerRef}
-          <div class="options-button__dropdown" use:initPopper={rightTriggerRef} role="menu" tabindex="-1">
-            {@render rightOptions()}
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
-</ButtonTheme>
-
-<!--
-@component
-A split button with optional left and/or right dropdown menus, combining a main action button with chevron-triggered option panels.
-
-### CSS Custom Properties
-Inherits all `--sc-kit--button--*` base and variant properties from `Button`.
-
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--options-button--dropdown--min-width` | Minimum width of the dropdown panel | `10em` |
--->
-
-<style>.options-button {
-  --_options-button--font--color: var(--sc-kit--button--font--color, black);
-  --_options-button--font-weight: var(--sc-kit--button--font-weight, 400);
-  --_options-button--text--font-size: var(--sc-kit--button--text--font-size, 0.875em);
-  --_options-button--background: var(--sc-kit--button--background, white);
-  --_options-button--background--hover: var(--sc-kit--button--background--hover, var(--_options-button--background));
-  --_options-button--background--active: var(--sc-kit--button--background--active, var(--_options-button--background));
-  --_options-button--background--disabled: var(--sc-kit--button--background--disabled, var(--_options-button--background));
-  --_options-button--border: var(--sc-kit--button--border, none);
-  --_options-button--border-radius: var(--sc-kit--button--border-radius, 0.25em);
-  --_options-button--box-shadow: var(--sc-kit--button--box-shadow, none);
-  --_options-button--padding--block: var(--sc-kit--button--padding--block, 0);
-  --_options-button--min-width: var(--sc-kit--button--min-width, 0);
-  --_options-button--height: var(--sc-kit--button--height, 2em);
-  --_options-button--separator--border: 1px solid var(--_options-button--font--color);
-  --_options-button--dropdown--min-width: var(--sc-kit--options-button--dropdown--min-width, 10em);
-  font-weight: var(--_options-button--font-weight);
-  color: var(--_options-button--font--color);
-  background: var(--_options-button--background);
-  border: var(--_options-button--border);
-  border-radius: var(--_options-button--border-radius);
-  min-width: var(--_options-button--min-width);
-  height: var(--_options-button--height);
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  white-space: nowrap;
-  box-shadow: var(--_options-button--box-shadow);
-}
-.options-button--disabled {
-  background: var(--_options-button--background--disabled);
-}
-.options-button:not(.options-button--disabled):hover {
-  background: var(--_options-button--background--hover);
-}
-.options-button:not(.options-button--disabled):active {
-  background: var(--_options-button--background--active);
-}
-.options-button__trigger {
-  display: inline-flex;
-  height: 100%;
-  flex: 1;
-  --sc-kit--button--min-width: 100%;
-  --sc-kit--button--box-shadow: none;
-  --sc-kit--button--border: none;
-  --sc-kit--button--border--disabled: none;
-  --sc-kit--button--height: 100%;
-  --sc-kit--button--background: transparent;
-  --sc-kit--button--background--hover: transparent;
-  --sc-kit--button--background--active: transparent;
-  --sc-kit--button--background--disabled: transparent;
-}
-.options-button__options {
-  position: relative;
-  height: 100%;
-  --sc-kit--dropdown-item--min-width: var(--_options-button--dropdown--min-width);
-  --sc-kit--button--min-width: 100%;
-  --sc-kit--button--justify-content: flex-start;
-}
-.options-button__options-trigger {
-  height: 100%;
-  font-size: var(--_options-button--text--font-size);
-  border-radius: var(--_options-button--border-radius);
-  padding: var(--_options-button--padding--block) 0.5em;
-  color: inherit;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-}
-.options-button__options-trigger:disabled {
-  cursor: default;
-}
-.options-button__options-trigger-icon {
-  display: inline-flex;
-  align-items: center;
-  --sc-kit--icon--size: var(--_options-button--text--font-size);
-}
-.options-button__options-separator {
-  border-right: var(--_options-button--separator--border);
-  height: var(--_options-button--text--font-size);
-}
-.options-button__dropdown {
-  position: absolute;
-  z-index: 999;
-  min-width: var(--_options-button--dropdown--min-width);
-  background: light-dark(#ffffff, #000000);
-  box-shadow: 0 2px 10px light-dark(#d9d9d9, hsl(0, 0%, 50%));
-  border-radius: 0.25em;
-}</style>