@vygruppen/spor-react 9.9.0 → 9.10.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.9.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 511.25 KB
-CJS ⚡️ Build success in 2246ms
+CJS dist/index.js 507.77 KB
+CJS ⚡️ Build success in 2227ms
 ESM dist/index.mjs                      2.11 KB
-ESM dist/CountryCodeSelect-U25NF65N.mjs 1.19 KB
-ESM dist/chunk-TEDOVPXZ.mjs             400.45 KB
-ESM ⚡️ Build success in 2246ms
-DTS ⚡️ Build success in 11587ms
-DTS dist/index.d.ts  338.81 KB
-DTS dist/index.d.mts 338.81 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,23 @@
 # @vygruppen/spor-react
 
+## 9.10.1
+
+### Patch Changes
+
+- 47c0496: Changed icons used in MediaController component
+
+## 9.10.0
+
+### Minor Changes
+
+- c29f006: Fixed crusial error with RadioCard and updated styling.
+- c29f006: Fix values on PressableCard
+
+### Patch Changes
+
+- Updated dependencies [c29f006]
+  - @vygruppen/spor-design-tokens@3.6.1
+
 ## 9.9.0
 
 ### Minor Changes

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

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

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

@@ -1,11 +1,11 @@
 import tokens11__default from '@vygruppen/spor-design-tokens';
 import * as tokens11 from '@vygruppen/spor-design-tokens';
 export { tokens11 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, useRadio, useStyleConfig, chakra, Box, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, useMultiStyleConfig, Box, chakra, useStyleConfig, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 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';
@@ -778,39 +778,34 @@ var Stack = forwardRef(
     return /* @__PURE__ */ React73__default.createElement(Stack$1, { ...props, direction: flexDirection, ref });
   }
 );
-
-// ../../node_modules/@chakra-ui/utils/dist/chunk-O3SWHQEE.mjs
-var dataAttr = (condition) => condition ? "" : void 0;
 var RadioCard = forwardRef(
-  ({ children, variant = "base", ...props }, ref) => {
-    const { getInputProps, getRadioProps, getRootProps, state: state2 } = useRadio(props);
-    const styles3 = useStyleConfig("RadioCard", { variant });
-    const input = getInputProps({}, ref);
-    const radio = getRadioProps();
+  ({ children, variant = "base", isChecked, onChange, ...props }, ref) => {
+    const styles3 = useMultiStyleConfig("RadioCard", { variant });
     const id = `radio-card-${useId()}`;
-    return /* @__PURE__ */ React73__default.createElement(
-      chakra.label,
+    const handleChange = (event) => {
+      onChange && onChange(event);
+    };
+    return /* @__PURE__ */ React73__default.createElement(Box, { as: "label", htmlFor: id, "aria-label": String(children), ref }, /* @__PURE__ */ React73__default.createElement(
+      chakra.input,
+      {
+        type: "radio",
+        id,
+        checked: isChecked,
+        onChange: handleChange,
+        ...props,
+        sx: styles3.radioInput
+      }
+    ), /* @__PURE__ */ React73__default.createElement(
+      Box,
       {
-        htmlFor: id,
-        ...getRootProps(),
-        "aria-label": String(children)
+        ...props,
+        __css: {
+          ...styles3.container,
+          ...isChecked && styles3.checked
+        }
       },
-      /* @__PURE__ */ React73__default.createElement(chakra.input, { ...input, id, disabled: state2.isDisabled }),
-      /* @__PURE__ */ React73__default.createElement(
-        chakra.div,
-        {
-          __css: styles3,
-          ...radio,
-          "data-checked": dataAttr(state2.isChecked),
-          "data-hover": dataAttr(state2.isHovered),
-          "data-focus": dataAttr(state2.isFocused),
-          "data-active": dataAttr(state2.isActive),
-          "data-disabled": dataAttr(state2.isDisabled),
-          ...props
-        },
-        children
-      )
-    );
+      children
+    ));
   }
 );
 var RadioCardGroup = ({
@@ -828,14 +823,18 @@ var RadioCardGroup = ({
     onChange,
     ...props
   });
-  const group = getRootProps();
-  return /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2, ...group }, recursiveMap(children, (child) => {
+  const rootProps = getRootProps();
+  return /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2, ...rootProps }, recursiveMap(children, (child) => {
     if (child.type === RadioCard) {
-      const radio = getRadioProps({ value: child.props.value });
+      const radioProps = getRadioProps({ value: child.props.value });
       const variantValue = variant;
       return React73__default.cloneElement(
         child,
-        { ...radio, variant: variantValue, ...props }
+        {
+          ...radioProps,
+          variant: variantValue,
+          ...props
+        }
       );
     }
     return child;
@@ -2691,6 +2690,9 @@ var CheckboxGroup = ({
 }) => {
   return /* @__PURE__ */ React73__default.createElement(CheckboxGroup$1, { ...props }, /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2 }, children));
 };
+
+// ../../node_modules/@chakra-ui/utils/dist/chunk-O3SWHQEE.mjs
+var dataAttr = (condition) => condition ? "" : void 0;
 var ChoiceChip = forwardRef((props, ref) => {
   const {
     children,
@@ -3473,7 +3475,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-U25NF65N.mjs'));
+var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-CO6P2KH4.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React73__default.createElement(Radio$1, { ...props, ref });
 });
@@ -3868,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,
@@ -3960,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({
@@ -3997,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({
@@ -4034,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({
@@ -6514,13 +6444,13 @@ function defineStyle(styles3) {
 function defineStyleConfig(config45) {
   return config45;
 }
-function createMultiStyleConfigHelpers(parts19) {
+function createMultiStyleConfigHelpers(parts20) {
   return {
     definePartsStyle(config45) {
       return config45;
     },
     defineMultiStyleConfig(config45) {
-      return { parts: parts19, ...config45 };
+      return { parts: parts20, ...config45 };
     }
   };
 }
@@ -6683,7 +6613,7 @@ function anatomy(name, map = {}) {
       "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
     );
   }
-  function parts19(...values) {
+  function parts20(...values) {
     assert();
     for (const part of values) {
       map[part] = toPart(part);
@@ -6723,7 +6653,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts19,
+    parts: parts20,
     toPart,
     extend,
     selectors,
@@ -9936,8 +9866,11 @@ function baseBorder(state2, props) {
     }
     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": {
@@ -12640,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)
         }
       }
     }),
@@ -12673,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;
@@ -13022,66 +12964,119 @@ var config32 = helpers23.defineMultiStyleConfig({
   }
 });
 var progress_indicator_default = config32;
-var config33 = defineStyleConfig$1({
+function outlineBorder(state2, props) {
+  switch (state2) {
+    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)
+      };
+  }
+}
+
+// src/theme/components/radio-card.ts
+var parts17 = anatomy$1("radio-card").parts("container", "checked", "radioInput");
+var helpers24 = createMultiStyleConfigHelpers$1(parts17.keys);
+var config33 = helpers24.defineMultiStyleConfig({
   baseStyle: (props) => ({
-    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)
         }
       }
     })
   }
 });
 var radio_card_default = config33;
-var helpers24 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
-var config34 = helpers24.defineMultiStyleConfig({
+var helpers25 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
+var config34 = helpers25.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       _hover: {
@@ -13135,9 +13130,9 @@ var config34 = helpers24.defineMultiStyleConfig({
   })
 });
 var radio_default = config34;
-var parts17 = selectAnatomy.extend("root");
-var helpers25 = createMultiStyleConfigHelpers$1(parts17.keys);
-var config35 = helpers25.defineMultiStyleConfig({
+var parts18 = selectAnatomy.extend("root");
+var helpers26 = createMultiStyleConfigHelpers$1(parts18.keys);
+var config35 = helpers26.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       width: "100%",
@@ -13208,7 +13203,7 @@ var config36 = defineStyleConfig$1({
   }
 });
 var skeleton_default = config36;
-var parts18 = anatomy$1("stepper").parts(
+var parts19 = anatomy$1("stepper").parts(
   "root",
   "container",
   "innerContainer",
@@ -13220,8 +13215,8 @@ var parts18 = anatomy$1("stepper").parts(
   "stepTitle",
   "closeButton"
 );
-var helpers26 = createMultiStyleConfigHelpers$1(parts18.keys);
-var config37 = helpers26.defineMultiStyleConfig({
+var helpers27 = createMultiStyleConfigHelpers$1(parts19.keys);
+var config37 = helpers27.defineMultiStyleConfig({
   baseStyle: {
     root: {
       display: "flex",
@@ -13296,8 +13291,8 @@ var $height3 = cssVar$1("switch-track-height");
 var $diff2 = cssVar$1("switch-track-diff");
 var diffValue2 = calc$1.subtract($width2, $height3);
 var $translateX2 = cssVar$1("switch-thumb-x");
-var helpers27 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
-var config38 = helpers27.defineMultiStyleConfig({
+var helpers28 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
+var config38 = helpers28.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       [$diff2.variable]: diffValue2,
@@ -13391,13 +13386,13 @@ var config38 = helpers27.defineMultiStyleConfig({
   }
 });
 var switch_default = config38;
-var helpers28 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
+var helpers29 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
 var numericStyles2 = {
   "&[data-is-numeric=true]": {
     textAlign: "end"
   }
 };
-var config39 = helpers28.defineMultiStyleConfig({
+var config39 = helpers29.defineMultiStyleConfig({
   baseStyle: (props) => ({
     table: {
       borderCollapse: "collapse",
@@ -13544,8 +13539,8 @@ var config39 = helpers28.defineMultiStyleConfig({
   }
 });
 var table_default = config39;
-var helpers29 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
-var config40 = helpers29.defineMultiStyleConfig({
+var helpers30 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
+var config40 = helpers30.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       display: "flex",
@@ -13795,6 +13790,7 @@ var config44 = defineStyleConfig$1({
   }),
   variants: {
     base: (props) => ({
+      cursor: "pointer",
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props)
@@ -13809,7 +13805,7 @@ var config44 = defineStyleConfig$1({
       boxShadow: "sm",
       _hover: {
         ...accentBackground("hover", props),
-        boxShadow: "sm"
+        boxShadow: "md"
       },
       _active: {
         ...accentBackground("active", props),
@@ -13818,6 +13814,7 @@ var config44 = defineStyleConfig$1({
     }),
     floating: (props) => ({
       ...floatingBackground("default", props),
+      ...floatingBorder("default", props),
       boxShadow: "sm",
       _hover: {
         ...floatingBackground("hover", props),
@@ -13825,6 +13822,7 @@ var config44 = defineStyleConfig$1({
         boxShadow: "md"
       },
       _active: {
+        ...floatingBorder("default", props),
         ...floatingBackground("active", props),
         boxShadow: "none"
       }