app/blog/[slug]/page.tsx

@@ -7,14 +7,14 @@ import {
   type BlogPost,
 } from "../../../lib/content";
 import { logger } from "../../../lib/logger";
-import ContentBanner from "../../components/ContentBanner";
-import AskOrganizer from "../../components/AskOrganizer";
+import ContentBanner from "../../components/sections/ContentBanner";
+import AskOrganizer from "../../components/sections/AskOrganizer";
 import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 import "../blog.css";
 
 // Code split RelatedArticles - blog-specific, below the fold
 const RelatedArticles = dynamic(
-  () => import("../../components/RelatedArticles"),
+  () => import("../../components/sections/RelatedArticles"),
   {
     loading: () => (
       <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />

app/components-preview/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import RuleCard from "../components/RuleCard";
-import Chip from "../components/Chip";
-import MultiSelect from "../components/MultiSelect";
+import RuleCard from "../components/cards/RuleCard";
+import Chip from "../components/controls/Chip";
+import MultiSelect from "../components/controls/MultiSelect";
 import Image from "next/image";
 import { getAssetPath } from "../../lib/assetUtils";
 

app/components/ConditionalHeader/ConditionalHeader.view.tsx

@@ -1,5 +1,5 @@
-import HomeHeader from "../HomeHeader";
-import Header from "../Header";
+import HomeHeader from "../navigation/HomeHeader";
+import Header from "../navigation/Header";
 import type { ConditionalHeaderViewProps } from "./ConditionalHeader.types";
 
 export function ConditionalHeaderView({

app/components/buttons/Button.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
-import type { VariantValue, SizeValue } from "../../lib/propNormalization";
-import { normalizeVariant, normalizeSize } from "../../lib/propNormalization";
+import type { VariantValue, SizeValue } from "../../../lib/propNormalization";
+import { normalizeVariant, normalizeSize } from "../../../lib/propNormalization";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;

app/components/cards/NumberCard.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { memo } from "react";
-import SectionNumber from "./SectionNumber";
+import SectionNumber from "../sections/SectionNumber";
 
-import { normalizeNumberCardSize } from "../../lib/propNormalization";
+import { normalizeNumberCardSize } from "../../../lib/propNormalization";
 
 export type NumberCardSizeValue =
   | "Small"

app/components/cards/RuleCard/RuleCard.container.tsx

@@ -3,7 +3,7 @@
 import { memo } from "react";
 import { RuleCardView } from "./RuleCard.view";
 import type { RuleCardProps } from "./RuleCard.types";
-import { normalizeRuleCardSize } from "../../../lib/propNormalization";
+import { normalizeRuleCardSize } from "../../../../lib/propNormalization";
 
 declare global {
   interface Window {

app/components/cards/RuleCard/RuleCard.types.ts

@@ -1,4 +1,4 @@
-import type { ChipOption } from "../MultiSelect/MultiSelect.types";
+import type { ChipOption } from "../../controls/MultiSelect/MultiSelect.types";
 
 export interface Category {
   name: string;

app/components/cards/RuleCard/RuleCard.view.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import Image from "next/image";
-import { useTranslation } from "../../contexts/MessagesContext";
-import MultiSelect from "../MultiSelect";
+import { useTranslation } from "../../../contexts/MessagesContext";
+import MultiSelect from "../../controls/MultiSelect";
 import type { RuleCardViewProps } from "./RuleCard.types";
 
 export function RuleCardView({

app/components/controls/Checkbox/Checkbox.container.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { memo } from "react";
-import { useComponentId } from "../../hooks";
+import { useComponentId } from "../../../hooks";
 import { CheckboxView } from "./Checkbox.view";
 import type { CheckboxProps } from "./Checkbox.types";
-import { normalizeMode, normalizeState } from "../../../lib/propNormalization";
+import { normalizeMode, normalizeState } from "../../../../lib/propNormalization";
 
 const CheckboxContainer = memo<CheckboxProps>(
   ({

app/components/controls/Checkbox/Checkbox.types.ts

@@ -1,4 +1,4 @@
-import type { ModeValue, StateValue } from "../../../lib/propNormalization";
+import type { ModeValue, StateValue } from "../../../../lib/propNormalization";
 
 export interface CheckboxProps {
   checked?: boolean;

app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx

@@ -3,7 +3,7 @@
 import { memo, useCallback, useId, useState } from "react";
 import { CheckboxGroupView } from "./CheckboxGroup.view";
 import type { CheckboxGroupProps } from "./CheckboxGroup.types";
-import { normalizeMode } from "../../../lib/propNormalization";
+import { normalizeMode } from "../../../../lib/propNormalization";
 
 const CheckboxGroupContainer = ({
   name,

app/components/controls/CheckboxGroup/CheckboxGroup.types.ts

@@ -5,7 +5,7 @@ export interface CheckboxOption {
   ariaLabel?: string;
 }
 
-import type { ModeValue } from "../../../lib/propNormalization";
+import type { ModeValue } from "../../../../lib/propNormalization";
 
 export interface CheckboxGroupProps {
   name?: string;

app/components/controls/Chip/Chip.container.tsx

@@ -7,7 +7,7 @@ import {
   normalizeChipPalette,
   normalizeChipSize,
   normalizeChipState,
-} from "../../../lib/propNormalization";
+} from "../../../../lib/propNormalization";
 
 const ChipContainer = memo<ChipProps>(
   ({

app/components/controls/Chip/Chip.types.ts

@@ -2,7 +2,7 @@ import type {
   ChipPaletteValue,
   ChipSizeValue,
   ChipStateValue,
-} from "../../../lib/propNormalization";
+} from "../../../../lib/propNormalization";
 
 export interface ChipProps {
   label: string;

app/components/controls/MultiSelect/MultiSelect.container.tsx

@@ -3,7 +3,7 @@
 import { memo } from "react";
 import MultiSelectView from "./MultiSelect.view";
 import type { MultiSelectProps } from "./MultiSelect.types";
-import { normalizeMultiSelectSize, normalizeChipPalette } from "../../../lib/propNormalization";
+import { normalizeMultiSelectSize, normalizeChipPalette } from "../../../../lib/propNormalization";
 
 const MultiSelectContainer = memo<MultiSelectProps>(
   ({

app/components/controls/MultiSelect/MultiSelect.types.ts

@@ -1,4 +1,4 @@
-import type { ChipStateValue, ChipPaletteValue } from "../../../lib/propNormalization";
+import type { ChipStateValue, ChipPaletteValue } from "../../../../lib/propNormalization";
 
 export interface ChipOption {
   id: string;

app/components/controls/MultiSelect/MultiSelect.view.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import Chip from "../Chip";
-import InputLabel from "../InputLabel";
+import InputLabel from "../../InputLabel";
 import type { MultiSelectViewProps } from "./MultiSelect.types";
 
 function MultiSelectView({

app/components/controls/RadioButton/RadioButton.container.tsx

@@ -3,7 +3,7 @@
 import { memo, useCallback, useId } from "react";
 import { RadioButtonView } from "./RadioButton.view";
 import type { RadioButtonProps } from "./RadioButton.types";
-import { normalizeMode, normalizeState } from "../../../lib/propNormalization";
+import { normalizeMode, normalizeState } from "../../../../lib/propNormalization";
 
 const RadioButtonContainer = ({
   checked = false,

app/components/controls/RadioButton/RadioButton.types.ts

@@ -1,4 +1,4 @@
-import type { ModeValue, StateValue } from "../../../lib/propNormalization";
+import type { ModeValue, StateValue } from "../../../../lib/propNormalization";
 
 export interface RadioButtonProps {
   checked?: boolean;

app/components/controls/RadioGroup/RadioGroup.container.tsx

@@ -3,7 +3,7 @@
 import { memo, useCallback, useId } from "react";
 import { RadioGroupView } from "./RadioGroup.view";
 import type { RadioGroupProps } from "./RadioGroup.types";
-import { normalizeMode, normalizeState } from "../../../lib/propNormalization";
+import { normalizeMode, normalizeState } from "../../../../lib/propNormalization";
 
 const RadioGroupContainer = ({
   name,

app/components/controls/RadioGroup/RadioGroup.types.ts

@@ -5,7 +5,7 @@ export interface RadioOption {
   ariaLabel?: string;
 }
 
-import type { ModeValue, StateValue } from "../../../lib/propNormalization";
+import type { ModeValue, StateValue } from "../../../../lib/propNormalization";
 
 export interface RadioGroupProps {
   name?: string;

app/components/controls/SelectInput/SelectInput.container.tsx

@@ -13,10 +13,10 @@ import React, {
   useImperativeHandle,
   useEffect,
 } from "react";
-import { useClickOutside } from "../../hooks";
+import { useClickOutside } from "../../../hooks";
 import { SelectInputView } from "./SelectInput.view";
 import type { SelectInputProps } from "./SelectInput.types";
-import { normalizeState, normalizeSmallMediumLargeSize, normalizeLabelVariant } from "../../../lib/propNormalization";
+import { normalizeState, normalizeSmallMediumLargeSize, normalizeLabelVariant } from "../../../../lib/propNormalization";
 
 const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
   (

app/components/controls/SelectInput/SelectInput.types.ts

@@ -5,7 +5,7 @@ export interface SelectOptionData {
   label: string;
 }
 
-import type { StateValue } from "../../../lib/propNormalization";
+import type { StateValue } from "../../../../lib/propNormalization";
 
 export type SelectInputLabelVariantValue = "default" | "horizontal" | "Default" | "Horizontal";
 export type SelectInputSizeValue = "small" | "medium" | "large" | "Small" | "Medium" | "Large";

app/components/controls/SelectInput/SelectInput.view.tsx

@@ -1,7 +1,7 @@
 import React, { Children, type ReactNode } from "react";
-import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
-import SelectDropdown from "../SelectDropdown";
-import SelectOption from "../SelectOption";
+import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
+import SelectDropdown from "../../SelectDropdown";
+import SelectOption from "../../SelectOption";
 import type { SelectOptionData } from "./SelectInput.types";
 
 export interface SelectInputViewProps {

app/components/controls/Switch/Switch.container.tsx

@@ -3,7 +3,7 @@
 import { memo, useCallback, useId, forwardRef } from "react";
 import { SwitchView } from "./Switch.view";
 import type { SwitchProps } from "./Switch.types";
-import { normalizeState } from "../../../lib/propNormalization";
+import { normalizeState } from "../../../../lib/propNormalization";
 
 const SwitchContainer = memo(
   forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {

app/components/controls/Switch/Switch.types.ts

@@ -1,4 +1,4 @@
-import type { StateValue } from "../../../lib/propNormalization";
+import type { StateValue } from "../../../../lib/propNormalization";
 
 export interface SwitchProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,

app/components/controls/TextArea/TextArea.container.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { memo, forwardRef } from "react";
-import { useComponentId, useFormField } from "../../hooks";
+import { useComponentId, useFormField } from "../../../hooks";
 import { TextAreaView } from "./TextArea.view";
 import type { TextAreaProps } from "./TextArea.types";
-import { normalizeInputState, normalizeSmallMediumLargeSize, normalizeLabelVariant } from "../../../lib/propNormalization";
+import { normalizeInputState, normalizeSmallMediumLargeSize, normalizeLabelVariant } from "../../../../lib/propNormalization";
 
 const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   (

app/components/controls/TextArea/TextArea.types.ts

@@ -1,4 +1,4 @@
-import type { InputStateValue } from "../../../lib/propNormalization";
+import type { InputStateValue } from "../../../../lib/propNormalization";
 
 export type TextAreaSizeValue = "small" | "medium" | "large" | "Small" | "Medium" | "Large";
 export type TextAreaLabelVariantValue = "default" | "horizontal" | "Default" | "Horizontal";

app/components/controls/TextInput/TextInput.container.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { memo, forwardRef, useState, useRef } from "react";
-import { useComponentId, useFormField } from "../../hooks";
+import { useComponentId, useFormField } from "../../../hooks";
 import { TextInputView } from "./TextInput.view";
 import type { TextInputProps } from "./TextInput.types";
-import { normalizeInputState } from "../../../lib/propNormalization";
+import { normalizeInputState } from "../../../../lib/propNormalization";
 
 const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
   (

app/components/controls/TextInput/TextInput.types.ts

@@ -1,4 +1,4 @@
-import type { InputStateValue } from "../../../lib/propNormalization";
+import type { InputStateValue } from "../../../../lib/propNormalization";
 
 export interface TextInputProps extends Omit<
   React.InputHTMLAttributes<HTMLInputElement>,

app/components/controls/TextInput/TextInput.view.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import type { TextInputViewProps } from "./TextInput.types";
 
 export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(

app/components/controls/Toggle/Toggle.container.tsx

@@ -3,7 +3,7 @@
 import { memo, useCallback, useId, forwardRef } from "react";
 import { ToggleView } from "./Toggle.view";
 import type { ToggleProps } from "./Toggle.types";
-import { normalizeState } from "../../../lib/propNormalization";
+import { normalizeState } from "../../../../lib/propNormalization";
 
 const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
   (

app/components/controls/Toggle/Toggle.types.ts

@@ -1,4 +1,4 @@
-import type { StateValue } from "../../../lib/propNormalization";
+import type { StateValue } from "../../../../lib/propNormalization";
 
 export interface ToggleProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,

app/components/controls/ToggleGroup/ToggleGroup.container.tsx

@@ -3,7 +3,7 @@
 import { memo, useCallback, useId, forwardRef } from "react";
 import { ToggleGroupView } from "./ToggleGroup.view";
 import type { ToggleGroupProps } from "./ToggleGroup.types";
-import { normalizeToggleState, normalizeToggleGroupPosition } from "../../../lib/propNormalization";
+import { normalizeToggleState, normalizeToggleGroupPosition } from "../../../../lib/propNormalization";
 
 const ToggleGroupContainer = memo(
   forwardRef<HTMLButtonElement, ToggleGroupProps>((props, _ref) => {

app/components/controls/ToggleGroup/ToggleGroup.types.ts

@@ -1,4 +1,4 @@
-import type { StateValue } from "../../../lib/propNormalization";
+import type { StateValue } from "../../../../lib/propNormalization";
 
 export type ToggleGroupPositionValue = "left" | "middle" | "right" | "Left" | "Middle" | "Right";
 

app/components/icons/Avatar.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { normalizeSize } from "../../lib/propNormalization";
+import { normalizeSize } from "../../../lib/propNormalization";
 
 export type AvatarSizeValue = "small" | "medium" | "large" | "xlarge" | "Small" | "Medium" | "Large" | "XLarge";
 

app/components/icons/Logo.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import Link from "next/link";
-import { getAssetPath, ASSETS } from "../../lib/assetUtils";
+import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 
 interface LogoProps {
   size?:

app/components/modals/Alert/Alert.container.tsx

@@ -3,7 +3,7 @@
 import { memo } from "react";
 import { AlertView } from "./Alert.view";
 import type { AlertProps } from "./Alert.types";
-import { normalizeAlertStatus, normalizeAlertType } from "../../../lib/propNormalization";
+import { normalizeAlertStatus, normalizeAlertType } from "../../../../lib/propNormalization";
 
 const AlertContainer = memo<AlertProps>(
   ({

app/components/modals/Alert/Alert.view.tsx

@@ -1,5 +1,5 @@
 import type { AlertViewProps } from "./Alert.types";
-import Button from "../Button";
+import Button from "../../buttons/Button";
 
 export function AlertView({
   title,

app/components/modals/Create/Create.view.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { createPortal } from "react-dom";
-import ContentLockup from "../ContentLockup";
-import ModalFooter from "../ModalFooter";
-import ModalHeader from "../ModalHeader";
+import ContentLockup from "../../type/ContentLockup";
+import ModalFooter from "../../utility/ModalFooter";
+import ModalHeader from "../../utility/ModalHeader";
 import type { CreateViewProps } from "./Create.types";
 
 export function CreateView({

app/components/modals/Tooltip/Tooltip.container.tsx

@@ -3,7 +3,7 @@
 import { memo, useState } from "react";
 import { TooltipView } from "./Tooltip.view";
 import type { TooltipProps } from "./Tooltip.types";
-import { normalizeTooltipPosition } from "../../../lib/propNormalization";
+import { normalizeTooltipPosition } from "../../../../lib/propNormalization";
 
 const TooltipContainer = memo<TooltipProps>(
   ({ children, text, position: positionProp = "top", className = "", disabled = false }) => {

app/components/navigation/Footer.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { memo } from "react";
-import { useTranslation } from "../contexts/MessagesContext";
+import { useTranslation } from "../../contexts/MessagesContext";
 import Link from "next/link";
-import Logo from "./Logo";
-import Separator from "./Separator";
-import { getAssetPath, ASSETS } from "../../lib/assetUtils";
+import Logo from "../icons/Logo";
+import Separator from "../utility/Separator";
+import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 
 const Footer = memo(() => {
   const t = useTranslation("footer");

app/components/navigation/Header/Header.container.tsx

@@ -2,13 +2,13 @@
 
 import { memo } from "react";
 import { usePathname } from "next/navigation";
-import { useTranslation } from "../../contexts/MessagesContext";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import MenuBarItem from "../MenuBarItem";
-import Button from "../Button";
-import AvatarContainer from "../AvatarContainer";
-import Avatar from "../Avatar";
-import Logo from "../Logo";
-import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import Button from "../../buttons/Button";
+import AvatarContainer from "../../utility/AvatarContainer";
+import Avatar from "../../icons/Avatar";
+import Logo from "../../icons/Logo";
+import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import { HeaderView } from "./Header.view";
 import type { HeaderProps, NavSize } from "./Header.types";
 

app/components/navigation/Header/Header.view.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useTranslation } from "../../contexts/MessagesContext";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import MenuBar from "../MenuBar";
 import type { HeaderViewProps } from "./Header.types";
 

app/components/navigation/HeaderTab.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { getAssetPath } from "../../lib/assetUtils";
+import { getAssetPath } from "../../../lib/assetUtils";
 
 interface HeaderTabProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;

app/components/navigation/HomeHeader/HomeHeader.container.tsx

@@ -2,13 +2,13 @@
 
 import { memo } from "react";
 import { usePathname } from "next/navigation";
-import { useTranslation } from "../../contexts/MessagesContext";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import MenuBarItem from "../MenuBarItem";
-import Button from "../Button";
-import AvatarContainer from "../AvatarContainer";
-import Avatar from "../Avatar";
-import Logo from "../Logo";
-import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import Button from "../../buttons/Button";
+import AvatarContainer from "../../utility/AvatarContainer";
+import Avatar from "../../icons/Avatar";
+import Logo from "../../icons/Logo";
+import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import HomeHeaderView from "./HomeHeader.view";
 import type { HomeHeaderProps, NavSize } from "./HomeHeader.types";
 

app/components/navigation/HomeHeader/HomeHeader.view.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import Script from "next/script";
-import { useTranslation } from "../../contexts/MessagesContext";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import HeaderTab from "../HeaderTab";
 import MenuBar from "../MenuBar";
 import type { HomeHeaderViewProps } from "./HomeHeader.types";

app/components/navigation/MenuBar.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { memo } from "react";
-import { useTranslation } from "../contexts/MessagesContext";
-import { normalizeMenuBarSize } from "../../lib/propNormalization";
+import { useTranslation } from "../../contexts/MessagesContext";
+import { normalizeMenuBarSize } from "../../../lib/propNormalization";
 
 export type MenuBarSizeValue =
   | "xsmall"

app/components/navigation/MenuBarItem/MenuBarItem.container.tsx

@@ -3,7 +3,7 @@
 import { memo } from "react";
 import MenuBarItemView from "./MenuBarItem.view";
 import type { MenuBarItemProps } from "./MenuBarItem.types";
-import { normalizeMenuBarItemVariant } from "../../../lib/propNormalization";
+import { normalizeMenuBarItemVariant } from "../../../../lib/propNormalization";
 
 const MenuBarItemContainer = memo<MenuBarItemProps>(
   ({

app/components/navigation/NavigationItem/NavigationItem.container.tsx

@@ -3,7 +3,7 @@
 import { memo } from "react";
 import NavigationItemView from "./NavigationItem.view";
 import type { NavigationItemProps } from "./NavigationItem.types";
-import { normalizeNavigationItemVariant, normalizeNavigationItemSize } from "../../../lib/propNormalization";
+import { normalizeNavigationItemVariant, normalizeNavigationItemSize } from "../../../../lib/propNormalization";
 
 const NavigationItemContainer = memo<NavigationItemProps>(
   ({