@vygruppen/spor-react 9.9.0 → 9.10.1

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-TEDOVPXZ.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-QOPSLFKS.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.9.0",
+  "version": "9.10.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@internationalized/date": "^3.0.1",
-    "@vygruppen/spor-design-tokens": ">3.4.0",
+    "@vygruppen/spor-design-tokens": ">3.6.0",
     "@vygruppen/spor-icon-react": ">3.6.0",
     "@vygruppen/spor-loader": ">0.3.1",
     "awesome-phonenumber": "^5.10.0",

package/src/layout/RadioCard.tsx

@@ -1,23 +1,15 @@
 import {
+  Box,
   BoxProps,
   UseRadioProps,
   chakra,
   forwardRef,
-  useRadio,
-  useStyleConfig,
+  useMultiStyleConfig,
 } from "@chakra-ui/react";
-import { dataAttr } from "@chakra-ui/utils";
 import React, { useId } from "react";
 
-export type RadioCardProps = UseRadioProps &
-  BoxProps & {
-    children: React.ReactNode;
-    /** Defaults to "base" */
-    variant: "floating" | "base";
-  };
-
 /**
- * Renders a radio card.
+ * Radio cards are used to present a set of options where only one option can be selected.
  *
  * The most basic version looks like this:
  *
@@ -27,6 +19,14 @@ export type RadioCardProps = UseRadioProps &
  * </RadioCard>
  * ```
  *
+ * In order to use RadioCard outside a RadioCardGroup, you need to pass the `isChecked` and `onChange` props.
+ *
+ * ```tsx
+ * <RadioCard isChecked={true} onChange={(e) => console.log(e.target.value)}>
+ *  Content
+ * </RadioCard>
+ * ```
+ *
  * In order to use RadioCard, you typically want to place these components in a group with several other RadioCards.
  *
  * ```tsx
@@ -59,38 +59,47 @@ export type RadioCardProps = UseRadioProps &
  * ```
  */
 
-export const RadioCard = forwardRef<RadioCardProps, "div">(
-  ({ children, variant = "base", ...props }, ref) => {
-    const { getInputProps, getRadioProps, getRootProps, state } =
-      useRadio(props);
-
-    const styles = useStyleConfig("RadioCard", { variant });
+export type RadioCardProps = UseRadioProps &
+  BoxProps & {
+    children: React.ReactNode;
+    /** Defaults to "base" */
+    variant?: "floating" | "base";
+    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
+    isChecked?: boolean;
+    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  };
 
-    const input = getInputProps({}, ref);
-    const radio = getRadioProps();
+export const RadioCard = forwardRef<RadioCardProps, "div">(
+  ({ children, variant = "base", isChecked, onChange, ...props }, ref) => {
+    const styles = useMultiStyleConfig("RadioCard", { variant });
 
     const id = `radio-card-${useId()}`;
 
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange && onChange(event);
+    };
+
     return (
-      <chakra.label
-        htmlFor={id}
-        {...getRootProps()}
-        aria-label={String(children)}
-      >
-        <chakra.input {...input} id={id} disabled={state.isDisabled} />
-        <chakra.div
-          __css={styles}
-          {...radio}
-          data-checked={dataAttr(state.isChecked)}
-          data-hover={dataAttr(state.isHovered)}
-          data-focus={dataAttr(state.isFocused)}
-          data-active={dataAttr(state.isActive)}
-          data-disabled={dataAttr(state.isDisabled)}
+      <Box as="label" htmlFor={id} aria-label={String(children)} ref={ref}>
+        <chakra.input
+          type="radio"
+          id={id}
+          checked={isChecked}
+          onChange={handleChange}
+          {...props}
+          sx={styles.radioInput}
+        />
+        <Box
           {...props}
+          __css={{
+            ...styles.container,
+            ...(isChecked && styles.checked),
+          }}
         >
           {children}
-        </chakra.div>
-      </chakra.label>
+        </Box>
+      </Box>
     );
   },
 );

package/src/layout/RadioCardGroup.tsx

@@ -4,7 +4,7 @@ import {
   StackDirection,
   Stack,
 } from "@chakra-ui/react";
-import React, { Children } from "react";
+import React from "react";
 import { RadioCard, RadioCardProps } from "./RadioCard";
 
 type RadioCardGroupProps = RadioGroupProps & {
@@ -75,17 +75,21 @@ export const RadioCardGroup = ({
     ...props,
   });
 
-  const group = getRootProps();
+  const rootProps = getRootProps();
 
   return (
-    <Stack direction={direction} {...group}>
+    <Stack direction={direction} {...rootProps}>
       {recursiveMap(children, (child: React.ReactElement) => {
         if (child.type === RadioCard) {
-          const radio = getRadioProps({ value: child.props.value });
+          const radioProps = getRadioProps({ value: child.props.value });
           const variantValue = variant as "base" | "floating" | undefined;
           return React.cloneElement(
             child as React.ReactElement<RadioCardProps>,
-            { ...radio, variant: variantValue, ...props },
+            {
+              ...radioProps,
+              variant: variantValue,
+              ...props,
+            },
           );
         }
         return child;

package/src/media-controller/JumpButton.tsx

@@ -1,7 +1,10 @@
 import { BoxProps, Center, useMultiStyleConfig } from "@chakra-ui/react";
 import React from "react";
 import { createTexts, useTranslation } from "..";
-import { JumpBackwardIcon, JumpForwardIcon } from "./icons";
+import {
+  Backward15MediaControllerFill30Icon,
+  Forward15MediaControllerFill30Icon,
+} from "@vygruppen/spor-icon-react";
 
 type JumpButtonProps = BoxProps & {
   onClick: () => void;
@@ -45,9 +48,9 @@ export const JumpButton = ({
       {...props}
     >
       {direction === "forward" ? (
-        <JumpForwardIcon sx={styles.icon} />
+        <Forward15MediaControllerFill30Icon sx={styles.icon} />
       ) : (
-        <JumpBackwardIcon sx={styles.icon} />
+        <Backward15MediaControllerFill30Icon sx={styles.icon} />
       )}
     </Center>
   );

package/src/media-controller/PlayPauseButton.tsx

@@ -1,7 +1,10 @@
 import { BoxProps, Center, useMultiStyleConfig } from "@chakra-ui/react";
 import React from "react";
 import { createTexts, useTranslation } from "..";
-import { PauseIcon, PlayIcon } from "./icons";
+import {
+  PauseMediaControllerFill24Icon,
+  PlayMediaControllerFill24Icon,
+} from "@vygruppen/spor-icon-react";
 
 type PlayPauseButtonProps = BoxProps & {
   onClick: () => void;
@@ -43,9 +46,9 @@ export const PlayPauseButton = ({
       {...props}
     >
       {isPlaying ? (
-        <PauseIcon sx={styles.icon} />
+        <PauseMediaControllerFill24Icon sx={styles.icon} />
       ) : (
-        <PlayIcon sx={styles.icon} />
+        <PlayMediaControllerFill24Icon sx={styles.icon} />
       )}
     </Center>
   );

package/src/media-controller/SkipButton.tsx

@@ -1,7 +1,10 @@
 import { BoxProps, Center, useMultiStyleConfig } from "@chakra-ui/react";
 import React from "react";
 import { createTexts, useTranslation } from "..";
-import { SkipNextIcon, SkipPreviousIcon } from "./icons";
+import {
+  NextMediaControllerFill30Icon,
+  PreviousMediaControllerFill30Icon,
+} from "@vygruppen/spor-icon-react";
 
 type SkipButtonProps = BoxProps & {
   onClick: () => void;
@@ -42,9 +45,9 @@ export const SkipButton = ({
       {...props}
     >
       {direction === "forward" ? (
-        <SkipNextIcon sx={styles.icon} />
+        <NextMediaControllerFill30Icon sx={styles.icon} />
       ) : (
-        <SkipPreviousIcon sx={styles.icon} />
+        <PreviousMediaControllerFill30Icon sx={styles.icon} />
       )}
     </Center>
   );

package/src/theme/components/media-controller-button.ts

@@ -1,7 +1,7 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy } from "@chakra-ui/theme-tools";
+import { anatomy, mode } from "@chakra-ui/theme-tools";
 import { baseText } from "../utils/base-utils";
-import { brandBackground } from "../utils/brand-utils";
+import { brandBackground, brandText } from "../utils/brand-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
 import { ghostBackground } from "../utils/ghost-utils";
 import { surface } from "../utils/surface-utils";
@@ -38,16 +38,21 @@ const config = helpers.defineMultiStyleConfig({
     play: (props) => ({
       container: {
         padding: 0,
+        ...brandText("default", props),
+        ...brandBackground("default", props),
         _hover: {
-          color: brandBackground("hover", props).backgroundColor,
+          ...brandText("default", props),
+          ...brandBackground("hover", props),
         },
         _active: {
-          color: brandBackground("active", props).backgroundColor,
+          ...brandText("default", props),
+          ...brandBackground("active", props),
         },
 
         _disabled: {
           pointerEvents: "none",
-          color: surface("disabled", props).backgroundColor,
+          color: mode("icon.disabled.light", "icon.disabled.dark")(props),
+          ...surface("disabled", props),
         },
       },
     }),
@@ -72,16 +77,20 @@ const config = helpers.defineMultiStyleConfig({
     }),
   },
   sizes: {
-    sm: {
+    sm: (props) => ({
       container: {
-        fontSize: 42,
+        fontSize: props.variant === "play" ? 24 : 42,
+        width: props.variant === "play" ? "2.625rem" : undefined,
+        height: props.variant === "play" ? "2.625rem" : undefined,
       },
-    },
-    lg: {
+    }),
+    lg: (props) => ({
       container: {
-        fontSize: 60,
+        fontSize: props.variant === "play" ? 38 : 60,
+        width: props.variant === "play" ? "3.75rem" : undefined,
+        height: props.variant === "play" ? "3.75rem" : undefined,
       },
-    },
+    }),
   },
 });
 

package/src/theme/components/pressable-card.ts

@@ -28,6 +28,7 @@ const config = defineStyleConfig({
   }),
   variants: {
     base: (props) => ({
+      cursor: "pointer",
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props),
@@ -42,7 +43,7 @@ const config = defineStyleConfig({
       boxShadow: "sm",
       _hover: {
         ...accentBackground("hover", props),
-        boxShadow: "sm",
+        boxShadow: "md",
       },
       _active: {
         ...accentBackground("active", props),
@@ -51,6 +52,7 @@ const config = defineStyleConfig({
     }),
     floating: (props) => ({
       ...floatingBackground("default", props),
+      ...floatingBorder("default", props),
       boxShadow: "sm",
       _hover: {
         ...floatingBackground("hover", props),
@@ -58,6 +60,7 @@ const config = defineStyleConfig({
         boxShadow: "md",
       },
       _active: {
+        ...floatingBorder("default", props),
         ...floatingBackground("active", props),
         boxShadow: "none",
       },

package/src/theme/components/radio-card.ts

@@ -1,60 +1,99 @@
-import { defineStyleConfig } from "@chakra-ui/react";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyleConfig,
+} from "@chakra-ui/react";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
+import { anatomy } from "@chakra-ui/theme-tools";
+import { outlineBorder } from "../utils/outline-utils";
 
-const config = defineStyleConfig({
+const parts = anatomy("radio-card").parts("container", "checked", "radioInput");
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
   baseStyle: (props: any) => ({
-    appearance: "none",
-    border: "none",
-    overflow: "hidden",
-    fontSize: "inherit",
-    display: "block",
-    borderRadius: "sm",
-    ...focusVisibleStyles(props),
-    _checked: {
-      outline: "1px solid",
-      outlineColor: "greenHaze",
-      ...floatingBackground("active", props),
-      _hover: {
-        ...floatingBackground("active", props),
+    container: {
+      appearance: "none",
+      border: "none",
+      overflow: "hidden",
+      fontSize: "inherit",
+      display: "block",
+      cursor: "pointer",
+      borderRadius: "sm",
+      ...focusVisibleStyles(props),
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      _disabled: {
+        pointerEvents: "none",
+        ...baseBackground("disabled", props),
+        ...baseBorder("disabled", props),
+        ...baseText("disabled", props),
       },
     },
-    _disabled: {
-      pointerEvents: "none",
-      ...baseBackground("disabled", props),
-      ...baseBorder("disabled", props),
-      ...baseText("disabled", props),
+    checked: {
+      outline: "2px solid",
+      ...outlineBorder("focus", props),
+      ...floatingBackground("active", props),
+    },
+    radioInput: {
+      appearance: "none",
+      position: "absolute",
+      opacity: 0,
+      zIndex: -1,
     },
   }),
   variants: {
     base: (props) => ({
-      ...baseBackground("default", props),
-      ...baseBorder("default", props),
-      _hover: {
-        ...baseBackground("hover", props),
-        ...baseBorder("hover", props),
+      container: {
+        ...baseText("default", props),
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        _hover: {
+          ...baseBackground("hover", props),
+          ...baseBorder("hover", props),
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("active", props),
+        },
       },
-      _active: {
-        ...baseBackground("active", props),
+      checked: {
+        _hover: {
+          ...baseBorder("hover", props),
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("active", props),
+        },
       },
     }),
     floating: (props) => ({
-      ...floatingBackground("default", props),
-      boxShadow: "sm",
-      _hover: {
-        ...floatingBackground("hover", props),
-        ...floatingBorder("hover", props),
-        boxShadow: "md",
-      },
-      _active: {
-        ...floatingBackground("active", props),
-        ...floatingBorder("active", props),
+      container: {
+        ...baseText("default", props),
+        ...baseBackground("default", props),
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
+        boxShadow: "sm",
+        _hover: {
+          ...floatingBackground("hover", props),
+          ...floatingBorder("hover", props),
+          boxShadow: "md",
+        },
+        _active: {
+          ...floatingBackground("active", props),
+          ...floatingBorder("active", props),
+        },
       },
-      _checked: {
+      checked: {
+        cursor: "normal",
+
         _hover: {
-          outline: "1px solid",
-          outlineColor: "silver",
+          ...floatingBorder("hover", props),
+        },
+        _active: {
+          ...floatingBackground("active", props),
+          ...floatingBorder("active", props),
         },
       },
     }),

package/src/theme/components/static-card.ts

@@ -1,4 +1,4 @@
-import { defineStyleConfig } from "@chakra-ui/react";
+import { Theme, defineStyleConfig } from "@chakra-ui/react";
 import { colors } from "../foundations";
 import { focusVisibleStyles } from "../utils/focus-utils";
 import { bg } from "../utils/bg-utils";
@@ -33,9 +33,11 @@ type CardThemeProps = {
     | "darkBlue"
     | "darkGreen"
     | "darkYellow";
+  theme: Theme;
+  colorMode: "light" | "dark";
 };
 
-const getColorSchemeBaseProps = (props: any) => {
+const getColorSchemeBaseProps = (props: CardThemeProps) => {
   switch (props.colorScheme) {
     case "white":
       return {

package/src/theme/utils/base-utils.ts

@@ -60,8 +60,11 @@ export function baseBorder(state: BorderState, props: StyleFunctionProps) {
     }
     case "active": {
       return {
-        outline: "2px solid",
-        outlineColor: mode("base.outline.light", "base.outline.dark")(props),
+        outline: "1px solid",
+        outlineColor: mode(
+          "base.outline.default.light",
+          "base.outline.default.dark",
+        )(props),
       };
     }
     case "invalid": {

package/src/theme/utils/outline-utils.ts

@@ -0,0 +1,26 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { State, Subset } from "./types";
+
+type OutlineBorderState = Subset<State, "default" | "error" | "focus">;
+export function outlineBorder(
+  state: OutlineBorderState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    case "error":
+      return {
+        outlineColor: mode("outline.error.light", "outline.error.dark")(props),
+      };
+    case "focus":
+      return {
+        outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),
+      };
+    default:
+      return {
+        outlineColor: mode(
+          "outline.default.light",
+          "outline.default.dark",
+        )(props),
+      };
+  }
+}

package/src/theme/utils/types.ts

@@ -5,7 +5,9 @@ export type State =
   | "focus"
   | "selected"
   | "invalid"
-  | "disabled";
+  | "disabled"
+  | "error"
+  | "focus";
 
 // Helper type to extract subset of union types
 export type Subset<T, U extends T> = T extends U ? T : never;

package/src/media-controller/icons.tsx

@@ -1,80 +0,0 @@
-import { Box, BoxProps } from "@chakra-ui/react";
-import * as React from "react";
-
-export const JumpForwardIcon = (props: BoxProps) => (
-  <Box as="svg" {...props} viewBox="0 0 32 30" fill="none">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M22.388 7.5C20.567 5.967 18.251 5 15.75 5 9.951 5 5.25 9.701 5.25 15.5S9.951 26 15.75 26s10.5-4.701 10.5-10.5a1 1 0 1 1 2 0c0 6.904-5.596 12.5-12.5 12.5s-12.5-5.596-12.5-12.5S8.846 3 15.75 3c3.206 0 6.11 1.31 8.304 3.3l.206-1.441a1 1 0 0 1 1.98.282L25.617 9.5H21.25a1 1 0 1 1 0-2h1.138Z"
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M19.465 14.568c-.4-.232-.863-.348-1.392-.348-.655 0-1.195.172-1.62.516l.18-2.172h2.989c.256 0 .436-.016.54-.048.111-.032.168-.112.168-.24v-1.02h-.012c-.04.04-.117.064-.229.072a7.65 7.65 0 0 1-.515.012H15.42l-.36 4.464 1.273.12c.175-.16.384-.284.623-.372a2.11 2.11 0 0 1 .768-.144c.48 0 .856.136 1.128.408.28.264.42.624.42 1.08 0 .456-.155.832-.468 1.128-.311.296-.703.444-1.175.444a3.04 3.04 0 0 1-.936-.132 3.802 3.802 0 0 1-.756-.348c-.289-.176-.48-.34-.577-.492l-.636.888a.233.233 0 0 0-.047.12c0 .08.043.16.131.24.089.072.225.168.409.288.712.448 1.547.672 2.508.672.576 0 1.091-.124 1.547-.372a2.743 2.743 0 0 0 1.08-1.056 2.97 2.97 0 0 0 .384-1.5c0-.472-.111-.9-.335-1.284a2.314 2.314 0 0 0-.937-.924ZM13.338 19.224a2.954 2.954 0 0 1-.036-.552V11.34h-1.116a2.07 2.07 0 0 1-.576.768c-.248.208-.576.312-.984.312h-.144c-.136 0-.224-.016-.264-.048v.792c0 .128.052.208.156.24.112.032.296.048.552.048h.912v5.364c0 .248.028.424.084.528.056.104.172.156.348.156h1.248v-.012a.478.478 0 0 1-.18-.264Z"
-      fill="currentColor"
-    />
-  </Box>
-);
-
-export const JumpBackwardIcon = (props: BoxProps) => (
-  <Box as="svg" {...props} viewBox="0 0 32 30" fill="none">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M9.612 7.5C11.433 5.967 13.749 5 16.25 5c5.799 0 10.5 4.701 10.5 10.5S22.049 26 16.25 26s-10.5-4.701-10.5-10.5a1 1 0 1 0-2 0c0 6.904 5.596 12.5 12.5 12.5s12.5-5.596 12.5-12.5S23.154 3 16.25 3c-3.206 0-6.11 1.31-8.304 3.3L7.74 4.86a1 1 0 0 0-1.98.282L6.383 9.5h4.367a1 1 0 1 0 0-2H9.612Z"
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M19.965 14.568c-.4-.232-.863-.348-1.392-.348-.655 0-1.195.172-1.62.516l.18-2.172h2.989c.256 0 .436-.016.54-.048.111-.032.168-.112.168-.24v-1.02h-.012c-.04.04-.117.064-.229.072a7.65 7.65 0 0 1-.515.012H15.92l-.36 4.464 1.273.12c.175-.16.384-.284.623-.372a2.11 2.11 0 0 1 .768-.144c.48 0 .856.136 1.128.408.28.264.42.624.42 1.08 0 .456-.155.832-.468 1.128-.311.296-.703.444-1.175.444a3.04 3.04 0 0 1-.936-.132 3.802 3.802 0 0 1-.756-.348c-.288-.176-.48-.34-.576-.492l-.636.888a.233.233 0 0 0-.049.12c0 .08.045.16.133.24.088.072.223.168.407.288.713.448 1.548.672 2.508.672.576 0 1.092-.124 1.548-.372a2.743 2.743 0 0 0 1.08-1.056 2.97 2.97 0 0 0 .384-1.5c0-.472-.111-.9-.335-1.284a2.314 2.314 0 0 0-.937-.924ZM13.838 19.224a2.954 2.954 0 0 1-.036-.552V11.34h-1.116a2.07 2.07 0 0 1-.576.768c-.248.208-.576.312-.984.312h-.144c-.136 0-.224-.016-.264-.048v.792c0 .128.052.208.156.24.112.032.296.048.552.048h.912v5.364c0 .248.028.424.084.528.056.104.172.156.348.156h1.248v-.012a.478.478 0 0 1-.18-.264Z"
-      fill="currentColor"
-    />
-  </Box>
-);
-
-export const PlayIcon = (props: BoxProps) => (
-  <Box as="svg" {...props} fill="none" viewBox="0 0 60 60">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M30 60c16.569 0 30-13.431 30-30C60 13.431 46.569 0 30 0 13.431 0 0 13.431 0 30c0 16.569 13.431 30 30 30Zm-4.25-45.325c-1.97-1.533-4.84-.128-4.84 2.368v25.914c0 2.496 2.87 3.9 4.84 2.368l16.66-12.957a3 3 0 0 0 0-4.736L25.75 14.675Z"
-      fill="currentColor"
-    />
-  </Box>
-);
-
-export const PauseIcon = (props: BoxProps) => (
-  <Box as="svg" {...props} viewBox="0 0 60 60" fill="none">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M60 30c0 16.569-13.431 30-30 30C13.431 60 0 46.569 0 30 0 13.431 13.431 0 30 0c16.569 0 30 13.431 30 30Zm-25.5-9.75a2.25 2.25 0 0 1 4.5 0v19.5a2.25 2.25 0 0 1-4.5 0v-19.5ZM23.25 18A2.25 2.25 0 0 0 21 20.25v19.5a2.25 2.25 0 0 0 4.5 0v-19.5A2.25 2.25 0 0 0 23.25 18Z"
-      fill="currentColor"
-    />
-  </Box>
-);
-
-export const SkipNextIcon = (props: BoxProps) => (
-  <Box as="svg" {...props} viewBox="0 0 30 30" fill="none">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M6.453 4.18A1.695 1.695 0 0 0 4 5.696v18.608c0 1.26 1.326 2.08 2.453 1.516L24 17.047V25a1 1 0 1 0 2 0V5a1 1 0 1 0-2 0v7.952L6.453 4.18ZM23.623 15 6 23.81V6.19l17.623 8.81Z"
-      fill="currentColor"
-    />
-  </Box>
-);
-
-export const SkipPreviousIcon = (props: BoxProps) => (
-  <Box as="svg" {...props} viewBox="0 0 30 30" fill="none">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M23.547 4.18A1.695 1.695 0 0 1 26 5.696v18.608c0 1.26-1.326 2.08-2.453 1.516L6 17.047V25a1 1 0 1 1-2 0V5a1 1 0 1 1 2 0v7.952L23.547 4.18ZM6.377 15 24 23.81V6.19l-17.623 8.81Z"
-      fill="currentColor"
-    />
-  </Box>
-);