@coopdigital/react 1.18.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/dist/components/icons/LoadingIcon.js

@@ -11,13 +11,13 @@ const LoadingIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		fill: fill ?? "currentColor",
 		id: uid,
 		role: alt ? "img" : void 0,
-		viewBox: "0 0 28 28",
+		viewBox: "0 0 32 32",
 		...props,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",
 			children: alt
-		}) : null, /* @__PURE__ */ jsx("path", { d: "M13.001.002c.551-.039 1 .414 1 .966l-.005.102c-.052.504-.479.897-.995.94A12 12 0 0 0 2.915 9.375l-.162.414a11.998 11.998 0 0 0 15.425 15.425l.414-.162a12 12 0 0 0 5.131-4.055l.254-.364a12 12 0 0 0 1.98-5.667c.046-.55.49-.999 1.043-.999s1.004.448.964 1a14 14 0 0 1-2.323 6.778l-.296.425a14 14 0 0 1-5.987 4.732l-.483.19a14 14 0 0 1-14.401-2.866l-.373-.36a14 14 0 0 1-3.72-6.662l-.112-.506a14 14 0 0 1 .607-7.606l.19-.482a14 14 0 0 1 4.73-5.988l.426-.295a14 14 0 0 1 6.78-2.325" })]
+		}) : null, /* @__PURE__ */ jsx("path", { d: "M15.01 2.01c.551-.039 1 .414 1 .966l-.005.102c-.052.504-.479.897-.995.94a12 12 0 0 0-10.086 7.365l-.162.414a11.998 11.998 0 0 0 15.425 15.425l.414-.162a12 12 0 0 0 5.131-4.055l.254-.364a12 12 0 0 0 1.98-5.667c.046-.55.49-.999 1.043-.999s1.004.448.964 1a14 14 0 0 1-2.323 6.778l-.296.425a14 14 0 0 1-5.987 4.732l-.483.19a14 14 0 0 1-14.401-2.866l-.373-.36a14 14 0 0 1-3.72-6.662l-.112-.506a14 14 0 0 1 .607-7.606l.19-.482a14 14 0 0 1 4.73-5.988l.426-.295A14 14 0 0 1 15.01 2.01" })]
 	});
 };
 //#endregion

package/dist/components/icons/MessageIcon.js

@@ -17,7 +17,7 @@ const MessageIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",
 			children: alt
-		}) : null, /* @__PURE__ */ jsx("path", { d: "M30 31a1 1 0 0 1-.75-.34l-7.64-8.6H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h28a1 1 0 0 1 .71.29A1 1 0 0 1 31 2v28a1 1 0 0 1-.65.93.8.8 0 0 1-.35.07M3 20.06h19.06a1 1 0 0 1 .75.33l6.19 7V3H3Z" })]
+		}) : null, /* @__PURE__ */ jsx("path", { d: "M4 6v14h16.586a2 2 0 0 1 1.414.586l6 6V6zm26 20.586c0 1.782-2.154 2.674-3.414 1.414l-6-6H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2z" })]
 	});
 };
 //#endregion

package/dist/components/icons/OpenNewIcon.js

@@ -19,8 +19,8 @@ const OpenNewIcon = ({ alt, className, fill, id, ref, ...props }) => {
 				id: uid + "__title",
 				children: alt
 			}) : null,
-			/* @__PURE__ */ jsx("path", { d: "M14.16 18.84a1 1 0 0 1-.71-.29 1 1 0 0 1 0-1.42L30 .59a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.42L14.87 18.55a1 1 0 0 1-.71.29" }),
-			/* @__PURE__ */ jsx("path", { d: "M31 14a1 1 0 0 1-1-1V2H19a1 1 0 0 1 0-2h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1M24 32H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h11.21a1 1 0 0 1 0 2H2v22h22V18.7a1 1 0 0 1 2 0V30a2 2 0 0 1-2 2" })
+			/* @__PURE__ */ jsx("path", { d: "M13.733 7.875a.813.813 0 0 1 0 1.625H4.625v17.875H22.5v-9.181a.813.813 0 0 1 1.625 0v9.181A1.624 1.624 0 0 1 22.5 29H4.625A1.625 1.625 0 0 1 3 27.375V9.5a1.625 1.625 0 0 1 1.625-1.625z" }),
+			/* @__PURE__ */ jsx("path", { d: "M28.188 3a.813.813 0 0 1 .812.813v9.75a.813.813 0 0 1-1.625 0V5.779L15.082 18.072a.815.815 0 0 1-.889.175.814.814 0 0 1-.265-1.329l12.3-12.293h-7.79a.813.813 0 0 1 0-1.625z" })
 		]
 	});
 };

package/dist/components/icons/PencilIcon.js

@@ -17,7 +17,11 @@ const PencilIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",
 			children: alt
-		}) : null, /* @__PURE__ */ jsx("path", { d: "M31.7 6.12 25.88.3a1 1 0 0 0-1.4 0L1.3 23.47a.86.86 0 0 0-.3.6L0 30.9a1.14 1.14 0 0 0 .3.8.91.91 0 0 0 .7.3h.1l6.82-1a.61.61 0 0 0 .61-.3L31.7 7.52a1 1 0 0 0 0-1.4M7.22 29l-3.57.56L5.08 28a1 1 0 0 0 0-1.42 1 1 0 0 0-1.41.05L2.39 28l.52-3.29 1.91-1.91 4.12 4.52Zm3.14-3.11-4.12-4.54L25.18 2.41l4.41 4.41Z" })]
+		}) : null, /* @__PURE__ */ jsx("path", {
+			clipRule: "evenodd",
+			d: "M21.879 2.707a3 3 0 0 1 4.242 0l3.172 3.172a3 3 0 0 1 0 4.242L10.207 29.207a1 1 0 0 1-.565.283l-5.681.812a2 2 0 0 1-2.263-2.263l.812-5.68a1 1 0 0 1 .283-.566zM6 21.414 10.586 26l-1.558 1.557-3.7.528 1.38-1.378a1 1 0 1 0-1.415-1.414l-1.379 1.379.528-3.701zM27.88 8.707 12 24.586 7.414 20 23.293 4.121a1 1 0 0 1 1.414 0l3.172 3.172a1 1 0 0 1 0 1.414",
+			fillRule: "evenodd"
+		})]
 	});
 };
 //#endregion

package/dist/components/icons/SpannerIcon.js

@@ -11,13 +11,16 @@ const SpannerIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		fill: fill ?? "currentColor",
 		id: uid,
 		role: alt ? "img" : void 0,
-		viewBox: "0 0 24 24",
+		viewBox: "0 0 32 32",
 		...props,
 		ref,
 		children: [alt ? /* @__PURE__ */ jsx("title", {
 			id: uid + "__title",
 			children: alt
-		}) : null, /* @__PURE__ */ jsx("path", { d: "M13 7.5a5.5 5.5 0 0 0-6.025-5.475l2.482 2.482c.78.78.963 1.79.858 2.603a3.6 3.6 0 0 1-1.054 2.108l-.019.017-.02.02a3.6 3.6 0 0 1-2.108 1.06c-.815.106-1.825-.076-2.607-.858L2.025 6.975A5.5 5.5 0 0 0 7.5 13v2A7.5 7.5 0 0 1 .653 4.435c.26-.577 1.008-.653 1.455-.206l3.813 3.814c.47.47 1.265.347 1.77-.09l.097-.09.04-.042.036-.036c.476-.464.657-1.256.265-1.766l-.086-.098-3.814-3.813c-.447-.447-.371-1.196.206-1.455A7.5 7.5 0 0 1 14.916 8.61c-.051.34.046.689.288.931l7.624 7.624a4 4 0 0 1-5.657 5.657l-7.62-7.619a1.08 1.08 0 0 0-.93-.287A7.4 7.4 0 0 1 7.5 15v-2q.416-.001.82-.062l.167-.021a3.07 3.07 0 0 1 2.479.871l7.619 7.62a2 2 0 0 0 2.83-2.83l-7.626-7.624c-.745-.745-.985-1.755-.85-2.643A5.4 5.4 0 0 0 13 7.5" })]
+		}) : null, /* @__PURE__ */ jsx("path", {
+			d: "M11.5 5a6.5 6.5 0 0 1 6.428 7.46 2.08 2.08 0 0 0 .568 1.787l7.625 7.624a3 3 0 0 1-4.243 4.243l-7.62-7.619a2.08 2.08 0 0 0-1.788-.568 6.5 6.5 0 0 1-6.98-8.902l3.724 3.725c.516.516 1.193.648 1.771.573a2.6 2.6 0 0 0 1.52-.764l.057-.058c.414-.403.69-.95.762-1.519.074-.577-.059-1.253-.574-1.768L9.024 5.489A6.5 6.5 0 0 1 11.5 5Z",
+			strokeWidth: "2"
+		})]
 	});
 };
 //#endregion

package/dist/components/icons/WriteIcon.js

@@ -14,16 +14,14 @@ const WriteIcon = ({ alt, className, fill, id, ref, ...props }) => {
 		viewBox: "0 0 32 32",
 		...props,
 		ref,
-		children: [
-			alt ? /* @__PURE__ */ jsx("title", {
-				id: uid + "__title",
-				children: alt
-			}) : null,
-			/* @__PURE__ */ jsx("path", { d: "M19.67 10.13 17.9 11.9H7a1 1 0 0 1 0-2h12a1 1 0 0 1 .67.23M14.9 14.9l-2 2H7a1 1 0 0 1 0-2ZM20 15.9a1 1 0 0 1-1 1h-1.87l2-2a1 1 0 0 1 .82.59.85.85 0 0 1 .05.41M19 21.9H7a1 1 0 0 1 0-2h12a1 1 0 1 1 0 2" }),
-			/* @__PURE__ */ jsx("path", { d: "M24.08 10v20h-22V6h21.73l1.54-1.54a1.9 1.9 0 0 0-1-.44H2.07a2 2 0 0 0-2 2V30a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V8Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M30.62 3.41 28.5 1.29a1 1 0 0 0-1.42 0L22.38 6l-3.9 3.9-5 5-1.33 1.33a1 1 0 0 0-.27.48v.19l-.6 2.57a.8.8 0 0 0 0 .43 1 1 0 0 0 1.19.77l2.74-.67a.64.64 0 0 0 .29-.13.6.6 0 0 0 .19-.14l2.85-2.86 1.4-1.39L30.62 4.82a1 1 0 0 0 0-1.41M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z" }),
-			/* @__PURE__ */ jsx("path", { d: "M31.33 2.7 29.21.58a2.06 2.06 0 0 0-2.83 0L11.44 15.52a2.1 2.1 0 0 0-.54 1l-.09.41-.54 2.34a2.18 2.18 0 0 0 .54 1.87 2 2 0 0 0 1.4.58 1.8 1.8 0 0 0 .46-.05l2.75-.67a2.1 2.1 0 0 0 1-.54L31.33 5.53a2 2 0 0 0 0-2.83M15 19.06l-2.75.63.62-2.75 6.82-6.81L23.81 6l1.54-1.54L27.79 2l2.13 2.12Z" })
-		]
+		children: [alt ? /* @__PURE__ */ jsx("title", {
+			id: uid + "__title",
+			children: alt
+		}) : null, /* @__PURE__ */ jsx("path", {
+			clipRule: "evenodd",
+			d: "M25.586 2a2 2 0 0 1 2.828 0L30 3.585a2 2 0 0 1 0 2.828l-4 4V27a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h18.586zM5 6a1 1 0 0 0-1 1v20a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V12.413L17.413 19H19a1 1 0 1 1 0 2H8a1 1 0 0 1 0-2h3.278l1.001-3H8a1 1 0 0 1 0-2h5.586l3-3H8a1 1 0 0 1 0-2h10.586l3-3zm9.374 10.04-.794 2.38 2.378-.793L28.586 5 27 3.414z",
+			fillRule: "evenodd"
+		})]
 	});
 };
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.18.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.0",
+    "@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": "f8498869d526396c1119c13f1d5afbb083344547"
+  "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