@vygruppen/spor-react 9.10.0 → 9.10.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.10.0 build
+> @vygruppen/spor-react@9.10.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 512.93 KB
-CJS ⚡️ Build success in 2113ms
-ESM dist/CountryCodeSelect-FVCL47RT.mjs 1.19 KB
+CJS dist/index.js 507.77 KB
+CJS ⚡️ Build success in 2227ms
 ESM dist/index.mjs                      2.11 KB
-ESM dist/chunk-WZYWSOJB.mjs             401.87 KB
-ESM ⚡️ Build success in 2114ms
-DTS ⚡️ Build success in 12728ms
-DTS dist/index.d.ts  342.51 KB
-DTS dist/index.d.mts 342.51 KB
+ESM dist/CountryCodeSelect-CO6P2KH4.mjs 1.19 KB
+ESM dist/chunk-QOPSLFKS.mjs             397.40 KB
+ESM ⚡️ Build success in 2228ms
+DTS ⚡️ Build success in 13445ms
+DTS dist/index.d.ts  343.06 KB
+DTS dist/index.d.mts 343.06 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 9.10.1
+
+### Patch Changes
+
+- 47c0496: Changed icons used in MediaController component
+
 ## 9.10.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-FVCL47RT.mjs → CountryCodeSelect-CO6P2KH4.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-WZYWSOJB.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-QOPSLFKS.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-WZYWSOJB.mjs → chunk-QOPSLFKS.mjs}

@@ -5,7 +5,7 @@ import { forwardRef, Divider as Divider$1, Stack as Stack$1, useMultiStyleConfig
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React73 from 'react';
 import React73__default, { useId, createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
-import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, ArrowLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
+import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, ArrowLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
 import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
 import { useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useProgressBar, useCalendar, useDateRangePicker, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
@@ -3475,7 +3475,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-FVCL47RT.mjs'));
+var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-CO6P2KH4.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React73__default.createElement(Radio$1, { ...props, ref });
 });
@@ -3870,78 +3870,6 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
     }
   ));
 };
-var JumpForwardIcon = (props) => /* @__PURE__ */ React73.createElement(Box, { as: "svg", ...props, viewBox: "0 0 32 30", fill: "none" }, /* @__PURE__ */ React73.createElement(
-  "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"
-  }
-), /* @__PURE__ */ React73.createElement(
-  "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"
-  }
-));
-var JumpBackwardIcon = (props) => /* @__PURE__ */ React73.createElement(Box, { as: "svg", ...props, viewBox: "0 0 32 30", fill: "none" }, /* @__PURE__ */ React73.createElement(
-  "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"
-  }
-), /* @__PURE__ */ React73.createElement(
-  "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"
-  }
-));
-var PlayIcon = (props) => /* @__PURE__ */ React73.createElement(Box, { as: "svg", ...props, fill: "none", viewBox: "0 0 60 60" }, /* @__PURE__ */ React73.createElement(
-  "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"
-  }
-));
-var PauseIcon = (props) => /* @__PURE__ */ React73.createElement(Box, { as: "svg", ...props, viewBox: "0 0 60 60", fill: "none" }, /* @__PURE__ */ React73.createElement(
-  "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"
-  }
-));
-var SkipNextIcon = (props) => /* @__PURE__ */ React73.createElement(Box, { as: "svg", ...props, viewBox: "0 0 30 30", fill: "none" }, /* @__PURE__ */ React73.createElement(
-  "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"
-  }
-));
-var SkipPreviousIcon = (props) => /* @__PURE__ */ React73.createElement(Box, { as: "svg", ...props, viewBox: "0 0 30 30", fill: "none" }, /* @__PURE__ */ React73.createElement(
-  "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"
-  }
-));
-
-// src/media-controller/JumpButton.tsx
 var JumpButton = ({
   direction: direction2,
   isDisabled,
@@ -3962,7 +3890,7 @@ var JumpButton = ({
       disabled: isDisabled,
       ...props
     },
-    direction2 === "forward" ? /* @__PURE__ */ React73__default.createElement(JumpForwardIcon, { sx: styles3.icon }) : /* @__PURE__ */ React73__default.createElement(JumpBackwardIcon, { sx: styles3.icon })
+    direction2 === "forward" ? /* @__PURE__ */ React73__default.createElement(Forward15MediaControllerFill30Icon, { sx: styles3.icon }) : /* @__PURE__ */ React73__default.createElement(Backward15MediaControllerFill30Icon, { sx: styles3.icon })
   );
 };
 var texts17 = createTexts({
@@ -3999,7 +3927,7 @@ var PlayPauseButton = ({
       disabled: isDisabled,
       ...props
     },
-    isPlaying ? /* @__PURE__ */ React73__default.createElement(PauseIcon, { sx: styles3.icon }) : /* @__PURE__ */ React73__default.createElement(PlayIcon, { sx: styles3.icon })
+    isPlaying ? /* @__PURE__ */ React73__default.createElement(PauseMediaControllerFill24Icon, { sx: styles3.icon }) : /* @__PURE__ */ React73__default.createElement(PlayMediaControllerFill24Icon, { sx: styles3.icon })
   );
 };
 var texts18 = createTexts({
@@ -4036,7 +3964,7 @@ var SkipButton = ({
       disabled: isDisabled,
       ...props
     },
-    direction2 === "forward" ? /* @__PURE__ */ React73__default.createElement(SkipNextIcon, { sx: styles3.icon }) : /* @__PURE__ */ React73__default.createElement(SkipPreviousIcon, { sx: styles3.icon })
+    direction2 === "forward" ? /* @__PURE__ */ React73__default.createElement(NextMediaControllerFill30Icon, { sx: styles3.icon }) : /* @__PURE__ */ React73__default.createElement(PreviousMediaControllerFill30Icon, { sx: styles3.icon })
   );
 };
 var texts19 = createTexts({
@@ -12645,15 +12573,20 @@ var config26 = helpers17.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)
         }
       }
     }),
@@ -12678,16 +12611,20 @@ var config26 = helpers17.defineMultiStyleConfig({
     })
   },
   sizes: {
-    sm: {
+    sm: (props) => ({
       container: {
-        fontSize: 42
+        fontSize: props.variant === "play" ? 24 : 42,
+        width: props.variant === "play" ? "2.625rem" : void 0,
+        height: props.variant === "play" ? "2.625rem" : void 0
       }
-    },
-    lg: {
+    }),
+    lg: (props) => ({
       container: {
-        fontSize: 60
+        fontSize: props.variant === "play" ? 38 : 60,
+        width: props.variant === "play" ? "3.75rem" : void 0,
+        height: props.variant === "play" ? "3.75rem" : void 0
       }
-    }
+    })
   }
 });
 var media_controller_button_default = config26;

package/dist/index.d.mts

@@ -5475,31 +5475,40 @@ declare const theme: {
                 };
             }) | undefined;
             sizes?: {
-                sm: {
+                sm: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         fontSize: number;
+                        width: string | undefined;
+                        height: string | undefined;
                     };
                 };
-                lg: {
+                lg: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         fontSize: number;
+                        width: string | undefined;
+                        height: string | undefined;
                     };
                 };
             } | undefined;
             variants?: {
                 play: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
-                        padding: number;
                         _hover: {
+                            backgroundColor: string;
                             color: string;
                         };
                         _active: {
+                            backgroundColor: string;
                             color: string;
                         };
                         _disabled: {
+                            backgroundColor: string;
                             pointerEvents: string;
                             color: string;
                         };
+                        backgroundColor: string;
+                        color: string;
+                        padding: number;
                     };
                 };
                 jumpSkip: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -7288,7 +7297,7 @@ declare const theme: {
                 display: string;
                 borderRadius: string;
             } | {
-                backgroundColor: any;
+                backgroundColor: string;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;

package/dist/index.d.ts

@@ -5475,31 +5475,40 @@ declare const theme: {
                 };
             }) | undefined;
             sizes?: {
-                sm: {
+                sm: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         fontSize: number;
+                        width: string | undefined;
+                        height: string | undefined;
                     };
                 };
-                lg: {
+                lg: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
                         fontSize: number;
+                        width: string | undefined;
+                        height: string | undefined;
                     };
                 };
             } | undefined;
             variants?: {
                 play: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     container: {
-                        padding: number;
                         _hover: {
+                            backgroundColor: string;
                             color: string;
                         };
                         _active: {
+                            backgroundColor: string;
                             color: string;
                         };
                         _disabled: {
+                            backgroundColor: string;
                             pointerEvents: string;
                             color: string;
                         };
+                        backgroundColor: string;
+                        color: string;
+                        padding: number;
                     };
                 };
                 jumpSkip: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -7288,7 +7297,7 @@ declare const theme: {
                 display: string;
                 borderRadius: string;
             } | {
-                backgroundColor: any;
+                backgroundColor: string;
                 _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;

package/dist/index.js

@@ -4624,86 +4624,10 @@ var init_logo = __esm({
     init_VyLogo();
   }
 });
-var JumpForwardIcon, JumpBackwardIcon, PlayIcon, PauseIcon, SkipNextIcon, SkipPreviousIcon;
-var init_icons2 = __esm({
-  "src/media-controller/icons.tsx"() {
-    JumpForwardIcon = (props) => /* @__PURE__ */ React73__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 32 30", fill: "none" }, /* @__PURE__ */ React73__namespace.createElement(
-      "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"
-      }
-    ), /* @__PURE__ */ React73__namespace.createElement(
-      "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"
-      }
-    ));
-    JumpBackwardIcon = (props) => /* @__PURE__ */ React73__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 32 30", fill: "none" }, /* @__PURE__ */ React73__namespace.createElement(
-      "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"
-      }
-    ), /* @__PURE__ */ React73__namespace.createElement(
-      "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"
-      }
-    ));
-    PlayIcon = (props) => /* @__PURE__ */ React73__namespace.createElement(react.Box, { as: "svg", ...props, fill: "none", viewBox: "0 0 60 60" }, /* @__PURE__ */ React73__namespace.createElement(
-      "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"
-      }
-    ));
-    PauseIcon = (props) => /* @__PURE__ */ React73__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 60 60", fill: "none" }, /* @__PURE__ */ React73__namespace.createElement(
-      "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"
-      }
-    ));
-    SkipNextIcon = (props) => /* @__PURE__ */ React73__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 30 30", fill: "none" }, /* @__PURE__ */ React73__namespace.createElement(
-      "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"
-      }
-    ));
-    SkipPreviousIcon = (props) => /* @__PURE__ */ React73__namespace.createElement(react.Box, { as: "svg", ...props, viewBox: "0 0 30 30", fill: "none" }, /* @__PURE__ */ React73__namespace.createElement(
-      "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"
-      }
-    ));
-  }
-});
 exports.JumpButton = void 0; var texts18;
 var init_JumpButton = __esm({
   "src/media-controller/JumpButton.tsx"() {
     init_src();
-    init_icons2();
     exports.JumpButton = ({
       direction: direction2,
       isDisabled,
@@ -4724,7 +4648,7 @@ var init_JumpButton = __esm({
           disabled: isDisabled,
           ...props
         },
-        direction2 === "forward" ? /* @__PURE__ */ React73__namespace.default.createElement(JumpForwardIcon, { sx: styles3.icon }) : /* @__PURE__ */ React73__namespace.default.createElement(JumpBackwardIcon, { sx: styles3.icon })
+        direction2 === "forward" ? /* @__PURE__ */ React73__namespace.default.createElement(sporIconReact.Forward15MediaControllerFill30Icon, { sx: styles3.icon }) : /* @__PURE__ */ React73__namespace.default.createElement(sporIconReact.Backward15MediaControllerFill30Icon, { sx: styles3.icon })
       );
     };
     texts18 = createTexts({
@@ -4747,7 +4671,6 @@ exports.PlayPauseButton = void 0; var texts19;
 var init_PlayPauseButton = __esm({
   "src/media-controller/PlayPauseButton.tsx"() {
     init_src();
-    init_icons2();
     exports.PlayPauseButton = ({
       size: size2 = "lg",
       isPlaying,
@@ -4768,7 +4691,7 @@ var init_PlayPauseButton = __esm({
           disabled: isDisabled,
           ...props
         },
-        isPlaying ? /* @__PURE__ */ React73__namespace.default.createElement(PauseIcon, { sx: styles3.icon }) : /* @__PURE__ */ React73__namespace.default.createElement(PlayIcon, { sx: styles3.icon })
+        isPlaying ? /* @__PURE__ */ React73__namespace.default.createElement(sporIconReact.PauseMediaControllerFill24Icon, { sx: styles3.icon }) : /* @__PURE__ */ React73__namespace.default.createElement(sporIconReact.PlayMediaControllerFill24Icon, { sx: styles3.icon })
       );
     };
     texts19 = createTexts({
@@ -4791,7 +4714,6 @@ exports.SkipButton = void 0; var texts20;
 var init_SkipButton = __esm({
   "src/media-controller/SkipButton.tsx"() {
     init_src();
-    init_icons2();
     exports.SkipButton = ({
       direction: direction2,
       isDisabled,
@@ -4812,7 +4734,7 @@ var init_SkipButton = __esm({
           disabled: isDisabled,
           ...props
         },
-        direction2 === "forward" ? /* @__PURE__ */ React73__namespace.default.createElement(SkipNextIcon, { sx: styles3.icon }) : /* @__PURE__ */ React73__namespace.default.createElement(SkipPreviousIcon, { sx: styles3.icon })
+        direction2 === "forward" ? /* @__PURE__ */ React73__namespace.default.createElement(sporIconReact.NextMediaControllerFill30Icon, { sx: styles3.icon }) : /* @__PURE__ */ React73__namespace.default.createElement(sporIconReact.PreviousMediaControllerFill30Icon, { sx: styles3.icon })
       );
     };
     texts20 = createTexts({
@@ -14328,15 +14250,20 @@ var init_media_controller_button = __esm({
         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: themeTools.mode("icon.disabled.light", "icon.disabled.dark")(props),
+              ...surface("disabled", props)
             }
           }
         }),
@@ -14361,16 +14288,20 @@ var init_media_controller_button = __esm({
         })
       },
       sizes: {
-        sm: {
+        sm: (props) => ({
           container: {
-            fontSize: 42
+            fontSize: props.variant === "play" ? 24 : 42,
+            width: props.variant === "play" ? "2.625rem" : void 0,
+            height: props.variant === "play" ? "2.625rem" : void 0
           }
-        },
-        lg: {
+        }),
+        lg: (props) => ({
           container: {
-            fontSize: 60
+            fontSize: props.variant === "play" ? 38 : 60,
+            width: props.variant === "play" ? "3.75rem" : void 0,
+            height: props.variant === "play" ? "3.75rem" : void 0
           }
-        }
+        })
       }
     });
     media_controller_button_default = config26;

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-WZYWSOJB.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.10.0",
+  "version": "9.10.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

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/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/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>
-);