@vygruppen/spor-react 12.4.8 → 12.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.4.8",
+  "version": "12.4.10",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/accordion/Accordion.tsx

@@ -75,7 +75,13 @@ export const AccordionItemTrigger = forwardRef<
   HTMLButtonElement,
   AccordionItemTriggerProps
 >(function AccordionItemTrigger(props, ref) {
-  const { startElement, children, headingLevel, ...rest } = props;
+  const {
+    startElement,
+    children,
+    headingLevel,
+    showChevron = true,
+    ...rest
+  } = props;
   warnAboutMismatchingIcon({ icon: startElement });
   const recipe = useSlotRecipe({ key: "accordion" });
   const styles = recipe();
@@ -86,10 +92,11 @@ export const AccordionItemTrigger = forwardRef<
           {startElement && startElement}
           {children}
         </HStack>
-
-        <ChakraAccordion.ItemIndicator>
-          <DropdownDownFill24Icon />
-        </ChakraAccordion.ItemIndicator>
+        {showChevron && (
+          <ChakraAccordion.ItemIndicator>
+            <DropdownDownFill24Icon />
+          </ChakraAccordion.ItemIndicator>
+        )}
       </ChakraAccordion.ItemTrigger>
     </Box>
   );

package/src/accordion/types.ts

@@ -41,6 +41,7 @@ export type AccordionItemTriggerProps = Omit<
   HeadingLevel & {
     /** Icon to be displayed on the left of the trigger button. Use 24px outline. */
     startElement?: React.ReactNode;
+    showChevron?: boolean;
   };
 
 export type AccordionItemContentProps = ChakraAccordion.ItemContentProps & {

package/src/input/SearchInput.tsx

@@ -31,7 +31,7 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
         type="search"
         variant={variant}
         {...props}
-        startElement={<SearchOutline24Icon />}
+        startElement={<SearchOutline24Icon color="icon" />}
         endElement={
           clearButton && (
             <IconButton

package/src/logo/VyLogo.tsx

@@ -1,5 +1,5 @@
-import { BoxProps, chakra } from "@chakra-ui/react";
-import React, { forwardRef, useId } from "react";
+import { chakra } from "@chakra-ui/react";
+import { ComponentProps, forwardRef, useId } from "react";
 
 export const SvgBox = chakra("svg");
 
@@ -27,7 +27,7 @@ const Path = chakra("path", fillRecipe);
 
 const SVGGroup = chakra("g", fillRecipe);
 
-type VyLogoProps = BoxProps & React.SVGProps<SVGSVGElement>;
+type VyLogoProps = ComponentProps<typeof SvgBox>;
 
 export const VyLogo = forwardRef<SVGSVGElement, VyLogoProps>((props, ref) => {
   const id = useId();

package/src/logo/VyLogoPride.tsx

@@ -1,9 +1,8 @@
-import { BoxProps } from "@chakra-ui/react";
-import { forwardRef, useId } from "react";
+import { ComponentProps, forwardRef, useId } from "react";
 
 import { SvgBox } from "./VyLogo";
 
-export type VyLogoPrideProps = BoxProps;
+type VyLogoPrideProps = ComponentProps<typeof SvgBox>;
 
 export const VyLogoPride = forwardRef<SVGSVGElement, VyLogoPrideProps>(
   (props, ref) => {

package/src/theme/recipes/input.ts

@@ -11,6 +11,7 @@ export const inputRecipe = defineRecipe({
     borderRadius: "sm",
     transitionProperty: "common",
     transitionDuration: "fast",
+    color: "text",
     position: "relative",
     paddingX: 3,
     paddingTop: 3,

package/src/theme/tokens/breakpoints.ts

@@ -1,7 +1,6 @@
 import tokens from "@vygruppen/spor-design-tokens";
 
 export const breakpoints = {
-  base: "0px",
   sm: tokens.size.breakpoint.sm,
   md: tokens.size.breakpoint.md,
   lg: tokens.size.breakpoint.lg,