@streamscloud/embeddable 12.1.0 → 13.0.0

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

@@ -0,0 +1,123 @@
+<script lang="ts">import { Dropdown } from '../dropdown';
+import { Icon } from '../icon';
+import ButtonBase from './resources/button-base.svelte';
+import ButtonTheme from './resources/button-theme.svelte';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+let { type = 'button', disabled = false, autofocus = false, style = null, size = null, optionsPosition = 'bottom-start', on, children, options, rightOptions } = $props();
+</script>
+
+<ButtonTheme style={style} size={size}>
+  <div class="options-button" class:options-button--disabled={disabled}>
+    {#if options}
+      <div class="options-button__options">
+        <Dropdown position={optionsPosition} disabled={disabled} offset={4}>
+          {#snippet trigger()}
+            <button class="options-button__options-trigger" type="button" disabled={disabled} aria-label="none">
+              <Icon src={IconChevronDown} />
+            </button>
+          {/snippet}
+          {@render options()}
+        </Dropdown>
+      </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">
+        <Dropdown position={optionsPosition} disabled={disabled} offset={4}>
+          {#snippet trigger()}
+            <button class="options-button__options-trigger" type="button" disabled={disabled} aria-label="none">
+              <Icon src={IconChevronDown} />
+            </button>
+          {/snippet}
+          {@render rightOptions()}
+        </Dropdown>
+      </div>
+    {/if}
+  </div>
+</ButtonTheme>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.options-button {
+  --_options-button--font--color: var(--button--font--color, black);
+  --_options-button--font-weight: var(--button--font-weight, 400);
+  --_options-button--text--font-size: var(--button--text--font-size, 0.875em);
+  --_options-button--background: var(--button--background, white);
+  --_options-button--background--hover: var(--button--background--hover, var(--_options-button--background));
+  --_options-button--background--active: var(--button--background--active, var(--_options-button--background));
+  --_options-button--background--disabled: var(--button--background--disabled, var(--_options-button--background));
+  --_options-button--border: var(--button--border, none);
+  --_options-button--border-radius: var(--button--border-radius, 0.25em);
+  --_options-button--box-shadow: var(--button--box-shadow, none);
+  --_options-button--padding--vertical: var(--button--padding--vertical, 0);
+  --_options-button--min-width: var(--button--min-width, 0);
+  --_options-button--height: var(--button--height, 2em);
+  --_options-button--separator--border: 1px solid var(--_options-button--font--color);
+  --_options-button--dropdown--min-width: var(--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__trigger {
+  display: inline-flex;
+  height: 100%;
+  flex: 1;
+  --button--min-width: 100%;
+  --button--box-shadow: none;
+  --button--border: none;
+  --button--border--disabled: none;
+  --button--height: 100%;
+  --button--background: transparent;
+  --button--background--disabled: transparent;
+}
+.options-button__options-trigger {
+  height: 100%;
+  font-size: var(--_options-button--text--font-size);
+  border-radius: var(--_options-button--border-radius);
+}
+.options-button__options {
+  height: 100%;
+  --dropdown-item--min-width: var(--_options-button--dropdown--min-width);
+  --button--min-width: 100%;
+  --button--justify-content: flex-start;
+}
+.options-button__options-trigger {
+  padding: var(--_options-button--padding--vertical) 0.5em;
+}
+.options-button__options-trigger:not(:disabled):hover {
+  background: var(--_options-button--background--hover);
+}
+.options-button__options-trigger:not(:disabled):active {
+  background: var(--_options-button--background--active);
+}
+.options-button__options-separator {
+  border-right: var(--_options-button--separator--border);
+  height: var(--_options-button--text--font-size);
+}</style>

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

@@ -0,0 +1,20 @@
+import { type DropdownPosition } from '../dropdown';
+import type { ButtonStyle, ButtonSize } from './resources/button-types';
+import type { Snippet } from 'svelte';
+type Props = {
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    autofocus?: boolean;
+    style?: ButtonStyle | null;
+    size?: ButtonSize | null;
+    optionsPosition?: DropdownPosition;
+    on?: {
+        click: (e: MouseEvent) => void;
+    };
+    children: Snippet;
+    options?: Snippet;
+    rightOptions?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/button/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Button } from './cmp.button.svelte';
+export { default as OptionsButton } from './cmp.options-button.svelte';
 export { ButtonStyle, ButtonSize } from './resources/button-types';

package/dist/ui/button/index.js

@@ -1,2 +1,3 @@
 export { default as Button } from './cmp.button.svelte';
+export { default as OptionsButton } from './cmp.options-button.svelte';
 export { ButtonStyle, ButtonSize } from './resources/button-types';

package/dist/ui/button/resources/button-theme.svelte

@@ -10,7 +10,6 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   class:button-theme--white={style === ButtonStyle.White}
   class:button-theme--gray={style === ButtonStyle.Gray}
   class:button-theme--green={style === ButtonStyle.Green}
-  class:button-theme--black={style === ButtonStyle.Black}
   class:button-theme--text-only={style === ButtonStyle.TextOnly}
   class:button-theme--transparent-success={style === ButtonStyle.TransparentSuccess}
   class:button-theme--transparent-primary={style === ButtonStyle.TransparentPrimary}
@@ -37,158 +36,22 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
 }
 .button-theme {
   display: contents;
-  /*Style*/
   /*Size*/
 }
-.button-theme--primary {
-  --button--font--color: #ffffff;
-  --button--background: #144ab0;
-  --button--background--hover: #1244a0;
-  --button--background--active: #103a89;
-  --button--background--disabled: #91b3f3;
-}
-:global([data-theme="dark"]) .button-theme--primary {
-  --button--background--disabled: #91b3f3;
-}
 .button-theme--standard {
-  --button--font--color: #2e2e2e;
-  --button--background: #ffffff;
+  --button--font--color: var(--sc-mc-color--text-primary);
+  --button--background: var(--sc-mc-color--bg-button);
   --button--background--hover: #f9fafb;
-  --button--background--active: #f3f4f6;
-  --button--background--disabled: #f3f4f6;
+  --button--background--active: #f2f2f3;
+  --button--background--disabled: #f2f2f3;
   --button--border: 1px solid #e5e7eb;
 }
 :global([data-theme="dark"]) .button-theme--standard {
-  --button--font--color: #ffffff;
-  --button--background: #111827;
-  --button--background--hover: #1f2937;
-  --button--background--active: #374151;
-  --button--background--disabled: #374151;
-}
-:global([data-theme="dark"]) .button-theme--standard {
-  --button--border: 1px solid #4b5563;
-}
-.button-theme--white {
-  --button--font--color: #2e2e2e;
-  --button--background: #ffffff;
-  --button--background--hover: #f9fafb;
-  --button--background--active: #f3f4f6;
-  --button--background--disabled: #f3f4f6;
-}
-:global([data-theme="dark"]) .button-theme--white {
-  --button--font--color: #ffffff;
-  --button--background: #111827;
-  --button--background--hover: #1f2937;
-  --button--background--active: #374151;
-  --button--background--disabled: #374151;
-}
-.button-theme--gray {
-  --button--font--color: #2e2e2e;
-  --button--background: #f3f4f6;
-  --button--background--hover: #f9fafb;
-  --button--background--active: #f3f4f6;
-  --button--background--disabled: #f3f4f6;
-  --button--border: 1px solid #e5e7eb;
-}
-:global([data-theme="dark"]) .button-theme--gray {
-  --button--font--color: #ffffff;
-  --button--background: #374151;
-  --button--background--hover: #1f2937;
-  --button--background--active: #374151;
-  --button--background--disabled: #374151;
-  --button--border: 1px solid #4b5563;
-}
-.button-theme--green {
-  --button--font--color: #0cce6b;
-  --button--background: #066031;
-  --button--background--hover: #088745;
-  --button--background--active: #088745;
-  --button--background--disabled: #0aa454;
-  --button--border: 1px solid #066031;
-}
-:global([data-theme="dark"]) .button-theme--green {
-  --button--font--color: #ffffff;
-  --button--background: #374151;
   --button--background--hover: #1f2937;
   --button--background--active: #374151;
   --button--background--disabled: #374151;
   --button--border: 1px solid #4b5563;
 }
-.button-theme--black {
-  --button--font--color: #ffffff;
-  --button--background: #1c1c1c;
-  --button--background--hover: #1f2937;
-  --button--background--active: #374151;
-  --button--background--disabled: #374151;
-}
-:global([data-theme="dark"]) .button-theme--black {
-  --button--font--color: #2e2e2e;
-  --button--background: #fafafa;
-  --button--background--hover: #f3f4f6;
-  --button--background--active: #e5e7eb;
-  --button--background--disabled: #e5e7eb;
-}
-.button-theme--alert {
-  --button--font--color: #ffffff;
-  --button--background: #e71d36;
-  --button--background--hover: #d4172d;
-  --button--background--active: #b81427;
-  --button--background--disabled: #f6a7b1;
-}
-.button-theme--text-only {
-  --button--font--color: #2e2e2e;
-  --button--background: transparent;
-  --button--background--hover: #f3f4f6;
-  --button--background--active: #e5e7eb;
-  --button--border: none;
-}
-:global([data-theme="dark"]) .button-theme--text-only {
-  --button--font--color: #ffffff;
-  --button--background--hover: #111827;
-  --button--background--active: #1f2937;
-  --button--border: none;
-}
-.button-theme--transparent-success {
-  --button--font--color: #0cce6b;
-  --button--background: #ecfef4;
-  --button--border: 1px solid #0cce6b;
-  --button--background--active: #d4fce7;
-}
-.button-theme--transparent-primary {
-  --button--font--color: #144ab0;
-  --button--background: #f1f6fd;
-  --button--border: 1px solid #144ab0;
-  --button--background--active: #dfe9fb;
-}
-.button-theme--transparent-white {
-  --button--font--color: #ffffff;
-  --button--background: transparent;
-  --button--border: 1px solid #ffffff;
-}
-.button-theme--transparent-gray {
-  --button--font--color: #6b7280;
-  --button--background: #f9fafb;
-  --button--border: 1px solid #6b7280;
-  --button--background--active: #f3f4f6;
-}
-:global([data-theme="dark"]) .button-theme--transparent-gray {
-  --button--font--color: #e5e7eb;
-  --button--background: #1f2937;
-  --button--border: 1px solid #e5e7eb;
-  --button--background--active: #374151;
-}
-.button-theme--transparent-warning {
-  --button--font--color: #ffa62b;
-  --button--background: #fffbeb;
-  --button--border: 1px solid #ffa62b;
-  --button--background--active: #fef3c7;
-}
-.button-theme--transparent-destructive {
-  --button--font--color: #e71d36;
-  --button--background: #fef1f3;
-  --button--border: 1px solid #e71d36;
-  --button--background--active: #fde8ea;
-}
 .button-theme--size-standard {
   --button--height: 2em;
   --button--text--font-size: 0.75em;
@@ -200,6 +63,6 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   --button--text--font-size: 0.9375em;
 }
 .button-theme--size-small {
-  --button--height: 1.5em;
-  --button--text--font-size: 0.625em;
+  --button--height: 1.75em;
+  --button--text--font-size: 0.75em;
 }</style>

package/dist/ui/button/resources/button-types.d.ts

@@ -5,7 +5,6 @@ export declare enum ButtonStyle {
     White = "white",
     Gray = "gray",
     Green = "green",
-    Black = "black",
     TextOnly = "text-only",
     TransparentSuccess = "transparent-success",
     TransparentPrimary = "transparent-primary",

package/dist/ui/button/resources/button-types.js

@@ -6,7 +6,6 @@ export var ButtonStyle;
     ButtonStyle["White"] = "white";
     ButtonStyle["Gray"] = "gray";
     ButtonStyle["Green"] = "green";
-    ButtonStyle["Black"] = "black";
     ButtonStyle["TextOnly"] = "text-only";
     ButtonStyle["TransparentSuccess"] = "transparent-success";
     ButtonStyle["TransparentPrimary"] = "transparent-primary";

package/dist/ui/icon/cmp.icon.svelte

@@ -32,50 +32,30 @@ let { src, color = null } = $props();
   --_icon--size: var(--icon--size, 1.25em);
   --_icon--stroke-color: var(--icon--stroke-color);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
+  /*--_icon--filter: drop-shadow(1px 1px 0 rgb(from var(--_icon--color) calc(255 - r) calc(255 - g) calc(255 - b) / 90%));*/
   --_icon--filter: var(--icon--filter, none);
   display: contents;
 }
 .icon--white {
-  --_icon--color: #ffffff;
-}
-:global([data-theme="dark"]) .icon--white {
-  --_icon--color: #ffffff;
+  --_icon--color: var(--sc-mc-color--icon-overlay);
 }
 .icon--text {
-  --_icon--color: #2e2e2e;
-}
-:global([data-theme="dark"]) .icon--text {
-  --_icon--color: #ffffff;
+  --_icon--color: var(--sc-mc-color--text-primary);
 }
 .icon--gray {
-  --_icon--color: #6b7280;
-}
-:global([data-theme="dark"]) .icon--gray {
-  --_icon--color: #6b7280;
+  --_icon--color: var(--sc-mc-color--icon-secondary);
 }
 .icon--green {
-  --_icon--color: #0cce6b;
-}
-:global([data-theme="dark"]) .icon--green {
-  --_icon--color: #0cce6b;
+  --_icon--color: var(--sc-mc-color--icon-success);
 }
 .icon--red {
-  --_icon--color: #e71d36;
-}
-:global([data-theme="dark"]) .icon--red {
-  --_icon--color: #e71d36;
+  --_icon--color: var(--sc-mc-color--icon-destructive);
 }
 .icon--orange {
-  --_icon--color: #ffa62b;
-}
-:global([data-theme="dark"]) .icon--orange {
-  --_icon--color: #ffa62b;
+  --_icon--color: var(--sc-mc-color--icon-warning);
 }
 .icon--blue {
-  --_icon--color: #144ab0;
-}
-:global([data-theme="dark"]) .icon--blue {
-  --_icon--color: #91b3f3;
+  --_icon--color: var(--sc-mc-color--icon-brand);
 }
 .icon :global(svg) {
   display: inline-block;

package/dist/ui/image/cmp.image-rounded.svelte

@@ -27,19 +27,16 @@ let { src, alt = '', noBorders = false, on } = $props();
     --image--rounded--image--border-radius,
     calc(var(--image--rounded--inner--border-radius_) - var(--image--rounded--inner--border-width_))
   );
-  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, #ffffff);
+  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, var(--sc-mc-color--bg-card));
   --image--rounded--inner--border-radius_: var(
     --image--rounded--inner--border-radius,
     calc(var(--image--rounded--outer--border-radius_) - var(--image--rounded--outer--border-width_))
   );
   --image--rounded--inner--border-width_: var(--image--rounded--inner--border-width, 4px);
-  --image--rounded--outer--border-color_: var(
-    --image--rounded--outer--border-color,
-    linear-gradient(#144ab0, #dfe9fb)
-  );
+  --image--rounded--outer--border-color_: var(--image--rounded--outer--border-color, var(--sc-mc-color--bg-card));
   --image--rounded--outer--border-radius_: var(--image--rounded--outer--border-radius, 0);
   --image--rounded--outer--border-width_: var(--image--rounded--outer--border-width, 2px);
-  --image--rounded--stub--background_: var(--image--rounded--stub--background, #f3f4f6);
+  --image--rounded--stub--background_: var(--image--rounded--stub--background, var(--sc-mc-color--bg-image));
   width: var(--image--rounded--width_);
   height: var(--image--rounded--height_);
   border-radius: var(--image--rounded--outer--border-radius_);
@@ -47,10 +44,6 @@ let { src, alt = '', noBorders = false, on } = $props();
   background: var(--image--rounded--outer--border-color_);
   overflow: hidden;
 }
-:global([data-theme="dark"]) .rounded-img {
-  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, #000000);
-  --image--rounded--stub--background_: var(--image--rounded--stub--background, #374151);
-}
 .rounded-img--stub {
   background: var(--image--rounded--stub--background_);
 }

package/dist/ui/image/cmp.image-stub.svelte

@@ -18,7 +18,7 @@ import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
   }
 }
 .image-stub {
-  --_image-stub--color: var(--image-stub--color, #d1d5db);
+  --_image-stub--color: var(--image-stub--color, var(--sc-mc-color--bg-image));
   width: 100%;
   height: 100%;
   z-index: 2;
@@ -28,7 +28,4 @@ import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
   color: var(--_image-stub--color);
   border: 1px solid var(--_image-stub--color);
   border-radius: 0.25rem;
-}
-:global([data-theme="dark"]) .image-stub {
-  --_image-stub--color: var(--image-stub--color, #374151);
 }</style>

package/dist/ui/image/cmp.image.svelte

@@ -49,7 +49,7 @@ const onLoadError = () => {
   --_image--background: var(--image--background, transparent);
   --_image--border-radius: var(--image--border-radius, 0);
   --_image--object-fit: var(--image--object-fit, cover);
-  --_image--stub--background: var(--image--stub--background, #e5e7eb);
+  --_image--stub--background: var(--image--stub--background, var(--sc-mc-color--bg-image));
   position: relative;
   width: 100%;
   height: 100%;
@@ -57,9 +57,6 @@ const onLoadError = () => {
   border-radius: var(--_image--border-radius);
   background: var(--_image--background);
 }
-:global([data-theme="dark"]) .image {
-  --_image--stub--background: var(--image--stub--background, #374151);
-}
 .image__img {
   width: 100%;
   height: 100%;

package/dist/ui/loading/cmp.loading.svelte

@@ -43,7 +43,7 @@ onMount(() => {
 }
 
 .la-ball-clip-rotate {
-  --loading--spinner-color_: var(--loading--spinner-color, #144ab0);
+  --loading--spinner-color_: var(--loading--spinner-color, var(--sc-mc-color--text-brand));
   color: var(--loading--spinner-color_);
   display: block;
   opacity: 0;
@@ -51,9 +51,6 @@ onMount(() => {
   height: 2em;
   z-index: 10;
 }
-:global([data-theme="dark"]) .la-ball-clip-rotate {
-  --loading--spinner-color_: var(--loading--spinner-color, #5a8dec);
-}
 .la-ball-clip-rotate--visible {
   opacity: 1;
 }

package/dist/ui/player/button/cmp.mobile-player-buttons-group.svelte

@@ -35,9 +35,9 @@ let { actions } = $props();
   justify-content: center;
   align-items: center;
   padding: 1rem;
-  --icon--color: #ffffff;
+  --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 2rem;
-  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
 }
 .mobile-player-buttons-group__action-icon {
   display: block;

package/dist/ui/player/button/cmp.mobile-player-buttons-group.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { PlayerButtonsGroupAction } from './types';
+import type { PlayerButtonDef } from './types';
 type Props = {
-    actions: PlayerButtonsGroupAction[];
+    actions: PlayerButtonDef[];
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -30,8 +30,11 @@ const styles = $derived.by(() => {
   }
 }
 .player-button {
-  --_player-button--color: var(--player-button--color, rgb(from #000000 r g b / 95%));
-  --_player-button--color--inactive: var(--player-button--color--inactive, rgb(from var(--_player-button--color, #000000) r g b / 60%));
+  --_player-button--color: var(--player-button--color, rgb(from var(--sc-mc-color--button-player) r g b / 95%));
+  --_player-button--color--inactive: var(
+    --player-button--color--inactive,
+    rgb(from var(--_player-button--color, var(--sc-mc-color--button-player)) r g b / 60%)
+  );
   --_player-button--icon-scale: 1;
   pointer-events: auto;
   padding: 0.625rem;
@@ -41,7 +44,8 @@ const styles = $derived.by(() => {
   background-color: var(--_player-button--color--inactive);
   transition: background-color 0.5s;
   border-radius: 50%;
-  --icon--color: #ffffff;
+  color: var(--sc-mc-color--text-white);
+  --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 1.75rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }

package/dist/ui/player/button/cmp.player-buttons-group.svelte

@@ -34,10 +34,10 @@ const styles = $derived.by(() => {
   }
 }
 .player-buttons-group {
-  --_player-buttons-group--active-color: var(--player-buttons-group--active-color, rgb(from #000000 r g b / 95%));
+  --_player-buttons-group--active-color: var(--player-buttons-group--active-color, rgb(from var(--sc-mc-color--button-player) r g b / 95%));
   --_player-buttons-group--background-color: var(
     --player-buttons-group--background-color,
-    rgb(from var(--_player-buttons-group--active-color, #000000) r g b / 60%)
+    rgb(from var(--_player-buttons-group--active-color, var(--sc-mc-color--button-player)) r g b / 60%)
   );
   cursor: pointer;
   display: flex;
@@ -56,7 +56,8 @@ const styles = $derived.by(() => {
   align-items: center;
   padding: 0.5625rem;
   border-radius: 1.25rem;
-  --icon--color: #ffffff;
+  color: var(--sc-mc-color--text-white);
+  --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 1.75rem;
   transition: background-color 0.5s;
 }

package/dist/ui/player/button/cmp.player-buttons-group.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { PlayerButtonsGroupAction } from './types';
+import type { PlayerButtonDef } from './types';
 type Props = {
     activeColor: string | null;
     backgroundColor: string | null;
-    actions: PlayerButtonsGroupAction[];
+    actions: PlayerButtonDef[];
     scaleEffect?: boolean;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/player/button/index.d.ts

@@ -1,4 +1,4 @@
 export { default as PlayerButton } from './cmp.player-button.svelte';
 export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
 export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';
-export type { PlayerButtonsGroupAction } from './types';
+export type { PlayerButtonDef } from './types';

package/dist/ui/player/button/types.d.ts

@@ -1,5 +1,5 @@
 import { IconColor } from '../../icon';
-export type PlayerButtonsGroupAction = {
+export type PlayerButtonDef = {
     icon: string;
     iconColor?: IconColor;
     callback: () => void;

package/dist/ui/player/colors/index.d.ts

@@ -1 +1 @@
-export type { PlayerColors } from './player-colors';
+export { PlayerColors, type IPlayerColors } from './player-colors';

package/dist/ui/player/colors/index.js

@@ -1 +1 @@
-export {};
+export { PlayerColors } from './player-colors';

package/dist/ui/player/colors/player-colors.d.ts

@@ -1,11 +1,25 @@
-export type PlayerColors = {
+export type IPlayerColors = {
     brand: string | null;
     button: string | null;
     buttonInactive: string | null;
     cardButton: string | null;
     cardBackground: string | null;
+    menuBackground: string | null;
     playerBackground: string | null;
     price: string | null;
     salePrice: string | null;
     sidebarBackground: string | null;
 } | null;
+export declare class PlayerColors implements NonNullable<IPlayerColors> {
+    brand: string | null;
+    button: string | null;
+    buttonInactive: string | null;
+    cardButton: string | null;
+    cardBackground: string | null;
+    menuBackground: string | null;
+    playerBackground: string | null;
+    price: string | null;
+    salePrice: string | null;
+    sidebarBackground: string | null;
+    constructor(init: IPlayerColors | null | undefined);
+}

package/dist/ui/player/colors/player-colors.js

@@ -1 +1,24 @@
-export {};
+export class PlayerColors {
+    brand;
+    button;
+    buttonInactive;
+    cardButton;
+    cardBackground;
+    menuBackground;
+    playerBackground;
+    price;
+    salePrice;
+    sidebarBackground;
+    constructor(init) {
+        this.brand = init?.brand ?? null;
+        this.button = init?.button ?? null;
+        this.buttonInactive = init?.buttonInactive ?? null;
+        this.cardButton = init?.cardButton ?? null;
+        this.cardBackground = init?.cardBackground ?? null;
+        this.menuBackground = init?.menuBackground ?? null;
+        this.playerBackground = init?.playerBackground ?? null;
+        this.price = init?.price ?? null;
+        this.salePrice = init?.salePrice ?? null;
+        this.sidebarBackground = init?.sidebarBackground ?? null;
+    }
+}