@akinon/projectzero 2.0.0-beta.4 → 2.0.0-beta.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/projectzero
 
+## 2.0.0-beta.6
+
+### Minor Changes
+
+- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+
+## 2.0.0-beta.5
+
 ## 2.0.0-beta.4
 
 ## 2.0.0-beta.3

package/app-template/.env.example

@@ -4,6 +4,9 @@ NEXT_PUBLIC_MAP_API_KEY=YOUR_MAP_API_KEY
 NEXT_PUBLIC_GTM_KEY=GTM_KEY
 NEXT_PUBLIC_URL=http://localhost:3000
 SERVICE_BACKEND_URL=https://02fde10fee4440269e695aa10707dfaf.lb.akinoncloud.com
+
+# LOG_LEVEL_DEV=debug # For more details, please refer to the Logging documentation.
+
 # CACHE_SECRET=KhvhE1go3GDmYJ7PhZLmskqfhYNlPSm6
 # CACHE_HOST=default:redispw@localhost
 # CACHE_PORT=6379

package/app-template/CHANGELOG.md

@@ -1,5 +1,51 @@
 # projectzeronext
 
+## 2.0.0-beta.6
+
+### Minor Changes
+
+- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+
+### Patch Changes
+
+- Updated dependencies [8f05f9b]
+  - @akinon/pz-checkout-gift-pack@2.0.0-beta.6
+  - @akinon/pz-one-click-checkout@2.0.0-beta.6
+  - @akinon/pz-basket-gift-pack@2.0.0-beta.6
+  - @akinon/pz-pay-on-delivery@2.0.0-beta.6
+  - @akinon/pz-tabby-extension@2.0.0-beta.6
+  - @akinon/pz-credit-payment@2.0.0-beta.6
+  - @akinon/pz-click-collect@2.0.0-beta.6
+  - @akinon/pz-masterpass@2.0.0-beta.6
+  - @akinon/pz-saved-card@2.0.0-beta.6
+  - @akinon/next@2.0.0-beta.6
+  - @akinon/pz-akifast@2.0.0-beta.6
+  - @akinon/pz-gpay@2.0.0-beta.6
+  - @akinon/pz-b2b@2.0.0-beta.6
+  - @akinon/pz-bkm@2.0.0-beta.6
+  - @akinon/pz-otp@2.0.0-beta.6
+
+## 2.0.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [e791eab]
+  - @akinon/next@2.0.0-beta.5
+  - @akinon/pz-akifast@2.0.0-beta.5
+  - @akinon/pz-b2b@2.0.0-beta.5
+  - @akinon/pz-basket-gift-pack@2.0.0-beta.5
+  - @akinon/pz-bkm@2.0.0-beta.5
+  - @akinon/pz-checkout-gift-pack@2.0.0-beta.5
+  - @akinon/pz-click-collect@2.0.0-beta.5
+  - @akinon/pz-credit-payment@2.0.0-beta.5
+  - @akinon/pz-gpay@2.0.0-beta.5
+  - @akinon/pz-masterpass@2.0.0-beta.5
+  - @akinon/pz-one-click-checkout@2.0.0-beta.5
+  - @akinon/pz-otp@2.0.0-beta.5
+  - @akinon/pz-pay-on-delivery@2.0.0-beta.5
+  - @akinon/pz-saved-card@2.0.0-beta.5
+  - @akinon/pz-tabby-extension@2.0.0-beta.5
+
 ## 2.0.0-beta.4
 
 ### Minor Changes

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.6",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -22,25 +22,26 @@
     "prestart": "pz-prestart"
   },
   "dependencies": {
-    "@akinon/next": "2.0.0-beta.4",
-    "@akinon/pz-akifast": "2.0.0-beta.4",
-    "@akinon/pz-b2b": "2.0.0-beta.4",
-    "@akinon/pz-basket-gift-pack": "2.0.0-beta.4",
-    "@akinon/pz-bkm": "2.0.0-beta.4",
-    "@akinon/pz-checkout-gift-pack": "2.0.0-beta.4",
-    "@akinon/pz-click-collect": "2.0.0-beta.4",
-    "@akinon/pz-credit-payment": "2.0.0-beta.4",
-    "@akinon/pz-gpay": "2.0.0-beta.4",
-    "@akinon/pz-masterpass": "2.0.0-beta.4",
-    "@akinon/pz-one-click-checkout": "2.0.0-beta.4",
-    "@akinon/pz-otp": "2.0.0-beta.4",
-    "@akinon/pz-pay-on-delivery": "2.0.0-beta.4",
-    "@akinon/pz-saved-card": "2.0.0-beta.4",
-    "@akinon/pz-tabby-extension": "2.0.0-beta.4",
+    "@akinon/next": "2.0.0-beta.6",
+    "@akinon/pz-akifast": "2.0.0-beta.6",
+    "@akinon/pz-b2b": "2.0.0-beta.6",
+    "@akinon/pz-basket-gift-pack": "2.0.0-beta.6",
+    "@akinon/pz-bkm": "2.0.0-beta.6",
+    "@akinon/pz-checkout-gift-pack": "2.0.0-beta.6",
+    "@akinon/pz-click-collect": "2.0.0-beta.6",
+    "@akinon/pz-credit-payment": "2.0.0-beta.6",
+    "@akinon/pz-gpay": "2.0.0-beta.6",
+    "@akinon/pz-masterpass": "2.0.0-beta.6",
+    "@akinon/pz-one-click-checkout": "2.0.0-beta.6",
+    "@akinon/pz-otp": "2.0.0-beta.6",
+    "@akinon/pz-pay-on-delivery": "2.0.0-beta.6",
+    "@akinon/pz-saved-card": "2.0.0-beta.6",
+    "@akinon/pz-tabby-extension": "2.0.0-beta.6",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "14.1.0",
     "@react-google-maps/api": "2.17.1",
     "@sentry/nextjs": "7.116.0",
+    "@tailwindcss/postcss": "4.0.0",
     "dayjs": "1.11.5",
     "lossless-json": "2.0.5",
     "next": "15.1.3",
@@ -57,11 +58,11 @@
     "react-string-replace": "1.1.0",
     "start-server-and-test": "2.0.3",
     "tailwind-merge": "1.8.0",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.0",
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.4",
+    "@akinon/eslint-plugin-projectzero": "2.0.0-beta.6",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -97,13 +98,13 @@
     "stylelint-config-standard": "25.0.0",
     "stylelint-scss": "4.2.0",
     "stylelint-selector-bem-pattern": "2.1.1",
-    "tailwindcss": "3.4.14",
+    "tailwindcss": "4.0.0",
     "ts-jest": "29.1.1",
     "ts-node": "10.7.0",
     "typescript": "5.7.2"
   },
   "resolutions": {
-    "**/postcss": "8.4.31"
+    "**/postcss": "8.5.1"
   },
   "packageManager": "yarn@1.22.22"
 }

package/app-template/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {}
+  }
+};
+
+export default config;

package/app-template/public/locales/en/common.json

@@ -61,5 +61,9 @@
     "description": "The products in your cart will be deleted because the exchange rate has changed.",
     "close": "Close",
     "continue": "Continue"
+  },
+  "file_input": {
+    "select_file": "Select File",
+    "no_file": "No file selected"
   }
 }

package/app-template/public/locales/tr/common.json

@@ -61,5 +61,9 @@
     "description": "Döviz kuru değiştiği için sepetinizdeki ürünler silinecektir.",
     "close": "Kapat",
     "continue": "Devam Et"
+  },
+  "file_input": {
+    "select_file": "Dosya Seç",
+    "no_file": "Dosya seçilmedi"
   }
 }

package/app-template/src/app/[commerce]/[locale]/[currency]/account/orders/[id]/cancellation/page.tsx

@@ -15,7 +15,8 @@ import {
   Select,
   Modal,
   LoaderSpinner,
-  Link
+  Link,
+  FileInput
 } from '@theme/components';
 import { useState, use } from 'react';
 import { OrderDetailHeader } from '@theme/views/account/orders/order-detail-header';
@@ -41,6 +42,7 @@ const AccountOrderCancellation = ({ params }) => {
   } = useForm<AccountOrderCancellation>({
     resolver: yupResolver(accountOrderCancellationSchema)
   });
+
   const { data: cancellationReasons, isSuccess: cancellationReasonsSuccess } =
     useGetCancellationReasonsQuery();
 
@@ -58,6 +60,9 @@ const AccountOrderCancellation = ({ params }) => {
   const watchAllFields = watch();
   const cancelItemsLength = watchAllFields?.cancel_order_items?.length;
   const [cancelOrder] = useCancelOrderMutation();
+  const [files, setFiles] = useState<
+    { itemId: string; image: string; description: string }[]
+  >([]);
 
   const modalHandleClick = () => {
     setIsModalOpen(false);
@@ -114,8 +119,68 @@ const AccountOrderCancellation = ({ params }) => {
     ]);
   };
 
+  const handleFileChange = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+    itemId: string,
+    description: string
+  ) => {
+    const selectedFiles = Array.from(e.target.files || []);
+
+    const base64Files = await Promise.all(
+      selectedFiles.map((file) => {
+        return new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result as string);
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+        });
+      })
+    );
+
+    const validFiles = base64Files.filter((file) =>
+      /^data:image\/(jpeg|png|jpg);base64,.+/.test(file)
+    );
+
+    const formattedFiles = validFiles.map((file) => ({
+      itemId,
+      image: file,
+      description
+    }));
+
+    setFiles((prevFiles) => [
+      ...prevFiles.filter((f) => f.itemId !== itemId),
+      ...formattedFiles
+    ]);
+  };
+
+  const fileInputCondition = (item, description: string) => {
+    if (item.is_refundable && !item.active_cancellation_request) {
+      return (
+        <FileInput
+          name="files"
+          title="files"
+          multiple
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            handleFileChange(e, item.id, description)
+          }
+        />
+      );
+    }
+  };
+
   const onSubmit: SubmitHandler<AccountOrderCancellation> = (orderItems) => {
-    cancelOrder({ id: order.number, ...orderItems })
+    const mergedData = {
+      ...orderItems,
+      cancel_order_items: orderItems.cancel_order_items.map((orderItem) => ({
+        ...orderItem,
+        ...(files.length > 0 && {
+          cancellation_request_image_set: files.filter(
+            (file) => file.itemId === orderItem.order_item
+          )
+        })
+      }))
+    };
+    cancelOrder({ id: order.number, ...mergedData })
       .unwrap()
       .then(() => {
         setResponseMessage({
@@ -124,10 +189,33 @@ const AccountOrderCancellation = ({ params }) => {
         });
         setIsModalOpen(true);
       })
-      .catch(() => {
+      .catch((err) => {
+        console.error('Err', err);
+
+        const errorMessages = new Set();
+
+        if (err?.data?.cancel_order_items) {
+          err.data.cancel_order_items.forEach((item) => {
+            if (item.cancellation_request_image_set) {
+              item.cancellation_request_image_set.forEach((error) => {
+                if (typeof error === 'string') {
+                  errorMessages.add(error);
+                } else if (typeof error === 'object' && error?.image) {
+                  error.image.forEach((msg) => errorMessages.add(msg));
+                }
+              });
+            }
+          });
+        }
+
+        const errorContent =
+          errorMessages.size > 0
+            ? Array.from(errorMessages).join('\n')
+            : t('account.my_orders.return.error.description').toString();
+
         setResponseMessage({
           title: t('account.my_orders.return.error.title').toString(),
-          content: t('account.my_orders.return.error.description').toString()
+          content: errorContent
         });
         setIsModalOpen(true);
       });
@@ -182,6 +270,7 @@ const AccountOrderCancellation = ({ params }) => {
                         onChange={onChange}
                         value={value}
                         selectOption={selectOption}
+                        fileInput={fileInputCondition(item, item.product.name)}
                       />
                     );
                   }}

package/app-template/src/app/[commerce]/[locale]/[currency]/account/orders/[id]/page.tsx

@@ -144,7 +144,7 @@ const AccountOrderDetail = ({ params }) => {
                       key={index}
                     >
                       <div className="flex gap-3 mb-5 lg:mb-0">
-                        <div className="flex-shrink-0">
+                        <div className="shrink-0">
                           <Link
                             className="block"
                             href={item.product.absolute_url}

package/app-template/src/app/[commerce]/[locale]/[currency]/account/page.tsx

@@ -53,7 +53,7 @@ export default function Page() {
     <div className="hidden lg:block">
       <div className="bg-gray-150">
         {orderLoading && (
-          <SkeletonWrapper className="w-full px-6 mb-12 h-28 items-center justify-center !flex-row xl:h-[5.5rem]">
+          <SkeletonWrapper className="w-full px-6 mb-12 h-28 items-center justify-center flex-row! xl:h-[5.5rem]">
             <Skeleton className="w-[11.375rem] h-16 mr-4 xl:w-[16rem] xl:h-10" />
             <Skeleton className="w-56 h-10 mr-4" />
             <Skeleton className="w-[12.75rem] h-10 xl:w-56" />

package/app-template/src/app/[commerce]/[locale]/[currency]/address/stores/page.tsx

@@ -122,7 +122,7 @@ export default function Stores() {
 
       <div className="flex gap-6 mt-4 flex-col md:flex-row">
         {city && (
-          <div className="w-full flex-shrink-0 md:w-60 overflow-y-scroll max-h-[36rem]">
+          <div className="w-full shrink-0 md:w-60 overflow-y-scroll max-h-[36rem]">
             {cityLoading && (
               <SkeletonWrapper>
                 <Skeleton className="w-full h-20" />
@@ -174,7 +174,7 @@ export default function Stores() {
                           title={store.name}
                           titleClassName="text-xs font-bold"
                           iconSize={12}
-                          className="relative py-3 border-b justify-center mb-0"
+                          className="relative py-3 border-b border-gray-200 justify-center mb-0"
                         >
                           <div className="text-xs">
                             {store.address && (

package/app-template/src/app/[commerce]/[locale]/[currency]/auth/page.tsx

@@ -51,7 +51,7 @@ export default function Auth() {
           {t('auth.register.mobile_title')}
         </Button>
       </div>
-      <div className="w-full flex flex-wrap border md:border-0">
+      <div className="w-full flex flex-wrap border border-gray-200 md:border-0">
         <div
           className={twMerge(
             clsx('w-full md:block md:w-1/2', {

package/app-template/src/app/[commerce]/[locale]/[currency]/basket/page.tsx

@@ -25,7 +25,7 @@ export default function Page() {
   }, [basket, isSuccess]);
 
   return (
-    <div className="max-w-screen-xl p-4 flex flex-col text-primary-800 lg:p-8 xl:flex-row xl:mx-auto">
+    <div className="max-w-(--breakpoint-xl) p-4 flex flex-col text-primary-800 lg:p-8 xl:flex-row xl:mx-auto">
       {isLoading && (
         <div className="flex justify-center w-full">
           <LoaderSpinner />
@@ -62,7 +62,7 @@ export default function Page() {
             <Summary basket={basket} />
           </>
         ) : (
-          <div className="flex flex-col items-center container max-w-screen-sm py-4 px-4 xs:py-6 xs:px-6 sm:py-8 sm:px-8 lg:max-w-screen-xl">
+          <div className="flex flex-col items-center container max-w-(--breakpoint-sm) py-4 px-4 xs:py-6 xs:px-6 sm:py-8 sm:px-8 lg:max-w-(--breakpoint-xl)">
             <h1
               className="w-full text-xl font-light text-secondary text-center sm:text-2xl"
               data-testid="basket-empty"

package/app-template/src/app/[commerce]/[locale]/[currency]/forms/[pk]/generate/page.tsx

@@ -21,7 +21,7 @@ export default async function Page(props) {
         schema={schema}
         allFieldClasses={{
           className:
-            'border border-[#d4d4d4] text-[#4a4f54] mt-1.5 h-[38px] p-2.5 text-xs outline-none focus:border-black',
+            'border border-[#d4d4d4] text-[#4a4f54] mt-1.5 h-[38px] p-2.5 text-xs outline-hidden focus:border-black',
           labelClassName: 'text-[#4a4f54] text-xs',
           wrapperClassName: 'flex flex-col mb-6'
         }}

package/app-template/src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx

@@ -11,7 +11,7 @@ import {
 } from '@akinon/next/redux/reducers/checkout';
 import { RootState } from '@theme/redux/store';
 import { ROUTES } from '@theme/routes';
-import { useFetchCheckoutQuery } from '@akinon/next/data/client/checkout';
+import { useFetchCheckoutQuery, useResetCheckoutStateQuery } from '@akinon/next/data/client/checkout';
 import { Button, LoaderSpinner } from '@theme/components';
 import { pushAddPaymentInfo, pushAddShippingInfo } from '@theme/utils/gtm';
 import { CheckoutStep } from '@akinon/next/types';
@@ -25,6 +25,8 @@ const Checkout = () => {
     (state: RootState) => state.checkout
   );
 
+  const { data: indexData, isLoading: isResetStateLoading } = useResetCheckoutStateQuery(null);
+
   const {
     data: checkoutData,
     isFetching,
@@ -32,7 +34,8 @@ const Checkout = () => {
     isSuccess,
     refetch: refetchCheckout
   } = useFetchCheckoutQuery(null, {
-    refetchOnMountOrArgChange: true
+    refetchOnMountOrArgChange: true,
+    skip: isResetStateLoading || !indexData
   });
   const initialStepChanged = useRef<boolean>(false);
   const router = useRouter();
@@ -94,10 +97,10 @@ const Checkout = () => {
     );
   }
 
-  if (isFetching || isError) {
+  if (isResetStateLoading || isFetching || isError) {
     return (
       <div className="flex flex-col items-center justify-center h-80">
-        {isFetching ? (
+        {isResetStateLoading || isFetching ? (
           <LoaderSpinner />
         ) : (
           <>

package/app-template/src/assets/globals.scss

@@ -2,48 +2,176 @@
 @use './fonts/index.scss' as fonts;
 @use './fonts/pz-icon.css' as icons;
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .header-grid-template-areas {
-    grid-template-areas:
-      'band-l band-m band-r'
-      'main-l main-m main-r'
-      'nav nav nav';
-  }
+@import 'tailwindcss';
 
-  .header-grid-area-band-l {
-    grid-area: band-l;
-  }
+@plugin '@tailwindcss/typography';
 
-  .header-grid-area-band-m {
-    grid-area: band-m;
-  }
+@config '../../tailwind.config.js';
 
-  .header-grid-area-band-r {
-    grid-area: band-r;
-  }
+@source '../app/**/*.{js,ts,jsx,tsx}';
+@source '../pages/**/*.{js,ts,jsx,tsx}';
+@source '../components/**/*.{js,ts,jsx,tsx}';
+@source '../views/**/*.{js,ts,jsx,tsx}';
+@source '../widgets/**/*.{js,ts,jsx,tsx}';
+@source '../hooks/**/*.{js,ts,jsx,tsx}';
+@source '../utils/**/*.{js,ts,jsx,tsx}';
 
-  .header-grid-area-main-l {
-    grid-area: main-l;
-  }
+@theme {
+  --font-sans: 'Jost', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-size-2xs: 0.5rem;
+  --outline-off: none;
 
-  .header-grid-area-main-m {
-    grid-area: main-m;
-  }
+  --width-1-10: 10%;
+  --width-2-10: 20%;
+  --width-3-10: 30%;
+  --width-4-10: 40%;
+  --width-5-10: 50%;
+  --width-6-10: 60%;
+  --width-7-10: 70%;
+  --width-8-10: 80%;
+  --width-9-10: 90%;
 
-  .header-grid-area-main-r {
-    grid-area: main-r;
-  }
+  --transition-property-max-width: max-width;
+
+  --background-image-skeleton-shimmer: linear-gradient(
+    90deg,
+    #d7d7d7 0%,
+    #ebebeb 40%,
+    #eeeeee 60%,
+    #d7d7d7
+  );
 
-  .header-grid-area-nav {
-    grid-area: nav;
+  --animate-skeleton-shimmer: skeleton-shimmer 2s linear infinite;
+
+  @keyframes skeleton-shimmer {
+    to {
+      transform: translateX(100%);
+    }
   }
 
-  .header-m-template-cols {
-    grid-template-columns: auto 1fr 1fr;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-primary: #000000;
+  --color-primary-hover: #181818;
+  --color-primary-foreground: #ffffff;
+  --color-primary-100: #525252;
+  --color-primary-200: #404040;
+  --color-primary-300: #3d3d3d;
+  --color-primary-400: #333333;
+  --color-primary-500: #2d2d2d;
+  --color-primary-600: #292929;
+  --color-primary-700: #2b2b2b;
+  --color-primary-800: #181818;
+  --color-primary-900: #000000;
+
+  --color-secondary: #e95151;
+  --color-secondary-hover: #d03838;
+  --color-secondary-foreground: #ffffff;
+  --color-secondary-100: #ffb7b7;
+  --color-secondary-200: #ff9e9e;
+  --color-secondary-300: #ff8484;
+  --color-secondary-400: #ff6b6b;
+  --color-secondary-500: #e95151;
+  --color-secondary-600: #d72b01;
+  --color-secondary-700: #b61e1e;
+  --color-secondary-800: #9d0505;
+  --color-secondary-900: #830000;
+
+  --color-black: #000000;
+  --color-black-100: #525252;
+  --color-black-200: #404040;
+  --color-black-300: #3d3d3d;
+  --color-black-400: #333333;
+  --color-black-500: #2d2d2d;
+  --color-black-600: #292929;
+  --color-black-700: #2b2b2b;
+  --color-black-800: #181818;
+  --color-black-900: #000000;
+
+  --color-gray: #ebebeb;
+  --color-gray-25: #fdfdfd;
+  --color-gray-50: #f7f7f7;
+  --color-gray-100: #f5f5f5;
+  --color-gray-150: #f4f4f4;
+  --color-gray-200: #eeeeee;
+  --color-gray-300: #ebebeb;
+  --color-gray-400: #d7d7d7;
+  --color-gray-450: #d4d4d4;
+  --color-gray-500: #c9c9c9;
+  --color-gray-600: #9d9d9d;
+  --color-gray-700: #686868;
+  --color-gray-800: #615f62;
+  --color-gray-850: #58585a;
+  --color-gray-900: #4a4f54;
+  --color-gray-950: #424242;
+
+  --color-error: #d72b01;
+  --color-error-100: #e20008;
+
+  --color-success: #7b9d76;
+  --color-success-100: #7b9d76;
+
+  --container-center: true;
+  --container-padding: 0rem;
+  --container-padding-sm: 2rem;
+  --container-padding-2xl: 0rem;
+
+  --breakpoint-xs: 575px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1170px;
+  --breakpoint-2xl: 1370px;
+}
+
+@utility header-grid-template-areas {
+  grid-template-areas:
+    'band-l band-m band-r'
+    'main-l main-m main-r'
+    'nav nav nav';
+}
+
+@utility header-grid-area-band-l {
+  grid-area: band-l;
+}
+
+@utility header-grid-area-band-m {
+  grid-area: band-m;
+}
+
+@utility header-grid-area-band-r {
+  grid-area: band-r;
+}
+
+@utility header-grid-area-main-l {
+  grid-area: main-l;
+}
+
+@utility header-grid-area-main-m {
+  grid-area: main-m;
+}
+
+@utility header-grid-area-main-r {
+  grid-area: main-r;
+}
+
+@utility header-grid-area-nav {
+  grid-area: nav;
+}
+
+@utility header-m-template-cols {
+  grid-template-columns: auto 1fr 1fr;
+}
+
+@utility container {
+  margin-inline: auto;
+}
+
+@layer base {
+  input::placeholder,
+  textarea::placeholder {
+    color: theme(--color-gray-400);
   }
 
   input {
@@ -51,7 +179,7 @@
     &:not(:placeholder-shown),
     &:autofill {
       & + label {
-        @apply top-1/3;
+        top: calc(1 / 3 * 100%);
       }
     }
   }