@coopdigital/react 1.19.0 → 1.19.1

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
 "use client";
-import { hasUserBg } from "../../utils/index.js";
 import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner.js";
+import { hasUserBg } from "../../utils/index.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useState } from "react";

package/dist/components/Card/Card.js

@@ -1,6 +1,6 @@
 import { Image } from "../Image/Image.js";
-import { hasUserBg } from "../../utils/index.js";
 import { ChevronRightIcon } from "../icons/ChevronRightIcon.js";
+import { hasUserBg } from "../../utils/index.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import { hasUserBg } from "../../utils/index.js";
 import { CrossIcon } from "../icons/CrossIcon.js";
+import { hasUserBg } from "../../utils/index.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useRef } from "react";

package/dist/components/Expandable/Expandable.js

@@ -1,5 +1,5 @@
-import { hasUserBg } from "../../utils/index.js";
 import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
+import { hasUserBg } from "../../utils/index.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Field/Field.js

@@ -1,6 +1,6 @@
 "use client";
-import { getSlotProp } from "../../utils/index.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
+import { getSlotProp } from "../../utils/index.js";
 import { FieldContext } from "./Field.context.js";
 import { Error } from "../FieldMarkers/Error.js";
 import { Hint } from "../FieldMarkers/Hint.js";

package/dist/components/Searchbox/Searchbox.js

@@ -1,12 +1,11 @@
 "use client";
-import { getSlotProp, hasUserBorder } from "../../utils/index.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
 import { SearchIcon } from "../icons/SearchIcon.js";
+import { getSlotProp, hasUserBorder } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import TextInput_default from "../TextInput/index.js";
-import { FieldLabel } from "../Field/Field.js";
-import Field_default from "../Field/index.js";
+import { Field, FieldLabel } from "../Field/Field.js";
 import { SearchboxContext, useSearchbox } from "./Searchbox.context.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -60,7 +59,7 @@ const Searchbox = ({ action, children, className, id, label, labelVisible = fals
 				children: label
 			}), /* @__PURE__ */ jsxs("div", {
 				className: clsx("coop-searchbox--inner"),
-				children: [/* @__PURE__ */ jsx(Field_default, { children: slots.SearchboxInput }), slots.SearchboxButton]
+				children: [/* @__PURE__ */ jsx(Field, { children: slots.SearchboxInput }), slots.SearchboxButton]
 			})]
 		})
 	});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -49,6 +49,7 @@
     "test:e2e:ci": "npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL",
     "build": "tsx scripts build",
     "build:docs": "tsx scripts build-docs",
+    "build:docs:all": "tsx scripts build-docs --all",
     "build:icons": "tsx scripts build-icons",
     "build:manifest": "tsx scripts build-manifest",
     "build:storybook": "storybook build --disable-telemetry",
@@ -102,12 +103,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.13.1",
+    "@coopdigital/styles": "^1.13.2",
     "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "773b6e1ec18be0a33b2dd40a336f7a6bee54a259"
+  "gitHead": "63e8cb1427d5e504b3390bb1c1028a30c76c9053"
 }

package/src/components/Author/Author.tsx

@@ -2,7 +2,7 @@ import type { HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { Image, ImageProps } from "../Image"
+import { Image, ImageProps } from "@/components/Image"
 
 export interface AuthorProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify the Author name. */

package/src/components/Button/Button.tsx

@@ -5,8 +5,8 @@ import type { ButtonHTMLAttributes, ForwardRefExoticComponent, JSX, Ref } from "
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
-import { hasUserBg } from "../../utils"
-import { LoadingSpinner } from "./../LoadingSpinner"
+import { LoadingSpinner } from "@/components/LoadingSpinner"
+import { hasUserBg } from "@/utils"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `button`. */

package/src/components/Card/Card.tsx

@@ -3,10 +3,10 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { useSlots } from "../../hooks/useSlots"
-import { hasUserBg } from "../../utils"
-import { ChevronRightIcon } from "../icons/ChevronRightIcon"
-import { Image, ImageProps } from "../Image"
+import { ChevronRightIcon } from "@/components/icons/ChevronRightIcon"
+import { Image, ImageProps } from "@/components/Image"
+import { useSlots } from "@/hooks/useSlots"
+import { hasUserBg } from "@/utils"
 
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   /**  **(Optional)** Specify how the card behaves across screen sizes.
@@ -98,7 +98,6 @@ function getCardLinkElement(as: CardProps["hrefAs"], href?: string) {
 
 const Card = ({
   adaptive,
-  // behaviour,
   chevron = false,
   children,
   className,
@@ -116,7 +115,6 @@ const Card = ({
 
   const componentProps = {
     className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
-    // "data-behaviour": behaviour ?? undefined,
     "data-adaptive": adaptive ?? undefined,
     "data-orientation": orientation ?? undefined,
     "data-signpost": signpost ?? undefined,

package/src/components/Checkbox/Checkbox.tsx

@@ -3,8 +3,8 @@ import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { StandardSizes } from "../../../src/types"
-import { useField } from "../Field/Field.context"
+import { useField } from "@/components/Field/Field.context"
+import { StandardSizes } from "@/types"
 
 export interface CheckboxProps extends Omit<
   InputHTMLAttributes<HTMLInputElement>,

package/src/components/DatePicker/DatePicker.tsx

@@ -13,7 +13,14 @@ import clsx from "clsx"
 import { useCallback, useMemo, useReducer } from "react"
 import { DayPicker } from "react-day-picker"
 
-import type { StandardSizes } from "../../types"
+import type { StandardSizes } from "@/types"
+
+import { Button } from "@/components/Button"
+import { useField } from "@/components/Field/Field.context"
+import { CalendarIcon, CrossIcon, TickIcon } from "@/components/icons"
+import { Popover } from "@/components/Popover"
+import { TextInput } from "@/components/TextInput"
+
 import type {
   DateRange,
   DateRangeStr,
@@ -23,11 +30,6 @@ import type {
   TDateSingle,
 } from "./datepicker-utils"
 
-import { Button } from "../Button"
-import { useField } from "../Field/Field.context"
-import { CalendarIcon, CrossIcon, TickIcon } from "../icons"
-import { Popover } from "../Popover"
-import { TextInput } from "../TextInput"
 import {
   getDateValues,
   getDefaultMonth,

package/src/components/Dialog/Dialog.tsx

@@ -17,8 +17,8 @@ import React, {
   useRef,
 } from "react"
 
-import { hasUserBg } from "../../utils"
-import { CrossIcon } from "../icons"
+import { CrossIcon } from "@/components/icons"
+import { hasUserBg } from "@/utils"
 
 const DialogContext = createContext<{
   ref: RefObject<HTMLDialogElement | null> | null

package/src/components/Expandable/Expandable.tsx

@@ -2,9 +2,9 @@ import type { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { useSlots } from "../../hooks/useSlots"
-import { hasUserBg } from "../../utils"
-import { ChevronDownIcon } from "../icons"
+import { ChevronDownIcon } from "@/components/icons"
+import { useSlots } from "@/hooks/useSlots"
+import { hasUserBg } from "@/utils"
 
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
   /** Main content inside the component. This should be an `Expandable.Summary` and `Expandable.Content`. */

package/src/components/Field/Field.tsx

@@ -4,12 +4,13 @@ import type { HTMLAttributes, JSX, Ref } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { useId } from "../../hooks/useId"
-import { SlotConfig } from "../../types"
-import { getSlotProp } from "../../utils"
-import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
-import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
-import { Label as BaseLabel, type LabelProps } from "../FieldMarkers/Label"
+import { Error as BaseError, type ErrorProps } from "@/components/FieldMarkers/Error"
+import { Hint as BaseHint, type HintProps } from "@/components/FieldMarkers/Hint"
+import { Label as BaseLabel, type LabelProps } from "@/components/FieldMarkers/Label"
+import { useId } from "@/hooks/useId"
+import { SlotConfig } from "@/types"
+import { getSlotProp } from "@/utils"
+
 import { FieldConfig, FieldContext } from "./Field.context"
 
 interface FieldProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/FieldMarkers/Label.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx"
 import { JSX, LabelHTMLAttributes, Ref } from "react"
 
-import { useField } from "../Field/Field.context"
+import { useField } from "@/components/Field/Field.context"
 
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   /** **(Optional)** Main label for the form element. Accepts any valid JSX or string. */

package/src/components/Fieldset/Fieldset.tsx

@@ -1,10 +1,10 @@
 import clsx from "clsx"
 import { type FieldsetHTMLAttributes, HTMLAttributes, type JSX, Ref } from "react"
 
-import { StandardSizes } from "../../../src/types"
-import { Error as BaseError, type ErrorProps } from "../FieldMarkers/Error"
-import { Hint as BaseHint, type HintProps } from "../FieldMarkers/Hint"
-import { Legend as BaseLegend, type LegendProps } from "../FieldMarkers/Legend"
+import { Error as BaseError, type ErrorProps } from "@/components/FieldMarkers/Error"
+import { Hint as BaseHint, type HintProps } from "@/components/FieldMarkers/Hint"
+import { Legend as BaseLegend, type LegendProps } from "@/components/FieldMarkers/Legend"
+import { StandardSizes } from "@/types"
 
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
   /** Form elements inside the Fieldset.

package/src/components/Flourish/Flourish.tsx

@@ -2,7 +2,7 @@ import type { JSX, ReactNode, Ref, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "../../types/colors"
+import { Black, BrandBlue, Darks, Lights, OfferRed, Tints, White } from "@/types/colors"
 
 export interface FlourishProps extends SVGProps<SVGSVGElement> {
   /** Specify the text to be highlighted by the Flourish. */

package/src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -2,7 +2,7 @@ import type { JSX, Ref, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { LoadingIcon } from "../icons"
+import { LoadingIcon } from "@/components/icons"
 
 export interface LoadingSpinnerProps extends SVGProps<SVGSVGElement> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */

package/src/components/PasswordInput/PasswordInput.tsx

@@ -3,9 +3,9 @@ import type { JSX } from "react"
 
 import { useCallback, useState } from "react"
 
-import { Button } from "../Button"
-import { useField } from "../Field/Field.context"
-import { TextInput, type TextInputProps } from "../TextInput"
+import { Button } from "@/components/Button"
+import { useField } from "@/components/Field/Field.context"
+import { TextInput, type TextInputProps } from "@/components/TextInput"
 
 export interface PasswordInputProps extends Omit<
   TextInputProps,

package/src/components/Pill/Pill.tsx

@@ -3,9 +3,9 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { useSlots } from "../../hooks/useSlots"
-import { StandardSizes } from "../../types"
-import { hasUserBg } from "../../utils"
+import { useSlots } from "@/hooks/useSlots"
+import { StandardSizes } from "@/types"
+import { hasUserBg } from "@/utils"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */

package/src/components/Popover/Popover.tsx

@@ -10,8 +10,8 @@ import type { JSX, ReactNode, Ref } from "react"
 import * as RadixPopover from "@radix-ui/react-popover"
 import clsx from "clsx"
 
-import { useSlots } from "../../hooks/useSlots"
-import { bgClassToColor, hasUserBg } from "../../utils"
+import { useSlots } from "@/hooks/useSlots"
+import { bgClassToColor, hasUserBg } from "@/utils"
 
 export interface PopoverProps extends RadixPopoverProps {
   /** Content inside the Popover.

package/src/components/Prose/Prose.tsx

@@ -2,7 +2,7 @@ import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
 
 import clsx from "clsx"
 
-import { StandardSizes } from "../../types"
+import { StandardSizes } from "@/types"
 
 export interface ProseProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */

package/src/components/Radio/Radio.tsx

@@ -2,8 +2,8 @@
 import clsx from "clsx"
 import { type InputHTMLAttributes, type JSX, Ref } from "react"
 
-import { StandardSizes } from "../../types"
-import { useField } from "../Field/Field.context"
+import { useField } from "@/components/Field/Field.context"
+import { StandardSizes } from "@/types"
 
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */

package/src/components/Searchbox/Searchbox.context.tsx

@@ -1,6 +1,6 @@
 import { createContext, RefObject, useContext } from "react"
 
-import { StandardSizes } from "../../types"
+import { StandardSizes } from "@/types"
 
 interface SearchboxContextValue {
   buttonId?: string

package/src/components/Searchbox/Searchbox.tsx

@@ -5,16 +5,15 @@ import type { FormHTMLAttributes, JSX, RefObject } from "react"
 import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
-import { useId } from "../../hooks/useId"
-import { useSlots } from "../../hooks/useSlots"
-import { StandardSizes } from "../../types"
-import { getSlotProp, hasUserBorder } from "../../utils"
-import { Button, type ButtonProps } from "../Button"
-import Field from "../Field"
-import { FieldLabel } from "../Field/Field"
-import { SearchIcon } from "../icons"
-import TextInput, { TextInputProps } from "../TextInput"
-import { SearchboxContext, useSearchbox } from "./Searchbox.context"
+import { Button, type ButtonProps } from "@/components/Button"
+import { Field, FieldLabel } from "@/components/Field"
+import { SearchIcon } from "@/components/icons"
+import { SearchboxContext, useSearchbox } from "@/components/Searchbox/Searchbox.context"
+import TextInput, { TextInputProps } from "@/components/TextInput"
+import { useId } from "@/hooks/useId"
+import { useSlots } from "@/hooks/useSlots"
+import { StandardSizes } from "@/types"
+import { getSlotProp, hasUserBorder } from "@/utils"
 
 export interface SearchboxProps extends FormHTMLAttributes<HTMLFormElement> {
   /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */

package/src/components/Select/Select.tsx

@@ -10,8 +10,8 @@ import type {
 
 import clsx from "clsx"
 
-import { StandardSizes } from "../../../src/types"
-import { useField } from "../Field/Field.context"
+import { useField } from "@/components/Field/Field.context"
+import { StandardSizes } from "@/types"
 
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
   /** **(Optional)** Options inside the Select. This should be a set of `Select.Option` or `Select.OptionGroup` components.  */

package/src/components/Signpost/Signpost.tsx

@@ -3,8 +3,8 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { ChevronRightIcon } from "../icons"
-import { Image, ImageProps } from "../Image"
+import { ChevronRightIcon } from "@/components/icons"
+import { Image, ImageProps } from "@/components/Image"
 
 export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify a custom element to override default `a`. */

package/src/components/Squircle/Squircle.tsx

@@ -2,7 +2,8 @@ import type { HTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { hasUserBg } from "../../../src/utils"
+import { hasUserBg } from "@/utils"
+
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode

package/src/components/Tag/Tag.tsx

@@ -3,7 +3,7 @@ import type { ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react"
 import clsx from "clsx"
 import React from "react"
 
-import { hasUserBg } from "../../../src/utils"
+import { hasUserBg } from "@/utils"
 
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */

package/src/components/TextInput/TextInput.tsx

@@ -3,8 +3,8 @@ import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { StandardSizes } from "../../../src/types"
-import { useField } from "../Field/Field.context"
+import { useField } from "@/components/Field/Field.context"
+import { StandardSizes } from "@/types"
 
 export interface TextInputProps extends Omit<
   InputHTMLAttributes<HTMLInputElement>,

package/src/components/Textarea/Textarea.tsx

@@ -5,9 +5,9 @@ import type { ChangeEvent, JSX, Ref, TextareaHTMLAttributes } from "react"
 import clsx from "clsx"
 import { useState } from "react"
 
-import { useDebounce } from "../../hooks/useDebounce"
-import { StandardSizes } from "../../types"
-import { useField } from "../Field/Field.context"
+import { useField } from "@/components/Field/Field.context"
+import { useDebounce } from "@/hooks/useDebounce"
+import { StandardSizes } from "@/types"
 
 const DEBOUNCE_DELAY = 750
 

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -7,8 +7,11 @@ import clsx from "clsx"
 import mergeRefs from "merge-refs"
 import React, { useEffect, useRef } from "react"
 
-import { useSlots } from "../../hooks/useSlots"
-import { getFieldElement, sanitizeFieldId } from "./validationsummary-utils"
+import {
+  getFieldElement,
+  sanitizeFieldId,
+} from "@/components/ValidationSummary/validationsummary-utils"
+import { useSlots } from "@/hooks/useSlots"
 
 export interface ValidationSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify if the summary should be focused and the parent form scrolled into view if there are errors.

package/src/components/icons/AccountCircleFilledIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/AccountCircleIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/AccountFilledIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/AccountIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/AddIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/AppsFilledIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/AppsIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/ArrowDownIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/ArrowLeftIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/ArrowRightIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/ArrowUpIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/BackspaceFilledIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/BackspaceIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string

package/src/components/icons/BasketFilledIcon.tsx

@@ -2,7 +2,7 @@ import type { JSX, SVGProps } from "react"
 
 import clsx from "clsx"
 
-import { useId } from "../../hooks/useId"
+import { useId } from "@/hooks/useId"
 
 interface IconProps extends SVGProps<SVGSVGElement> {
   alt?: string