@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

package/dist/stories/components/Form/RangeSlider/RangeSlider.svelte

@@ -1,538 +0,0 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">"use strict";
-let { color = 'primary', size = 'normal', roundness = 1, thumbRoundness = 'full', class: className = '', ref = $bindable(), value = $bindable(), disabled = false, id, min = 0, max = 100, step = 0, name, oninput, onchange, onblur, onfocus, before, after, } = $props();
-const percentageValue = $derived(((value - min) / (max - min)) * 100);
-</script>
-
-<div
-  class:disabled
-  class={[
-    'dodo-ui-RangeSlider',
-    `size--${size}`,
-    `roundness--${roundness}`,
-    `thumbRoundness--${thumbRoundness}`,
-    `color--${color}`,
-    className,
-  ].join(' ')}
-  style={`--dodo-ui-RangeSlider-value-percent: ${percentageValue};`}
->
-  {#if before}
-    <span class="content--before">
-      {@render before()}
-    </span>
-  {/if}
-
-  <div class="RangeSliderContainer">
-    <input
-      type="range"
-      class="NativeRangeSlider"
-      {min}
-      {max}
-      {step}
-      {oninput}
-      {onchange}
-      {onblur}
-      {onfocus}
-      {id}
-      {name}
-      {disabled}
-      bind:this={ref}
-      bind:value
-    />
-  </div>
-
-  {#if after}
-    <span class="content--after">
-      {@render after()}
-    </span>
-  {/if}
-</div>
-
-<style>:global(:root) {
-  --dodo-ui-RangeSlider-track-bg: var(--dodo-color-neutral-200);
-  --dodo-ui-RangeSlider-track-filled-disabled-bg: var(--dodo-color-neutral-300);
-  --dodo-ui-RangeSlider-thumb-disabled-bg: var(--dodo-color-neutral-300);
-  --dodo-ui-RangeSlider-thumb-neutral-bg: var(--dodo-color-neutral-500);
-  --dodo-ui-RangeSlider-thumb-neutral-hover-bg: var(--dodo-color-neutral-600);
-  --dodo-ui-RangeSlider-thumb-neutral-active-bg: var(--dodo-color-neutral-700);
-  --dodo-ui-RangeSlider-track-filled-neutral-bg: var(--dodo-color-neutral-500);
-  --dodo-ui-RangeSlider-thumb-primary-bg: var(--dodo-color-primary-500);
-  --dodo-ui-RangeSlider-thumb-primary-hover-bg: var(--dodo-color-primary-600);
-  --dodo-ui-RangeSlider-thumb-primary-active-bg: var(--dodo-color-primary-700);
-  --dodo-ui-RangeSlider-track-filled-primary-bg: var(--dodo-color-primary-500);
-  --dodo-ui-RangeSlider-thumb-secondary-bg: var(--dodo-color-secondary-500);
-  --dodo-ui-RangeSlider-thumb-secondary-hover-bg: var(--dodo-color-secondary-600);
-  --dodo-ui-RangeSlider-thumb-secondary-active-bg: var(--dodo-color-secondary-700);
-  --dodo-ui-RangeSlider-track-filled-secondary-bg: var(--dodo-color-secondary-500);
-  --dodo-ui-RangeSlider-thumb-safe-bg: var(--dodo-color-safe-500);
-  --dodo-ui-RangeSlider-thumb-safe-hover-bg: var(--dodo-color-safe-600);
-  --dodo-ui-RangeSlider-thumb-safe-active-bg: var(--dodo-color-safe-700);
-  --dodo-ui-RangeSlider-track-filled-safe-bg: var(--dodo-color-safe-500);
-  --dodo-ui-RangeSlider-thumb-warning-bg: var(--dodo-color-warning-500);
-  --dodo-ui-RangeSlider-thumb-warning-hover-bg: var(--dodo-color-warning-600);
-  --dodo-ui-RangeSlider-thumb-warning-active-bg: var(--dodo-color-warning-700);
-  --dodo-ui-RangeSlider-track-filled-warning-bg: var(--dodo-color-warning-500);
-  --dodo-ui-RangeSlider-thumb-danger-bg: var(--dodo-color-danger-500);
-  --dodo-ui-RangeSlider-thumb-danger-hover-bg: var(--dodo-color-danger-600);
-  --dodo-ui-RangeSlider-thumb-danger-active-bg: var(--dodo-color-danger-700);
-  --dodo-ui-RangeSlider-track-filled-danger-bg: var(--dodo-color-danger-500);
-}
-
-:global(.dodo-theme--dark) {
-  --dodo-ui-RangeSlider-track-bg: var(--dodo-color-neutral-400);
-  --dodo-ui-RangeSlider-track-filled-disabled-bg: var(--dodo-color-neutral-500);
-  --dodo-ui-RangeSlider-thumb-disabled-bg: var(--dodo-color-neutral-500);
-  --dodo-ui-RangeSlider-thumb-neutral-bg: var(--dodo-color-neutral-500);
-  --dodo-ui-RangeSlider-thumb-neutral-hover-bg: var(--dodo-color-neutral-400);
-  --dodo-ui-RangeSlider-thumb-neutral-active-bg: var(--dodo-color-neutral-300);
-  --dodo-ui-RangeSlider-track-filled-neutral-bg: var(--dodo-color-neutral-500);
-  --dodo-ui-RangeSlider-thumb-primary-bg: var(--dodo-color-primary-500);
-  --dodo-ui-RangeSlider-thumb-primary-hover-bg: var(--dodo-color-primary-400);
-  --dodo-ui-RangeSlider-thumb-primary-active-bg: var(--dodo-color-primary-300);
-  --dodo-ui-RangeSlider-track-filled-primary-bg: var(--dodo-color-primary-500);
-  --dodo-ui-RangeSlider-thumb-secondary-bg: var(--dodo-color-secondary-500);
-  --dodo-ui-RangeSlider-thumb-secondary-hover-bg: var(--dodo-color-secondary-400);
-  --dodo-ui-RangeSlider-thumb-secondary-active-bg: var(--dodo-color-secondary-300);
-  --dodo-ui-RangeSlider-track-filled-secondary-bg: var(--dodo-color-secondary-500);
-  --dodo-ui-RangeSlider-thumb-safe-bg: var(--dodo-color-safe-500);
-  --dodo-ui-RangeSlider-thumb-safe-hover-bg: var(--dodo-color-safe-400);
-  --dodo-ui-RangeSlider-thumb-safe-active-bg: var(--dodo-color-safe-300);
-  --dodo-ui-RangeSlider-track-filled-safe-bg: var(--dodo-color-safe-500);
-  --dodo-ui-RangeSlider-thumb-warning-bg: var(--dodo-color-warning-500);
-  --dodo-ui-RangeSlider-thumb-warning-hover-bg: var(--dodo-color-warning-400);
-  --dodo-ui-RangeSlider-thumb-warning-active-bg: var(--dodo-color-warning-300);
-  --dodo-ui-RangeSlider-track-filled-warning-bg: var(--dodo-color-warning-500);
-  --dodo-ui-RangeSlider-thumb-danger-bg: var(--dodo-color-danger-500);
-  --dodo-ui-RangeSlider-thumb-danger-hover-bg: var(--dodo-color-danger-400);
-  --dodo-ui-RangeSlider-thumb-danger-active-bg: var(--dodo-color-danger-300);
-  --dodo-ui-RangeSlider-track-filled-danger-bg: var(--dodo-color-danger-500);
-}
-
-.dodo-ui-RangeSlider {
-  display: flex;
-}
-.dodo-ui-RangeSlider .RangeSliderContainer {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-.dodo-ui-RangeSlider .NativeRangeSlider {
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-.dodo-ui-RangeSlider .NativeRangeSlider:focus {
-  outline: none;
-}
-.dodo-ui-RangeSlider .NativeRangeSlider::-webkit-slider-thumb {
-  -webkit-appearance: none; /* Override default look */
-  appearance: none;
-  border: 0;
-  transition: all 150ms;
-}
-.dodo-ui-RangeSlider .NativeRangeSlider::-moz-range-thumb {
-  border: 0;
-  transition: all 150ms;
-}
-.dodo-ui-RangeSlider .content--before {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.dodo-ui-RangeSlider .content--after {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.dodo-ui-RangeSlider.size--normal {
-  min-height: var(--dodo-ui-element-height-normal);
-}
-.dodo-ui-RangeSlider.size--normal .NativeRangeSlider {
-  height: var(--dodo-ui-element-height-normal);
-}
-.dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-webkit-slider-runnable-track {
-  height: var(--dodo-ui-track-element-height-normal);
-}
-.dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-moz-range-track {
-  height: var(--dodo-ui-track-element-height-normal);
-}
-.dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-moz-range-progress {
-  height: var(--dodo-ui-track-element-height-normal);
-}
-.dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-webkit-slider-thumb {
-  margin-top: -0.5em;
-  height: calc(var(--dodo-ui-element-height-normal) / 2);
-  width: calc(var(--dodo-ui-element-height-normal) / 2);
-}
-.dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-moz-range-thumb {
-  height: calc(var(--dodo-ui-element-height-normal) / 2);
-  width: calc(var(--dodo-ui-element-height-normal) / 2);
-}
-.dodo-ui-RangeSlider.size--normal .content--before {
-  margin-right: 12px;
-}
-.dodo-ui-RangeSlider.size--normal .content--after {
-  margin-left: 12px;
-}
-.dodo-ui-RangeSlider.size--small {
-  min-height: var(--dodo-ui-element-height-small);
-}
-.dodo-ui-RangeSlider.size--small .NativeRangeSlider {
-  height: var(--dodo-ui-element-height-small);
-}
-.dodo-ui-RangeSlider.size--small .NativeRangeSlider::-webkit-slider-runnable-track {
-  height: var(--dodo-ui-track-element-height-small);
-}
-.dodo-ui-RangeSlider.size--small .NativeRangeSlider::-moz-range-track {
-  height: var(--dodo-ui-track-element-height-small);
-}
-.dodo-ui-RangeSlider.size--small .NativeRangeSlider::-moz-range-progress {
-  height: var(--dodo-ui-track-element-height-small);
-}
-.dodo-ui-RangeSlider.size--small .NativeRangeSlider::-webkit-slider-thumb {
-  margin-top: -0.45em;
-  height: calc(var(--dodo-ui-element-height-small) / 2);
-  width: calc(var(--dodo-ui-element-height-small) / 2);
-}
-.dodo-ui-RangeSlider.size--small .NativeRangeSlider::-moz-range-thumb {
-  height: calc(var(--dodo-ui-element-height-small) / 2);
-  width: calc(var(--dodo-ui-element-height-small) / 2);
-}
-.dodo-ui-RangeSlider.size--small .content--before {
-  margin-right: 8px;
-}
-.dodo-ui-RangeSlider.size--small .content--after {
-  margin-left: 8px;
-}
-.dodo-ui-RangeSlider.size--large {
-  min-height: var(--dodo-ui-element-height-large);
-}
-.dodo-ui-RangeSlider.size--large .NativeRangeSlider {
-  height: var(--dodo-ui-element-height-large);
-}
-.dodo-ui-RangeSlider.size--large .NativeRangeSlider::-webkit-slider-runnable-track {
-  height: var(--dodo-ui-track-element-height-large);
-}
-.dodo-ui-RangeSlider.size--large .NativeRangeSlider::-moz-range-track {
-  height: var(--dodo-ui-track-element-height-large);
-}
-.dodo-ui-RangeSlider.size--large .NativeRangeSlider::-moz-range-progress {
-  height: var(--dodo-ui-track-element-height-large);
-}
-.dodo-ui-RangeSlider.size--large .NativeRangeSlider::-webkit-slider-thumb {
-  margin-top: -0.6em;
-  height: calc(var(--dodo-ui-element-height-large) / 2);
-  width: calc(var(--dodo-ui-element-height-large) / 2);
-}
-.dodo-ui-RangeSlider.size--large .NativeRangeSlider::-moz-range-thumb {
-  height: calc(var(--dodo-ui-element-height-large) / 2);
-  width: calc(var(--dodo-ui-element-height-large) / 2);
-}
-.dodo-ui-RangeSlider.size--large .content--before {
-  margin-right: 14px;
-}
-.dodo-ui-RangeSlider.size--large .content--after {
-  margin-left: 14px;
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-webkit-slider-runnable-track {
-  background-color: var(--dodo-ui-RangeSlider-track-neutral-bg);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-moz-range-track {
-  background-color: var(--dodo-ui-RangeSlider-track-neutral-bg);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-neutral-active-bg);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider:focus-visible::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-neutral-active-bg);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-neutral-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-neutral-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-moz-range-progress {
-  background: var(--dodo-ui-RangeSlider-track-filled-neutral-bg);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-neutral-bg);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-webkit-slider-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-neutral-hover-bg);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-webkit-slider-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-neutral-active-bg);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-neutral-bg);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-moz-range-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-neutral-hover-bg);
-}
-.dodo-ui-RangeSlider.color--neutral .NativeRangeSlider::-moz-range-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-neutral-active-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-webkit-slider-runnable-track {
-  background-color: var(--dodo-ui-RangeSlider-track-primary-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-moz-range-track {
-  background-color: var(--dodo-ui-RangeSlider-track-primary-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-primary-active-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider:focus-visible::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-primary-active-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-primary-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-primary-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-moz-range-progress {
-  background: var(--dodo-ui-RangeSlider-track-filled-primary-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-primary-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-webkit-slider-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-primary-hover-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-webkit-slider-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-primary-active-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-primary-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-moz-range-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-primary-hover-bg);
-}
-.dodo-ui-RangeSlider.color--primary .NativeRangeSlider::-moz-range-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-primary-active-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-webkit-slider-runnable-track {
-  background-color: var(--dodo-ui-RangeSlider-track-secondary-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-moz-range-track {
-  background-color: var(--dodo-ui-RangeSlider-track-secondary-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-secondary-active-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider:focus-visible::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-secondary-active-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-secondary-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-secondary-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-moz-range-progress {
-  background: var(--dodo-ui-RangeSlider-track-filled-secondary-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-secondary-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-webkit-slider-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-secondary-hover-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-webkit-slider-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-secondary-active-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-secondary-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-moz-range-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-secondary-hover-bg);
-}
-.dodo-ui-RangeSlider.color--secondary .NativeRangeSlider::-moz-range-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-secondary-active-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-webkit-slider-runnable-track {
-  background-color: var(--dodo-ui-RangeSlider-track-safe-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-moz-range-track {
-  background-color: var(--dodo-ui-RangeSlider-track-safe-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-safe-active-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider:focus-visible::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-safe-active-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-safe-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-safe-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-moz-range-progress {
-  background: var(--dodo-ui-RangeSlider-track-filled-safe-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-safe-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-webkit-slider-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-safe-hover-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-webkit-slider-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-safe-active-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-safe-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-moz-range-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-safe-hover-bg);
-}
-.dodo-ui-RangeSlider.color--safe .NativeRangeSlider::-moz-range-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-safe-active-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-webkit-slider-runnable-track {
-  background-color: var(--dodo-ui-RangeSlider-track-warning-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-moz-range-track {
-  background-color: var(--dodo-ui-RangeSlider-track-warning-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-warning-active-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider:focus-visible::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-warning-active-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-warning-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-warning-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-moz-range-progress {
-  background: var(--dodo-ui-RangeSlider-track-filled-warning-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-warning-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-webkit-slider-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-warning-hover-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-webkit-slider-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-warning-active-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-warning-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-moz-range-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-warning-hover-bg);
-}
-.dodo-ui-RangeSlider.color--warning .NativeRangeSlider::-moz-range-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-warning-active-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-webkit-slider-runnable-track {
-  background-color: var(--dodo-ui-RangeSlider-track-danger-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-moz-range-track {
-  background-color: var(--dodo-ui-RangeSlider-track-danger-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider:focus-visible::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-danger-active-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider:focus-visible::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-danger-active-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-danger-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-danger-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-moz-range-progress {
-  background: var(--dodo-ui-RangeSlider-track-filled-danger-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-danger-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-webkit-slider-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-danger-hover-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-webkit-slider-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-danger-active-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-danger-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-moz-range-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-danger-hover-bg);
-}
-.dodo-ui-RangeSlider.color--danger .NativeRangeSlider::-moz-range-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-danger-active-bg);
-}
-.dodo-ui-RangeSlider.roundness--1 .NativeRangeSlider::-webkit-slider-runnable-track {
-  border-radius: var(--dodo-ui-element-roundness-1);
-}
-.dodo-ui-RangeSlider.roundness--1 .NativeRangeSlider::-moz-range-track {
-  border-radius: var(--dodo-ui-element-roundness-1);
-}
-.dodo-ui-RangeSlider.roundness--1 .NativeRangeSlider::-moz-range-progress {
-  border-radius: var(--dodo-ui-element-roundness-1);
-}
-.dodo-ui-RangeSlider.roundness--2 .NativeRangeSlider::-webkit-slider-runnable-track {
-  border-radius: var(--dodo-ui-element-roundness-2);
-}
-.dodo-ui-RangeSlider.roundness--2 .NativeRangeSlider::-moz-range-track {
-  border-radius: var(--dodo-ui-element-roundness-2);
-}
-.dodo-ui-RangeSlider.roundness--2 .NativeRangeSlider::-moz-range-progress {
-  border-radius: var(--dodo-ui-element-roundness-2);
-}
-.dodo-ui-RangeSlider.roundness--3 .NativeRangeSlider::-webkit-slider-runnable-track {
-  border-radius: var(--dodo-ui-element-roundness-3);
-}
-.dodo-ui-RangeSlider.roundness--3 .NativeRangeSlider::-moz-range-track {
-  border-radius: var(--dodo-ui-element-roundness-3);
-}
-.dodo-ui-RangeSlider.roundness--3 .NativeRangeSlider::-moz-range-progress {
-  border-radius: var(--dodo-ui-element-roundness-3);
-}
-.dodo-ui-RangeSlider.thumbRoundness--1 .NativeRangeSlider::-webkit-slider-thumb {
-  border-radius: var(--dodo-ui-element-roundness-1);
-}
-.dodo-ui-RangeSlider.thumbRoundness--1 .NativeRangeSlider::-moz-range-thumb {
-  border-radius: var(--dodo-ui-element-roundness-1);
-}
-.dodo-ui-RangeSlider.thumbRoundness--2 .NativeRangeSlider::-webkit-slider-thumb {
-  border-radius: var(--dodo-ui-element-roundness-2);
-}
-.dodo-ui-RangeSlider.thumbRoundness--2 .NativeRangeSlider::-moz-range-thumb {
-  border-radius: var(--dodo-ui-element-roundness-2);
-}
-.dodo-ui-RangeSlider.thumbRoundness--3 .NativeRangeSlider::-webkit-slider-thumb {
-  border-radius: var(--dodo-ui-element-roundness-3);
-}
-.dodo-ui-RangeSlider.thumbRoundness--3 .NativeRangeSlider::-moz-range-thumb {
-  border-radius: var(--dodo-ui-element-roundness-3);
-}
-.dodo-ui-RangeSlider.thumbRoundness--full .NativeRangeSlider::-webkit-slider-thumb {
-  border-radius: 50%;
-}
-.dodo-ui-RangeSlider.thumbRoundness--full .NativeRangeSlider::-moz-range-thumb {
-  border-radius: 50%;
-}
-.dodo-ui-RangeSlider .NativeRangeSlider[disabled] {
-  cursor: initial;
-}
-.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-webkit-slider-runnable-track {
-  background: linear-gradient(to right, var(--dodo-ui-RangeSlider-track-filled-disabled-bg) 0%, var(--dodo-ui-RangeSlider-track-filled-disabled-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%), var(--dodo-ui-RangeSlider-track-bg) 100%);
-}
-.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-moz-range-progress {
-  background: var(--dodo-ui-RangeSlider-track-filled-disabled-bg);
-}
-.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-webkit-slider-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
-}
-.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-webkit-slider-thumb:hover {
-  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
-}
-.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-webkit-slider-thumb:focus-visible {
-  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
-}
-.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-webkit-slider-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
-}
-.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-moz-range-thumb {
-  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
-}
-.dodo-ui-RangeSlider .NativeRangeSlider[disabled]::-moz-range-thumb:active {
-  background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
-}</style>

package/dist/stories/components/Form/RangeSlider/RangeSlider.svelte.d.ts

@@ -1,48 +0,0 @@
-import type { ComponentSize } from '../../../../types/size.js';
-import type { ComponentRoundness } from '../../../../types/roundness.js';
-import type { ChangeEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
-import type { ComponentColor } from '../../../../types/colors.js';
-import type { Snippet } from 'svelte';
-export interface RangeSliderProps {
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** What color to use? */
-    color?: ComponentColor;
-    /** RangeSlider ref */
-    ref?: HTMLInputElement;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** How round should the thumb border radius be? */
-    thumbRoundness?: ComponentRoundness;
-    /** RangeSlider value */
-    value: number;
-    /** disabled state */
-    disabled?: boolean;
-    /** Id */
-    id?: string;
-    /** name */
-    name?: string;
-    /** Icon before button content */
-    before?: Snippet;
-    /** Icon after button content */
-    after?: Snippet;
-    /** Custom css class*/
-    class?: string;
-    /** oninput event handler */
-    oninput?: FormEventHandler<HTMLInputElement>;
-    /** onchange event handler */
-    onchange?: ChangeEventHandler<HTMLInputElement>;
-    /** onblur event handler */
-    onblur?: FocusEventHandler<HTMLInputElement>;
-    /** onfocus event handler */
-    onfocus?: FocusEventHandler<HTMLInputElement>;
-    /** Min Value */
-    min?: number;
-    /** Max Value */
-    max?: number;
-    /** Value Increment step */
-    step?: number;
-}
-declare const RangeSlider: import("svelte").Component<RangeSliderProps, {}, "ref" | "value">;
-type RangeSlider = ReturnType<typeof RangeSlider>;
-export default RangeSlider;

package/dist/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte

@@ -1,30 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import RangeSlider from '../RangeSlider.svelte';
-  import { storyRangeSliderArgTypes } from '../RangeSlider.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: RangeSlider,
-    tags: ['autodocs'],
-    argTypes: storyRangeSliderArgTypes,
-  });
-</script>
-
-<Story name="Roundness 1" />
-
-<Story name="Roundness 2" args={{ roundness: 2 }} />
-
-<Story name="Roundness 3" args={{ roundness: 3 }} />
-
-<Story name="Roundness 0" args={{ roundness: 0 }} />
-
-<Story name="Thumb Roundness Full" />
-
-<Story name="Thumb Roundness 0" args={{ thumbRoundness: 0 }} />
-
-<Story name="Thumb Roundness 1" args={{ thumbRoundness: 1 }} />
-
-<Story name="Thumb Roundness 2" args={{ thumbRoundness: 2 }} />
-
-<Story name="Thumb Roundness 3" args={{ thumbRoundness: 3 }} />

package/dist/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte.d.ts

@@ -1,26 +0,0 @@
-export default Roundness;
-type Roundness = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Roundness: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/stories/components/Form/RangeSlider/Size/Size.stories.svelte

@@ -1,16 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import RangeSlider from '../RangeSlider.svelte';
-  import { storyRangeSliderArgTypes } from '../RangeSlider.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: RangeSlider,
-    tags: ['autodocs'],
-    argTypes: storyRangeSliderArgTypes,
-  });
-</script>
-
-<Story name="Normal" />
-<Story name="Small" args={{ size: 'small' }} />
-<Story name="Large" args={{ size: 'large' }} />