@nypl/design-system-react-components 0.25.12 → 0.25.13

package/src/components/VideoPlayer/VideoPlayer.test.tsx

@@ -181,17 +181,20 @@ describe("VideoPlayer", () => {
 
       render(<VideoPlayer />);
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer requires either the `embedCode` prop or both the `videoType` and `videoId` props."
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; none were passed."
       );
 
       render(<VideoPlayer videoId="http://vimeo.com/474719268" />);
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer also requires the `videoType` prop. You have only set the `videoId` prop."
+        "NYPL Reservoir VideoPlayer: The `videoType` prop is also required. " +
+          "Only the `videoId` prop was set."
       );
 
       render(<VideoPlayer videoType={VideoPlayerTypes.Vimeo} />);
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer also requires the `videoId` prop. You have only set the `videoType` prop."
+        "NYPL Reservoir VideoPlayer: The `videoId` prop is also required. " +
+          "Only the `videoType` prop was set."
       );
 
       render(
@@ -202,7 +205,8 @@ describe("VideoPlayer", () => {
         />
       );
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; all were set."
       );
 
       render(
@@ -212,7 +216,8 @@ describe("VideoPlayer", () => {
         />
       );
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; all were set."
       );
 
       render(
@@ -222,7 +227,14 @@ describe("VideoPlayer", () => {
         />
       );
       expect(warn).toHaveBeenCalledWith(
-        "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+        "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+          "both the `videoType` and `videoId` props; all were set."
+      );
+
+      const embedCode = `<iframe src="https://player./video/421404144?h=5467db7edd"></iframe>`;
+      render(<VideoPlayer embedCode={embedCode} />);
+      expect(warn).toHaveBeenCalledWith(
+        "NYPL Reservoir VideoPlayer: The `embedCode` prop is not configured properly."
       );
     });
   });

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -78,27 +78,32 @@ export default function VideoPlayer(
       : embedCode;
 
   const errorMessage =
-    "<strong>Error:</strong> This video player has not been configured properly. Please contact the site administrator.";
+    "<strong>Error:</strong> This video player has not been configured " +
+    "properly. Please contact the site administrator.";
 
   let isInvalid = false;
   if (!embedCodeFinal && !videoType && !videoId) {
     console.warn(
-      "VideoPlayer requires either the `embedCode` prop or both the `videoType` and `videoId` props."
+      "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+        "both the `videoType` and `videoId` props; none were passed."
     );
     isInvalid = true;
   } else if (!embedCodeFinal && !videoType) {
     console.warn(
-      "VideoPlayer also requires the `videoType` prop. You have only set the `videoId` prop."
+      "NYPL Reservoir VideoPlayer: The `videoType` prop is also required. " +
+        "Only the `videoId` prop was set."
     );
     isInvalid = true;
   } else if (!embedCodeFinal && !videoId) {
     console.warn(
-      "VideoPlayer also requires the `videoId` prop. You have only set the `videoType` prop."
+      "NYPL Reservoir VideoPlayer: The `videoId` prop is also required. " +
+        "Only the `videoType` prop was set."
     );
     isInvalid = true;
   } else if (embedCodeFinal && (videoType || videoId)) {
     console.warn(
-      "VideoPlayer can accept the `embedCode` prop or the `videoType` and `videoId` props. You have set both."
+      "NYPL Reservoir VideoPlayer: Pass in either the `embedCode` prop or " +
+        "both the `videoType` and `videoId` props; all were set."
     );
     isInvalid = true;
   }
@@ -111,7 +116,9 @@ export default function VideoPlayer(
       videoId.includes("youtube") ||
       videoId.includes("vimeo"))
   ) {
-    console.warn("The VideoPlayer `videoId` prop is not configured properly.");
+    console.warn(
+      "NYPL Reservoir VideoPlayer: The `videoId` prop is not configured properly."
+    );
     isInvalid = true;
   }
 
@@ -123,7 +130,7 @@ export default function VideoPlayer(
       !embedCodeFinal.includes("</iframe"))
   ) {
     console.warn(
-      "The VideoPlayer `embedCode` prop is not configured properly."
+      "NYPL Reservoir VideoPlayer: The `embedCode` prop is not configured properly."
     );
     isInvalid = true;
   }

package/src/docs/{Intro.stories.mdx → Welcome.stories.mdx}

@@ -6,7 +6,7 @@ import Heading from "../components/Heading/Heading.tsx";
 import Image from "../components/Image/Image.tsx";
 import DSProvider from "../theme/provider";
 
-<Meta title="Introduction" />
+<Meta title="Welcome" />
 
 # NYPL Design System
 
@@ -15,16 +15,12 @@ export const heroForegroundColor = `var(--nypl-colors-ui-white)`;
 
 <DSProvider>
   <Hero
-    heroType={HeroTypes.FiftyFifty}
-    subHeaderText="With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today."
-    image={
-      <Image
-        src="https://cdn-d8.nypl.org/s3fs-public/styles/2_1_960/public/2020-07/SASB_06_29_2020_Lions_mask-00207%20copy_0.jpeg?h=c8e955ed&itok=n_GLQgoe"
-        alt=""
-      />
-    }
     backgroundColor={heroBackgroundColor}
     foregroundColor={heroForegroundColor}
+    heroType={HeroTypes.FiftyFifty}
+    imageAlt="NYPL Lion with mask on"
+    imageSrc="https://cdn-d8.nypl.org/s3fs-public/styles/2_1_960/public/2020-07/SASB_06_29_2020_Lions_mask-00207%20copy_0.jpeg?h=c8e955ed&itok=n_GLQgoe"
+    subHeaderText="With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today."
   />
 </DSProvider>
 

package/src/{components/Card/CardTypes.tsx → helpers/enums.ts}

@@ -1,4 +1,4 @@
-export enum CardLayouts {
-  Row = "row",
+export enum LayoutTypes {
   Column = "column",
+  Row = "row",
 }

package/src/hooks/tests/useNYPLTheme.test.tsx

@@ -10,7 +10,7 @@ describe("useNYPLTheme", () => {
     const { result } = renderHook(() => useNYPLTheme());
 
     expect(warn).toHaveBeenCalledWith(
-      "The `useNYPLTheme` hook must be used inside of `<DSProvider />`."
+      "NYPL Reservoir useNYPLTheme: hook must be used inside of `<DSProvider />`."
     );
     expect(result.current).toEqual({});
   });

package/src/hooks/useCarouselStyles.stories.mdx

@@ -0,0 +1,10 @@
+import { getCategory } from "../utils/componentCategories";
+
+<Meta title={getCategory("useCarouselStyles")} />
+
+# useCarouselStyles
+
+| Hook Version | DS Version |
+| ------------ | ---------- |
+| Added        | `?`        |
+| Latest       | `?`        |

package/src/hooks/useNYPLTheme.ts

@@ -9,7 +9,7 @@ function useNYPLTheme() {
   const theme = useTheme();
   if (!theme || Object.keys(theme).length === 0) {
     console.warn(
-      "The `useNYPLTheme` hook must be used inside of `<DSProvider />`."
+      "NYPL Reservoir useNYPLTheme: hook must be used inside of `<DSProvider />`."
     );
     return {};
   }

package/src/index.ts

@@ -17,8 +17,9 @@ export {
   VStack,
 } from "@chakra-ui/react";
 export { default as Accordion } from "./components/Accordion/Accordion";
+export { AccordionTypes } from "./components/Accordion/AccordionTypes";
 export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
-export { ColorVariants } from "./components/Breadcrumbs/BreadcrumbsTypes";
+export { BreadcrumbsTypes } from "./components/Breadcrumbs/BreadcrumbsTypes";
 export { default as Button } from "./components/Button/Button";
 export { ButtonTypes } from "./components/Button/ButtonTypes";
 export {
@@ -27,10 +28,8 @@ export {
   CardContent,
   CardHeading,
 } from "./components/Card/Card";
-export { CardLayouts } from "./components/Card/CardTypes";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
-export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGroupLayoutTypes";
 export {
   default as DatePicker,
   FullDateType,
@@ -42,10 +41,7 @@ export { default as Form, FormField, FormRow } from "./components/Form/Form";
 export { FormGaps } from "./components/Form/FormTypes";
 export { GridGaps } from "./components/Grid/GridTypes";
 export { default as Heading } from "./components/Heading/Heading";
-export {
-  HeadingDisplaySizes,
-  HeadingLevels,
-} from "./components/Heading/HeadingTypes";
+export { HeadingSizes, HeadingLevels } from "./components/Heading/HeadingTypes";
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
 export { default as Hero } from "./components/Hero/Hero";
 export { HeroTypes } from "./components/Hero/HeroTypes";
@@ -66,6 +62,7 @@ export {
   ImageTypes,
 } from "./components/Image/ImageTypes";
 export { default as Label } from "./components/Label/Label";
+export { LayoutTypes } from "./helpers/enums";
 export { default as Link } from "./components/Link/Link";
 export { LinkTypes } from "./components/Link/LinkTypes";
 export { default as List } from "./components/List/List";
@@ -83,15 +80,11 @@ export {
 } from "./components/ProgressIndicator/ProgressIndicatorTypes";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
-export { RadioGroupLayoutTypes } from "./components/RadioGroup/RadioGroupLayoutTypes";
 export { default as SearchBar } from "./components/SearchBar/SearchBar";
 export { default as Select } from "./components/Select/Select";
 export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
 export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
-export {
-  SkeletonLoaderImageRatios,
-  SkeletonLoaderLayouts,
-} from "./components/SkeletonLoader/SkeletonLoaderTypes";
+export { SkeletonLoaderImageRatios } from "./components/SkeletonLoader/SkeletonLoaderTypes";
 export { default as Slider } from "./components/Slider/Slider";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
 export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
@@ -117,14 +110,14 @@ export {
   TemplateFooter,
 } from "./components/Template/Template";
 export { default as Text } from "./components/Text/Text";
-export { TextDisplaySizes } from "./components/Text/TextTypes";
+export { TextSizes } from "./components/Text/TextTypes";
 export {
   default as TextInput,
   TextInputRefType,
 } from "./components/TextInput/TextInput";
 export { TextInputTypes } from "./components/TextInput/TextInputTypes";
 export { default as Toggle } from "./components/Toggle/Toggle";
-export { ToggleSizes } from "./components/Toggle/ToggleSizes";
+export { ToggleSizes } from "./components/Toggle/ToggleTypes";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
 export {

package/src/theme/components/accordion.ts

@@ -1,21 +1,16 @@
 const containerStyles = {
-  borderLeftWidth: "1px",
-  borderRightWidth: "1px",
-  borderColor: "ui.gray.medium",
+  border: "none",
   width: "100%",
 };
 const buttonStyles = {
-  border: "none",
-  fontWeight: 500,
-  _hover: {
-    bg: "ui.gray.light-cool",
-  },
+  borderWidth: "1px",
+  fontWeight: "medium",
 };
 const panelStyles = {
-  paddingTop: "xs",
-  paddingRight: "xxxl",
-  paddingLeft: "s",
-  paddingBottom: "xs",
+  padding: "s",
+  borderLeftWidth: "1px",
+  borderRightWidth: "1px",
+  borderBottomWidth: "1px",
 };
 
 const Accordion = {

package/src/theme/components/breadcrumb.ts

@@ -7,6 +7,9 @@ const blogs = {
       color: "ui.gray.xdark",
     },
   },
+  svg: {
+    fill: "ui.black",
+  },
 };
 const booksAndMore = {
   bg: "section.books-and-more.secondary",

package/src/theme/components/card.ts

@@ -6,7 +6,7 @@ const imageSizes = {
   large: { flex: { md: "0 0 360px" } },
 };
 // This is complicated and can be refactored later...
-const getBodyPaddingStyles = ({ border, hasImage, imageAtEnd, isRow }) => {
+const getBodyPaddingStyles = ({ border, hasImage, imageIsAtEnd, isRow }) => {
   let bodyPadding = null;
   if (border) {
     bodyPadding = "s";
@@ -22,7 +22,7 @@ const getBodyPaddingStyles = ({ border, hasImage, imageAtEnd, isRow }) => {
       base: "0 var(--nypl-space-s) var(--nypl-space-s)",
       md: "var(--nypl-space-s) var(--nypl-space-s) var(--nypl-space-s) 0",
     };
-    if (imageAtEnd) {
+    if (imageIsAtEnd) {
       bodyPadding = {
         base: "var(--nypl-space-s) var(--nypl-space-s) 0",
         md: "var(--nypl-space-s) 0 var(--nypl-space-s) var(--nypl-space-s)",
@@ -34,8 +34,14 @@ const getBodyPaddingStyles = ({ border, hasImage, imageAtEnd, isRow }) => {
 const Card = {
   parts: ["body", "heading"],
   baseStyle: (props) => {
-    const { border, center, hasImage, imageAtEnd, layout, mainActionLink } =
-      props;
+    const {
+      border,
+      hasImage,
+      imageIsAtEnd,
+      isCentered,
+      layout,
+      mainActionLink,
+    } = props;
     const isRow = layout === "row";
     const layoutStyles = isRow
       ? {
@@ -46,7 +52,7 @@ const Card = {
           },
           maxWidth: "100%",
           textAlign: "left",
-          alignItems: center ? "center" : null,
+          alignItems: isCentered ? "center" : null,
         }
       : {};
     const baseBorderStyles = border
@@ -58,11 +64,11 @@ const Card = {
     const bodyPadding = getBodyPaddingStyles({
       border,
       hasImage,
-      imageAtEnd,
+      imageIsAtEnd,
       isRow,
     });
     let bodyMargin = null;
-    if (center) {
+    if (isCentered) {
       bodyMargin = "auto";
       if (isRow) {
         bodyMargin = "0";
@@ -72,7 +78,7 @@ const Card = {
       alignItems: "flex-start",
       display: "flex",
       flexFlow: "column wrap",
-      textAlign: center ? "center" : null,
+      textAlign: isCentered ? "center" : null,
       heading: {
         marginBottom: "xs",
         a: mainActionLink ? { color: "ui.black" } : null,
@@ -91,13 +97,15 @@ const Card = {
 
 const CardActions = {
   baseStyle: (props) => {
-    const { bottomBorder, center, layout, topBorder } = props;
+    const { bottomBorder, isCentered, layout, topBorder } = props;
     let justifyContent = null;
-    if (center) {
-      justifyContent = "center";
-    } else if (layout === "row") {
+    // Only center in the column layout.
+    if (layout === "row") {
       justifyContent = "left";
+    } else if (isCentered) {
+      justifyContent = "center";
     }
+
     const topBorderStyles = topBorder
       ? {
           borderTop: "1px solid",
@@ -135,30 +143,31 @@ const CardContent = {
 };
 
 const CardImage = {
-  baseStyle: ({ center, imageAtEnd, imageSize, layout }) => {
+  baseStyle: ({ imageIsAtEnd, isCentered, size, layout }) => {
     // These sizes are only for the "row" layout.
-    const size = imageSizes[imageSize] || {};
+    const imageSize = imageSizes[size] || {};
     const layoutStyles =
       layout === "row"
         ? {
             flex: { md: "0 0 225px" },
             maxWidth: { base: "100%", md: "50%" },
             textAlign: "left",
-            alignItems: center ? "center" : null,
+            alignItems: isCentered ? "center" : null,
             margin: {
-              base: imageAtEnd ? "var(--nypl-space-m) 0 0" : null,
-              md: imageAtEnd
+              base: imageIsAtEnd ? "var(--nypl-space-m) 0 0" : null,
+              md: imageIsAtEnd
                 ? "0 0 0 var(--nypl-space-m)"
                 : "0 var(--nypl-space-m) 0 0",
             },
             width: { base: "100%", md: null },
-            ...size,
+            marginBottom: ["xs", "xs"],
+            ...imageSize,
           }
         : {
             marginBottom: "xs",
             width: "100%",
           };
-    const imageAtEndStyles = imageAtEnd
+    const imageIsAtEndStyles = imageIsAtEnd
       ? {
           marginBottom: "0",
           marginTop: "s",
@@ -167,7 +176,7 @@ const CardImage = {
       : {};
 
     return {
-      ...imageAtEndStyles,
+      ...imageIsAtEndStyles,
       ...layoutStyles,
     };
   },

package/src/theme/components/checkboxGroup.ts

@@ -2,7 +2,9 @@ import { checkboxRadioGroupStyles } from "./global";
 
 const CheckboxGroup = {
   parts: ["helper", "stack"],
-  baseStyle: checkboxRadioGroupStyles,
+  baseStyle: ({ isFullWidth = false }) => ({
+    ...checkboxRadioGroupStyles(isFullWidth),
+  }),
 };
 
 export default CheckboxGroup;

package/src/theme/components/global.ts

@@ -21,6 +21,7 @@ const checkboxRadioLabelStyles = {
   fontWeight: "text.default",
   marginBottom: "0",
   marginLeft: "xs",
+  width: "100%",
   _disabled: {
     color: "ui.gray.dark",
     opacity: 1,
@@ -44,14 +45,14 @@ const checkboxRadioHelperStyle = {
     fontStyle: "italic",
   },
 };
-const checkboxRadioGroupStyles = {
+const checkboxRadioGroupStyles = (isFullWidth = false) => ({
   helper: {
     marginTop: "s",
   },
   stack: {
-    width: "fit-content",
+    width: isFullWidth ? "100%" : "fit-content",
   },
-};
+});
 // Used in `Label` and `Fieldset`.
 const labelLegendText = {
   alignItems: "baseline",

package/src/theme/components/hero.ts

@@ -143,7 +143,7 @@ const campaign = {
   alignItems: "center",
   display: "flex",
   justifyContent: "center",
-  marginBottom: "xxl",
+  marginBottom: ["0", "0", "xxl"],
   minHeight: "300px",
   overflow: "visible",
   padding: {

package/src/theme/components/icon.ts

@@ -1,8 +1,8 @@
 const svgBase = {
   display: "inline-block",
   fill: "currentColor",
-  width: "24px",
-  height: "24px",
+  width: "auto",
+  height: "100%",
 };
 const align = {
   none: {},
@@ -40,6 +40,9 @@ const size = {
     height: "var(--nypl-space-m)",
     width: "var(--nypl-space-m)",
   },
+  default: {
+    width: "100%",
+  },
   medium: {
     height: "1.125rem",
     width: "1.125rem",

package/src/theme/components/image.ts

@@ -85,6 +85,7 @@ const CustomImage = {
     },
     figcaption: {
       fontStyle: "italic",
+      fontSize: "text.tag",
     },
     img: {
       display: "block",
@@ -96,7 +97,6 @@ const CustomImage = {
     },
     captionWrappers: {
       marginBottom: "xxs",
-      fontSize: "text.caption",
     },
   }),
 };

package/src/theme/components/list.ts

@@ -10,7 +10,7 @@ const List = {
     padding: noStyling ? "0" : null,
     display: inline ? "flex" : null,
     li: {
-      marginRight: inline ? "m" : null,
+      marginRight: inline ? "xs" : null,
       listStyleType: inline ? "none" : null,
       _notFirst: {
         marginTop: inline ? null : "xxs",

package/src/theme/components/notification.ts

@@ -2,7 +2,7 @@ import { NotificationTypes } from "../../components/Notification/NotificationTyp
 
 const Notification = {
   parts: ["container", "dismissibleButton", "icon"],
-  baseStyle: ({ centered, dismissible, noMargin, notificationType }) => {
+  baseStyle: ({ dismissible, isCentered, noMargin, notificationType }) => {
     let bg = "ui.status.primary";
     if (
       notificationType === NotificationTypes.Announcement ||
@@ -15,7 +15,7 @@ const Notification = {
       display: "flex",
       fontSize: "-1", // slightly smaller than the default size
       position: "relative",
-      textAlign: centered ? "center" : null,
+      textAlign: isCentered ? "center" : null,
       borderRadius: noMargin ? "0" : "4px",
       margin: noMargin ? "0" : "s",
       container: {
@@ -23,7 +23,7 @@ const Notification = {
         maxWidth: "var(--nypl-breakpoint-xl)",
         padding: "s",
         paddingRight: dismissible ? "l" : null,
-        paddingLeft: centered && dismissible ? "l" : null,
+        paddingLeft: isCentered && dismissible ? "l" : null,
         width: "100%",
       },
       dismissibleButton: {
@@ -81,7 +81,7 @@ const NotificationContent = {
 
 const NotificationHeading = {
   parts: ["heading"],
-  baseStyle: ({ centered, icon, notificationType }) => {
+  baseStyle: ({ icon, isCentered, notificationType }) => {
     let color = "ui.black";
     if (notificationType === NotificationTypes.Announcement) {
       color = "section.research.secondary";
@@ -91,7 +91,7 @@ const NotificationHeading = {
     return {
       display: "flex",
       marginBottom: "xxs",
-      justifyContent: centered ? "center" : null,
+      justifyContent: isCentered ? "center" : null,
       heading: {
         marginBottom: "0",
         marginTop: icon ? "xxxs" : "0",

package/src/theme/components/pagination.ts

@@ -1,7 +1,6 @@
 const Pagination = {
   parts: ["link"],
   baseStyle: {
-    marginBottom: "l",
     alignItems: "stretch",
     display: "flex",
     width: "100%",
@@ -9,10 +8,8 @@ const Pagination = {
       lineHeight: "1.15",
       textDecoration: "none",
     },
-    li: {
-      _first: {
-        marginTop: "xxs",
-      },
+    ul: {
+      marginBottom: "0",
     },
   },
 };

package/src/theme/components/progressIndicator.ts

@@ -15,8 +15,8 @@ const ProgressIndicator = {
         // Note: we have to target the SVG HTMl elements in order
         // to override the default styles.
         svg: {
-          height: size === ProgressIndicatorSizes.Small ? "24px" : "48px",
-          width: size === ProgressIndicatorSizes.Small ? "24px" : "48px",
+          height: size === ProgressIndicatorSizes.Default ? "48px" : "24px",
+          width: size === ProgressIndicatorSizes.Default ? "48px" : "24px",
           display: "block",
           circle: {
             _first: {
@@ -44,7 +44,7 @@ const ProgressIndicator = {
         bg: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
         height: {
           base: "4px",
-          md: size === ProgressIndicatorSizes.Small ? "4px" : "8px",
+          md: size === ProgressIndicatorSizes.Default ? "8px" : "4px",
         },
       },
       linearContainer: {

package/src/theme/components/radioGroup.ts

@@ -2,7 +2,9 @@ import { checkboxRadioGroupStyles } from "./global";
 
 const RadioGroup = {
   parts: ["helper", "stack"],
-  baseStyle: checkboxRadioGroupStyles,
+  baseStyle: ({ isFullWidth = false }) => ({
+    ...checkboxRadioGroupStyles(isFullWidth),
+  }),
 };
 
 export default RadioGroup;

package/src/theme/components/select.ts

@@ -29,6 +29,12 @@ const Select = {
   parts: ["select", "helper"],
   baseStyle: {
     marginBottom: "xs",
+    // The backgroundColor set to "ui.white" hides the arrow SVG icon when
+    // the component is focused. The background is added for dark mode and
+    // so we need to add specific selector.
+    ".chakra-select__icon-wrapper": {
+      zIndex: "9999",
+    },
     helper: {
       ...helperTextMargin,
     },