@navikt/ds-react 7.6.0 → 7.7.0

package/src/form/combobox/FilteredOptions/AddNewOption.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
 import { BodyShort, Label } from "../../../typography";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";
@@ -22,6 +23,7 @@ const AddNewOption = () => {
   } = useFilteredOptionsContext();
   const { isMultiSelect, selectedOptions, toggleOption } =
     useSelectedOptionsContext();
+  const translate = useI18n("Combobox");
   return (
     <li
       tabIndex={-1}
@@ -51,7 +53,7 @@ const AddNewOption = () => {
     >
       <PlusIcon aria-hidden />
       <BodyShort size={size}>
-        Legg til{" "}
+        {translate("addOption")}{" "}
         <Label as="span" size={size}>
           &#8220;{searchTerm}&#8221;
         </Label>

package/src/form/combobox/FilteredOptions/LoadingMessage.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Loader } from "../../../loader";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
 
@@ -7,12 +8,13 @@ const LoadingMessage = () => {
   const {
     inputProps: { id },
   } = useInputContext();
+  const translate = useI18n("Combobox");
   return (
     <div
       className="navds-combobox__list-item--loading"
       id={filteredOptionsUtil.getIsLoadingId(id)}
     >
-      <Loader title="Søker..." />
+      <Loader title={translate("loading")} />
     </div>
   );
 };

package/src/form/combobox/FilteredOptions/MaxSelectedMessage.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";
@@ -8,6 +9,10 @@ const MaxSelectedMessage = () => {
     inputProps: { id },
   } = useInputContext();
   const { maxSelected, selectedOptions } = useSelectedOptionsContext();
+  const translate = useI18n(
+    "Combobox",
+    maxSelected?.message ? { maxSelected: maxSelected.message } : undefined,
+  );
 
   if (!maxSelected) {
     return null;
@@ -18,8 +23,10 @@ const MaxSelectedMessage = () => {
       className="navds-combobox__list-item--max-selected"
       id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
     >
-      {maxSelected.message ??
-        `${selectedOptions.length} av ${maxSelected.limit} er valgt.`}
+      {translate("maxSelected", {
+        selected: selectedOptions.length,
+        limit: maxSelected.limit,
+      })}
     </div>
   );
 };

package/src/form/combobox/Input/Input.context.tsx

@@ -15,7 +15,7 @@ interface InputContextValue extends FormFieldType {
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   shouldAutocomplete?: boolean;
-  toggleOpenButtonRef: React.RefObject<HTMLButtonElement>;
+  toggleOpenButtonRef: React.RefObject<HTMLDivElement>;
   hideCaret: boolean;
   setHideCaret: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -72,7 +72,7 @@ const InputProvider = ({ children, value: props }: Props) => {
     "comboboxfield",
   );
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const toggleOpenButtonRef = useRef<HTMLButtonElement>(null);
+  const toggleOpenButtonRef = useRef<HTMLDivElement>(null);
   const [internalValue, setInternalValue] = useState<string>(defaultValue);
   const [hideCaret, setHideCaret] = useState(false);
 

package/src/form/combobox/Input/InputController.tsx

@@ -3,6 +3,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { useMergeRefs } from "../../../util/hooks";
+import { useI18n } from "../../../util/i18n/i18n.context";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import SelectedOptions from "../SelectedOptions/SelectedOptions";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -11,7 +12,6 @@ import Input from "./Input";
 import { useInputContext } from "./Input.context";
 import ToggleListButton from "./ToggleListButton";
 
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 export const InputController = forwardRef<
   HTMLInputElement,
   Omit<
@@ -31,7 +31,6 @@ export const InputController = forwardRef<
     clearButton = true,
     clearButtonLabel,
     toggleListButton = true,
-    toggleListButtonLabel,
     inputClassName,
     shouldShowSelectedOptions = true,
     ...rest
@@ -53,7 +52,13 @@ export const InputController = forwardRef<
 
   const mergedInputRef = useMergeRefs(inputRef, ref);
 
+  const translate = useI18n(
+    "Combobox",
+    clearButtonLabel ? { clear: clearButtonLabel } : undefined,
+  );
+
   return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       className={cl("navds-combobox__wrapper-inner navds-text-field__input", {
         "navds-combobox__wrapper-inner--virtually-unfocused":
@@ -83,24 +88,16 @@ export const InputController = forwardRef<
       )}
       <div>
         {value && clearButton && (
-          <button
-            type="button"
+          <div
             onClick={clearInput}
             className="navds-combobox__button-clear"
-            tabIndex={-1}
+            aria-hidden
+            title={translate("clear")}
           >
-            <span className="navds-sr-only">
-              {clearButtonLabel ? clearButtonLabel : "Tøm"}
-            </span>
-            <XMarkIcon aria-hidden />
-          </button>
-        )}
-        {toggleListButton && (
-          <ToggleListButton
-            toggleListButtonLabel={toggleListButtonLabel}
-            ref={toggleOpenButtonRef}
-          />
+            <XMarkIcon />
+          </div>
         )}
+        {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
       </div>
     </div>
   );

package/src/form/combobox/Input/ToggleListButton.tsx

@@ -3,38 +3,22 @@ import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "./Input.context";
 
-interface ToggleListButtonProps {
-  toggleListButtonLabel?: string;
-}
-
-export const ToggleListButton = forwardRef<
-  HTMLButtonElement,
-  ToggleListButtonProps
->(({ toggleListButtonLabel }, ref) => {
+export const ToggleListButton = forwardRef<HTMLDivElement>((_, ref) => {
   const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
   const { focusInput } = useInputContext();
+
   return (
-    <button
-      type="button"
-      onPointerUp={() => {
+    <div
+      ref={ref}
+      onClick={() => {
         toggleIsListOpen();
         focusInput();
       }}
-      onKeyDown={({ key }) => key === "Enter" && toggleIsListOpen()}
       className="navds-combobox__button-toggle-list"
-      aria-expanded={isListOpen}
-      tabIndex={-1}
-      ref={ref}
+      aria-hidden
     >
-      <span className="navds-sr-only">
-        {toggleListButtonLabel ?? "Alternativer"}
-      </span>
-      {isListOpen ? (
-        <ChevronUpIcon aria-hidden />
-      ) : (
-        <ChevronDownIcon aria-hidden />
-      )}
-    </button>
+      {isListOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+    </div>
   );
 });
 

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -14,12 +14,6 @@ const Option = ({ option }: { option: ComboboxOption }) => {
   const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
   const { focusInput, readOnly, inputProps } = useInputContext();
 
-  const onClick = (e) => {
-    e.stopPropagation();
-    removeSelectedOption(option);
-    focusInput();
-  };
-
   if (!isMultiSelect) {
     return (
       <div className="navds-combobox__selected-options--no-bg">
@@ -28,12 +22,24 @@ const Option = ({ option }: { option: ComboboxOption }) => {
     );
   }
 
-  return readOnly || inputProps.disabled ? (
-    <Chips.Toggle variant="neutral" checkmark={false} as="div">
+  if (readOnly || inputProps.disabled) {
+    return (
+      <Chips.Toggle variant="neutral" checkmark={false} as="div">
+        {option.label}
+      </Chips.Toggle>
+    );
+  }
+
+  return (
+    <Chips.Removable
+      onClick={(event) => {
+        event.stopPropagation();
+        removeSelectedOption(option);
+        focusInput();
+      }}
+    >
       {option.label}
-    </Chips.Toggle>
-  ) : (
-    <Chips.Removable onClick={onClick}>{option.label}</Chips.Removable>
+    </Chips.Removable>
   );
 };
 

package/src/form/combobox/__tests__/combobox.test.tsx

@@ -3,6 +3,7 @@ import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
 import { describe, expect, test, vi } from "vitest";
+import nb from "../../../util/i18n/locales/nb";
 import { ComboboxProps, UNSAFE_Combobox } from "../index";
 
 const options = [
@@ -73,7 +74,7 @@ describe("Render combobox", () => {
     test("Should show loading icon when loading (used for async search)", async () => {
       render(<App options={[]} isListOpen isLoading />);
 
-      expect(await screen.findByText("Søker...")).toBeInTheDocument();
+      expect(await screen.findByText(nb.Combobox.loading)).toBeInTheDocument();
     });
 
     test("Should not select previous focused element when closes", async () => {

package/src/form/combobox/types.ts

@@ -132,7 +132,8 @@ export interface ComboboxProps
      */
     limit: number;
     /**
-     * Override the message to display when the limit for maximum selected options has been reached
+     * Message to display when the limit for maximum selected options has been reached
+     * @default "{selected} av maks {limit} er valgt."
      */
     message?: string;
   };
@@ -154,12 +155,6 @@ export interface ComboboxProps
    * @default true
    */
   toggleListButton?: boolean;
-  /**
-   * Custom name for the toggle list-button. Requires "toggleListButton" to be `true`.
-   *
-   * @default "Alternativer"
-   */
-  toggleListButtonLabel?: string;
   /**
    * Set this to override the value of the input field.
    *

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -1,9 +1,9 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Link } from "../../link";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { OverridableComponent } from "../../util/types";
 
-// export type FormSummaryEditProps = Partial<LinkProps>;
 export interface FormSummaryEditProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
@@ -22,17 +22,18 @@ export interface FormSummaryEditProps
 export const FormSummaryEditLink: OverridableComponent<
   FormSummaryEditProps,
   HTMLAnchorElement
-> = forwardRef(
-  ({ children = "Endre svar", className, as = "a", ...rest }, ref) => (
+> = forwardRef(({ children, className, as = "a", ...rest }, ref) => {
+  const translate = useI18n("FormSummary");
+  return (
     <Link
       ref={ref}
       as={as}
       {...rest}
       className={cl("navds-form-summary__edit", className)}
     >
-      {children}
+      {children || translate("editAnswer")}
     </Link>
-  ),
-);
+  );
+});
 
 export default FormSummaryEditLink;

package/src/form/search/Search.tsx

@@ -6,6 +6,8 @@ import React, {
   useState,
 } from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
+import { Button } from "../../button";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -122,6 +124,8 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       ...rest
     } = props;
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     const searchRef = useRef<HTMLInputElement | null>(null);
     const mergedRef = useMergeRefs(searchRef, ref);
     const translate = useI18n("Search");
@@ -142,6 +146,34 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onSearchClick?.(`${value ?? internalValue}`);
     };
 
+    const showClearButton =
+      clearButton && !inputProps.disabled && (value ?? internalValue);
+
+    const ClearButton = () =>
+      themeContext ? (
+        <Button
+          className="navds-search__button-clear"
+          variant="tertiary-neutral"
+          size={size === "medium" ? "small" : "xsmall"}
+          icon={<XMarkIcon aria-hidden />}
+          title={clearButtonLabel || translate("clear")}
+          hidden={!showClearButton}
+          onClick={(event) => handleClear({ trigger: "Click", event })}
+        />
+      ) : (
+        <button
+          type="button"
+          onClick={(event) => handleClear({ trigger: "Click", event })}
+          className="navds-search__button-clear"
+          hidden={!showClearButton}
+        >
+          <span className="navds-sr-only">
+            {clearButtonLabel || translate("clear")}
+          </span>
+          <XMarkIcon aria-hidden />
+        </button>
+      );
+
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
@@ -210,18 +242,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               )}
               {...(htmlSize ? { size: Number(htmlSize) } : {})}
             />
-            {(value ?? internalValue) && clearButton && (
-              <button
-                type="button"
-                onClick={(event) => handleClear({ trigger: "Click", event })}
-                className="navds-search__button-clear"
-              >
-                <span className="navds-sr-only">
-                  {clearButtonLabel || translate("clear")}
-                </span>
-                <XMarkIcon aria-hidden />
-              </button>
-            )}
+            <ClearButton />
           </div>
           <SearchContext.Provider
             value={{

package/src/guide-panel/Illustration.tsx

@@ -1,5 +1,6 @@
 import React, { SVGProps } from "react";
 import { useId } from "../util/hooks";
+import { useI18n } from "../util/i18n/i18n.context";
 
 interface SVGRProps {
   title?: string;
@@ -15,6 +16,8 @@ export const DefaultIllustration: DefaultIllustrationType = ({
   titleId: _titleId,
   ...props
 }) => {
+  const translate = useI18n("GuidePanel");
+
   let titleId: string | undefined = useId();
   titleId = title ? (_titleId ? _titleId : "title-" + titleId) : undefined;
 
@@ -25,7 +28,7 @@ export const DefaultIllustration: DefaultIllustrationType = ({
       viewBox="0 0 56 85"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      aria-label="NAV veileder illustrasjon"
+      aria-label={translate("illustrationLabel")}
       focusable={false}
       role="img"
       aria-labelledby={titleId}

package/src/help-text/HelpText.tsx

@@ -4,6 +4,7 @@ import { Popover, PopoverProps } from "../popover";
 import { UNSAFE_useAkselTheme } from "../provider";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { useI18n } from "../util/i18n/i18n.context";
 import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps
@@ -12,7 +13,7 @@ export interface HelpTextProps
   children: React.ReactNode;
   /**
    * Adds a title-tooltip with the given text
-   * @default "hjelp"
+   * @default "Mer informasjon"
    */
   title?: string;
   /**
@@ -41,7 +42,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       children,
       placement,
       strategy = "absolute",
-      title = "hjelp",
+      title,
       onClick,
       wrapperClassName,
       ...rest
@@ -50,10 +51,11 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = useMergeRefs(buttonRef, ref);
-
     const [open, setOpen] = useState(false);
-
     const themeContext = UNSAFE_useAkselTheme(false);
+    const translate = useI18n("HelpText");
+
+    const titleWithFallback = title || translate("title");
 
     return (
       <div className={cl("navds-help-text", wrapperClassName)}>
@@ -65,8 +67,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           type="button"
           aria-expanded={open}
         >
-          <HelpTextIcon title={title} />
-          <HelpTextIcon filled title={title} />
+          <HelpTextIcon title={titleWithFallback} />
+          <HelpTextIcon filled title={titleWithFallback} />
         </button>
         <Popover
           onClose={() => setOpen(false)}

package/src/internal-header/InternalHeaderButton.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";
 
 export interface InternalHeaderButtonProps
-  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Application Button
    */

package/src/internal-header/InternalHeaderUserButton.tsx

@@ -6,7 +6,7 @@ import { OverridableComponent } from "../util/types";
 import InternalHeaderButton from "./InternalHeaderButton";
 
 export interface InternalHeaderUserButtonProps
-  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * User name
    */
@@ -33,7 +33,7 @@ export const InternalHeaderUserButton: OverridableComponent<
       </BodyShort>
       {description && <Detail as="div">{description}</Detail>}
     </div>
-    <ChevronDownIcon title="vis meny" />
+    <ChevronDownIcon aria-hidden />
   </InternalHeaderButton>
 ));
 

package/src/layout/base/BasePrimitive.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
@@ -251,39 +252,42 @@ export const BasePrimitive = ({
   flexShrink,
   gridColumn,
 }: BasePrimitiveProps) => {
+  const themeContext = UNSAFE_useAkselTheme(false);
+  const prefix = themeContext ? "ax" : "a";
+
   const style: React.CSSProperties = {
     /* Padding */
-    ...getResponsiveProps("r", "p", "spacing", padding),
-    ...getResponsiveProps("r", "pi", "spacing", paddingInline),
-    ...getResponsiveProps("r", "pb", "spacing", paddingBlock),
+    ...getResponsiveProps(prefix, "r", "p", "spacing", padding),
+    ...getResponsiveProps(prefix, "r", "pi", "spacing", paddingInline),
+    ...getResponsiveProps(prefix, "r", "pb", "spacing", paddingBlock),
     /* Margin */
-    ...getResponsiveProps("r", "m", "spacing", margin),
-    ...getResponsiveProps("r", "mi", "spacing", marginInline),
-    ...getResponsiveProps("r", "mb", "spacing", marginBlock),
+    ...getResponsiveProps(prefix, "r", "m", "spacing", margin),
+    ...getResponsiveProps(prefix, "r", "mi", "spacing", marginInline),
+    ...getResponsiveProps(prefix, "r", "mb", "spacing", marginBlock),
     /* Width & height */
-    ...getResponsiveValue("r", "w", width),
-    ...getResponsiveValue("r", "minw", minWidth),
-    ...getResponsiveValue("r", "maxw", maxWidth),
-    ...getResponsiveValue("r", "h", height),
-    ...getResponsiveValue("r", "minh", minHeight),
-    ...getResponsiveValue("r", "maxh", maxHeight),
+    ...getResponsiveValue(prefix, "r", "w", width),
+    ...getResponsiveValue(prefix, "r", "minw", minWidth),
+    ...getResponsiveValue(prefix, "r", "maxw", maxWidth),
+    ...getResponsiveValue(prefix, "r", "h", height),
+    ...getResponsiveValue(prefix, "r", "minh", minHeight),
+    ...getResponsiveValue(prefix, "r", "maxh", maxHeight),
     /* Positon & inset */
-    ...getResponsiveValue("r", "position", position),
-    ...getResponsiveProps("r", "inset", "spacing", inset),
-    ...getResponsiveProps("r", "top", "spacing", top),
-    ...getResponsiveProps("r", "right", "spacing", right),
-    ...getResponsiveProps("r", "bottom", "spacing", bottom),
-    ...getResponsiveProps("r", "left", "spacing", left),
+    ...getResponsiveValue(prefix, "r", "position", position),
+    ...getResponsiveProps(prefix, "r", "inset", "spacing", inset),
+    ...getResponsiveProps(prefix, "r", "top", "spacing", top),
+    ...getResponsiveProps(prefix, "r", "right", "spacing", right),
+    ...getResponsiveProps(prefix, "r", "bottom", "spacing", bottom),
+    ...getResponsiveProps(prefix, "r", "left", "spacing", left),
     /* Overflow */
-    ...getResponsiveValue("r", "overflow", overflow),
-    ...getResponsiveValue("r", "overflowx", overflowX),
-    ...getResponsiveValue("r", "overflowy", overflowY),
+    ...getResponsiveValue(prefix, "r", "overflow", overflow),
+    ...getResponsiveValue(prefix, "r", "overflowx", overflowX),
+    ...getResponsiveValue(prefix, "r", "overflowy", overflowY),
     /* Flex */
-    ...getResponsiveValue("r", "flex-basis", flexBasis),
-    ...getResponsiveValue("r", "flex-grow", flexGrow),
-    ...getResponsiveValue("r", "flex-shrink", flexShrink),
+    ...getResponsiveValue(prefix, "r", "flex-basis", flexBasis),
+    ...getResponsiveValue(prefix, "r", "flex-grow", flexGrow),
+    ...getResponsiveValue(prefix, "r", "flex-shrink", flexShrink),
     /* Grid */
-    ...getResponsiveValue("r", "grid-column", gridColumn),
+    ...getResponsiveValue(prefix, "r", "grid-column", gridColumn),
   };
 
   return (

package/src/layout/bleed/Bleed.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { getResponsiveProps } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
@@ -80,9 +81,13 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     },
     ref,
   ) => {
+    const themeContext = UNSAFE_useAkselTheme(false);
+    const prefix = themeContext ? "ax" : "a";
+
     let style: React.CSSProperties = {
       ..._style,
       ...getResponsiveProps(
+        prefix,
         "bleed",
         "margin-inline",
         "spacing",
@@ -92,6 +97,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
       ),
 
       ...getResponsiveProps(
+        prefix,
         "bleed",
         "margin-block",
         "spacing",
@@ -105,6 +111,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
       style = {
         ...style,
         ...getResponsiveProps(
+          prefix,
           "bleed",
           "padding-inline",
           "spacing",
@@ -113,6 +120,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
           ["0", "full", "px"],
         ),
         ...getResponsiveProps(
+          prefix,
           "bleed",
           "padding-block",
           "spacing",