Update firefox styles

Style range input for firefox.

packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx

@@ -96,6 +96,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
               <div className="w-full flex-auto relative">
                 <audio
                   {...etcProps}
+                  key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
                   controls={!enhanced}
                   ref={mediaControllerRef}
                   onLoadedMetadata={refreshControls}
@@ -104,6 +105,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                   onTimeUpdate={updateSeekFromPlayback}
                 >
                   <source
+                    key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
                     src={fileWithMetadata.url}
                     type={fileWithMetadata.type}
                   />

packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx

@@ -82,6 +82,7 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
               <div className="w-full flex-auto relative">
                 <video
                   {...etcProps}
+                  key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
                   className="sm:absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10"
                   ref={mediaControllerRef}
                   onLoadedMetadata={refreshControls}
@@ -92,6 +93,7 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
                   controls={!enhanced}
                 >
                   <source
+                    key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
                     src={fileWithMetadata.url}
                     type={fileWithMetadata.type}
                   />
@@ -289,11 +291,11 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
                     'disabled:opacity-50 disabled:cursor-not-allowed',
                   )}
                 >
-              <span
-                className="block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded"
-              >
-                Download
-              </span>
+                  <span
+                    className="block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded"
+                  >
+                    Download
+                  </span>
                 </button>
               </fieldset>
             </form>

packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
+import {slider} from './style.module.css';
 
 type SliderDerivedComponent = HTMLInputElement;
 
@@ -24,7 +25,8 @@ export const Slider = React.forwardRef<SliderDerivedComponent, SliderProps>(({
         ref={forwardedRef}
         type="range"
         className={clsx(
-          'w-full h-full bg-inherit slider block text-primary ring-secondary/50',
+          slider,
+          'w-full h-full bg-inherit slider block text-primary ring-secondary/50 rounded-full',
           'focus:text-secondary focus:outline-0 focus:ring-4',
           'active:text-tertiary active:ring-tertiary/50',
         )}

packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/style.module.css

@@ -0,0 +1,85 @@
+.slider {
+  appearance: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  height: 1em;
+  color: rgb(var(--color-primary));
+}
+
+.slider::before {
+  border-radius: 9999px;
+  content: '';
+  display: block;
+  position: absolute;
+  background-color: currentColor;
+  opacity: 0.5;
+  width: 100%;
+  height: 50%;
+  top: 25%;
+}
+
+.slider::-webkit-slider-container {
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.slider::-webkit-slider-runnable-track {
+  appearance: none;
+  height: 100%;
+}
+
+.slider::-moz-range-track {
+  appearance: none;
+  border-radius: 9999px;
+  content: '';
+  display: block;
+  position: absolute;
+  background-color: currentColor;
+  opacity: 0.5;
+  width: 100%;
+  height: 50%;
+  top: 25%;
+}
+
+.slider::-webkit-slider-thumb {
+  border-radius: 9999px;
+  background-color: currentColor;
+  appearance: none;
+  width: 1em;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  z-index: 1;
+  position: relative;
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
+}
+
+.slider::-moz-range-thumb {
+  border-radius: 9999px;
+  background-color: currentColor;
+  appearance: none;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+  z-index: 1;
+  position: relative;
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
+  outline: 0;
+  border: 0;
+}
+
+.slider:focus::-webkit-slider-thumb {
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-secondary) / 50%);
+}
+
+.slider:active::-webkit-slider-thumb {
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
+}
+
+.slider:focus::-moz-range-thumb {
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-secondary) / 50%);
+}
+
+.slider:active::-moz-range-thumb {
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
+}

packages/web-kitchensink-reactnext/src/styles/globals.css

@@ -27,58 +27,6 @@
   }
 }
 
-.slider {
-  @apply rounded-full;
-  appearance: none;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  height: 1em;
-  color: rgb(var(--color-primary));
-}
-
-.slider::before {
-  @apply rounded-full;
-  content: '';
-  display: block;
-  position: absolute;
-  background-color: currentColor;
-  opacity: 0.5;
-  width: 100%;
-  height: 50%;
-  top: 25%;
-}
-
-.slider::-webkit-slider-container {
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.slider::-webkit-slider-runnable-track {
-  appearance: none;
-  height: 100%;
-}
-
-.slider::-webkit-slider-thumb {
-  @apply rounded-full;
-  background-color: currentColor;
-  appearance: none;
-  height: 100%;
-  aspect-ratio: 1 / 1;
-  z-index: 1;
-  position: relative;
-  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
-}
-
-.slider:focus::-webkit-slider-thumb {
-  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-secondary) / 50%);
-}
-
-.slider:active::-webkit-slider-thumb {
-  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
-}
-
 .prism .token.number { color: rgb(var(--color-code-number)); }
 .prism .token.keyword { color: rgb(var(--color-code-keyword)); }
 .prism .token.type { color: rgb(var(--color-code-type)); }
@@ -109,3 +57,7 @@
 .binary-file-preview .xd0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-type)); }
 .binary-file-preview .xe0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-parameter)); }
 .binary-file-preview .xf0 { color: rgb(var(--color-negative)); background-color: rgb(var(--color-code-property)); }
+
+.focus\:outline-0:-moz-focusring {
+  outline: 0;
+}