feat: add component form-login

add component form-login
2025-02-21 16:44:51 +07:00 · 2025-02-21 16:44:51 +07:00 · 7c4440cc6b
commit 7c4440cc6b
parent eafe70a021
13 changed files with 358 additions and 23 deletions
--- a/app/components/icons/left-arrow.tsx
+++ b/app/components/icons/left-arrow.tsx
@ -0,0 +1,23 @@
+import type { JSX, SVGProps } from 'react'
+
+export const LeftArrow = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={100}
+      height={100}
+      viewBox="0 0 70 70"
+      fill="currentColor"
+      {...properties}
+    >
+      <path
+        d="M1.60494 17.938C1.05815 18.4849 0.750977 19.2266 0.750977 20C0.750977 20.7734 1.05815 21.5152 1.60494 22.0621L18.1045 38.5617C18.6546 39.093 19.3914 39.387 20.1561 39.3803C20.9208 39.3737 21.6524 39.0669 22.1932 38.5262C22.7339 37.9854 23.0407 37.2539 23.0473 36.4891C23.054 35.7244 22.76 34.9876 22.2287 34.4375L10.7079 22.9167H49.3333C50.1068 22.9167 50.8487 22.6094 51.3957 22.0624C51.9426 21.5154 52.2499 20.7736 52.2499 20C52.2499 19.2265 51.9426 18.4846 51.3957 17.9376C50.8487 17.3907 50.1068 17.0834 49.3333 17.0834H10.7079L22.2287 5.56254C22.76 5.01245 23.054 4.27569 23.0473 3.51095C23.0407 2.74621 22.7339 2.01467 22.1932 1.4739C21.6524 0.933127 20.9208 0.626385 20.1561 0.619739C19.3914 0.613094 18.6546 0.907077 18.1045 1.43837L1.60494 17.938Z"
+        fill="#2E2F7C"
+      />
+    </svg>
+  )
+}
--- a/app/components/icons/link-icon.tsx
+++ b/app/components/icons/link-icon.tsx
@ -12,7 +12,7 @@ export const LinkIcon = (
      height={95}
      stroke="currentColor"
      fill="currentColor"
-      stroke-width="0"
+      strokeWidth="0"
      viewBox="0 0 1024 1024"
      {...properties}
    >
--- a/app/components/ui/banner.tsx
+++ b/app/components/ui/banner.tsx
@ -4,7 +4,7 @@ import { APP } from '~/data/meta'

 export const Banner = () => {
  return (
-    <div className="min-h-[65px] bg-amber-400 sm:mx-10">
+    <div className="min-h-[65px] sm:mx-10">
      <div className="relative">
        <Link
          to="/#"
--- a/app/components/ui/carousel.tsx
+++ b/app/components/ui/carousel.tsx
@ -9,7 +9,7 @@ import { Button } from './button'

 export const Carousel = (properties: TNews) => {
  const location = useLocation()
-  const hasCategory = location.pathname.includes('/categories/')
+  const hasCategory = location.pathname.includes('/category/')

  const { title, description, items, type } = properties
  return (
@ -71,8 +71,11 @@ export const Carousel = (properties: TNews) => {
              )}
            >
              <div className={`${type === 'hero' ? 'hidden' : ''} `}>
-                {tags?.map((item) => (
-                  <span className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1">
+                {tags?.map((item, index) => (
+                  <span
+                    key={index}
+                    className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
+                  >
                    {item}
                  </span>
                ))}
@ -97,7 +100,7 @@ export const Carousel = (properties: TNews) => {
                size="block"
                as={Link}
                to={`detail/${slug}`}
-                className={twMerge('', type === 'hero' ? '' : 'mb-5 sm:mb-0')}
+                className={twMerge('', type === 'hero' ? '' : 'mb-5')}
              >
                View More
              </Button>
--- a/app/components/ui/form-login.tsx
+++ b/app/components/ui/form-login.tsx
@ -0,0 +1,112 @@
+// import { EyeIcon, EyeOffIcon } from 'lucide-react'
+import { useState } from 'react'
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+const FormLogin = () => {
+  const [showPassword, setShowPassword] = useState(false)
+
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="w-full max-w-md p-6">
+        <div className="absolute top-[80px] left-[50px]">
+          <Link
+            to="/#"
+            className="mt-2 h-full py-2"
+          >
+            <LeftArrow
+              width={'70px'}
+              height={'70px'}
+            ></LeftArrow>
+          </Link>
+        </div>
+
+        <div className="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[100px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center">
+          <p className="text-[#565658]">
+            Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!
+          </p>
+        </div>
+
+        <form>
+          {/* Input Email / No Telepon */}
+          <div className="mb-4">
+            <label
+              htmlFor="email"
+              className="mb-1 block text-gray-700"
+            >
+              Email/No. Telepon
+            </label>
+            <input
+              type="text"
+              placeholder="Contoh: legal@legalgo.id"
+              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+            />
+          </div>
+
+          {/* Input Password */}
+          <div className="relative mb-4">
+            <label
+              htmlFor="password"
+              className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
+            >
+              Kata Sandi
+            </label>
+            <input
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Masukkan Kata Sandi"
+              className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+            />
+            <button
+              type="button"
+              className="absolute top-9 right-3 text-gray-500"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+            </button>
+          </div>
+
+          {/* Lupa Kata Sandi */}
+          <div className="mb-4 flex justify-between">
+            <span className="text-gray-600">Lupa Kata Sandi?</span>
+            <Link
+              to="/reset-password"
+              className="font-semibold text-[#2E2F7C]"
+            >
+              Reset Kata Sandi
+            </Link>
+          </div>
+
+          {/* Tombol Masuk */}
+          <button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Masuk
+          </button>
+        </form>
+
+        {/* Link Daftar */}
+        <div className="mt-4 text-center text-sm">
+          Belum punya akun?{' '}
+          <Link
+            to="/register"
+            className="font-semibold text-[#2E2F7C]"
+          >
+            Daftar Disini
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FormLogin
--- a/app/components/ui/modal.tsx
+++ b/app/components/ui/modal.tsx
@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+
+interface ModalProperties {
+  isOpen: boolean
+  onClose: () => void
+  children: ReactNode
+}
+
+const Modal = ({ isOpen, onClose, children }: ModalProperties) => {
+  if (!isOpen) return
+
+  return (
+    <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
+      {/* Modal Container */}
+      <div className="animate-fade-in relative rounded-lg bg-white p-6 shadow-lg">
+        {/* Tombol Close */}
+        <button
+          onClick={onClose}
+          className="absolute top-2 right-2 text-gray-500 hover:text-gray-800"
+        >
+          ✖
+        </button>
+        <h1>test</h1>
+        {/* Modal Content */}
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Modal
--- a/app/pages/news-categories/data.ts
+++ b/app/pages/news-categories/data.ts
@ -20,6 +20,102 @@ export const BERITA: TNews = {
  description: 'Berita Terhangat hari ini',
  type: 'grid',
  items: [
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
+    {
+      title: 'Travelling as a way of self-discovery and progress',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
+      featured: '/images/news-2.jpg',
+      tags: ['Hukum Property'],
+      slug: 'travelling-as-a-way-of-self-discovery-and-progress',
+    },
    {
      title: 'Travelling as a way of self-discovery and progress',
      content:
--- a/app/pages/news-detail/data.ts
+++ b/app/pages/news-detail/data.ts
@ -2,8 +2,39 @@ import type { TNews, TNewsDetail } from '~/types/news'

 export const CONTENT: TNewsDetail = {
  title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
-  content:
-    'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
+  content: `<div class="container">
+        <h1>Pengertian dan Jenis Hukum</h1><p>Hukum adalah sistem aturan yang dibuat dan ditegakkan oleh lembaga berwenang untuk mengatur perilaku manusia dalam masyarakat. Hukum bertujuan untuk menciptakan ketertiban, keadilan, dan keseimbangan dalam kehidupan sosial.</p>
+        
+        <h2>Jenis-Jenis Hukum</h2>
+        <h3>1. Hukum Berdasarkan Sumbernya</h3>
+        <ul>
+            <li><strong>Hukum Undang-Undang:</strong> Hukum yang tertulis dan dibuat oleh pemerintah atau legislatif.</li>
+            <li><strong>Hukum Kebiasaan:</strong> Hukum yang berkembang berdasarkan adat dan kebiasaan masyarakat.</li>
+            <li><strong>Hukum Yurisprudensi:</strong> Hukum yang ditetapkan berdasarkan keputusan hakim sebelumnya.</li>
+            <li><strong>Hukum Traktat:</strong> Hukum yang berasal dari perjanjian antarnegara.</li>
+        </ul>
+        
+        <h3>2. Hukum Berdasarkan Wilayah Berlakunya</h3>
+        <ul>
+            <li><strong>Hukum Nasional:</strong> Hukum yang berlaku dalam suatu negara tertentu.</li>
+            <li><strong>Hukum Internasional:</strong> Hukum yang mengatur hubungan antara negara-negara.</li>
+        </ul>
+        
+        <h3>3. Hukum Berdasarkan Isinya</h3>
+        <ul>
+            <li><strong>Hukum Publik:</strong> Hukum yang mengatur hubungan antara negara dengan warga negara, termasuk hukum pidana, tata negara, dan administrasi.</li>
+            <li><strong>Hukum Privat:</strong> Hukum yang mengatur hubungan antarindividu, seperti hukum perdata dan dagang.</li>
+        </ul>
+        
+        <h3>4. Hukum Berdasarkan Bentuknya</h3>
+        <ul>
+            <li><strong>Hukum Tertulis:</strong> Hukum yang dicantumkan dalam peraturan resmi seperti undang-undang.</li>
+            <li><strong>Hukum Tidak Tertulis:</strong> Hukum yang hidup dalam masyarakat dan diakui oleh norma sosial.</li>
+        </ul>
+        
+        <h2>Kesimpulan</h2>
+        <p>Hukum memainkan peran penting dalam mengatur kehidupan masyarakat. Dengan adanya hukum, ketertiban dan keadilan dapat terwujud. Memahami jenis-jenis hukum membantu kita dalam mengetahui hak dan kewajiban sebagai warga negara.</p>
+    </div>`,
  featured: '/images/news-1.jpg',
  slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
  author: 'John Doe',
--- a/app/pages/news-detail/index.tsx
+++ b/app/pages/news-detail/index.tsx
@ -41,21 +41,7 @@ export const NewsDetailPage = () => {
              className="object-center"
            />
          </div>
-          <article className="my-8">
-            <div>{content}</div>
-            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt
-            asperiores corporis, facilis praesentium tenetur rerum officiis!
-            Perspiciatis, sed cupiditate. Libero eos, cupiditate perferendis
-            delectus accusamus culpa veniam voluptatem sequi soluta hic optio
-            dolor, provident perspiciatis nihil sit. Est facere itaque natus
-            saepe odio ipsam recusandae at mollitia deserunt. Laboriosam atque
-            id aperiam tempore corporis magnam dolores vitae, maxime modi
-            quibusdam architecto sed aliquam error suscipit distinctio ratione
-            dolorum exercitationem vero sapiente? Commodi rem quidem vitae
-            eaque, consequuntur maxime facilis ea aliquam odio atque magni
-            delectus rerum fugiat aliquid, qui omnis incidunt libero quasi
-            distinctio exercitationem, reprehenderit minus officiis velit enim.
-          </article>
+          <article className="pross prose-stone">{content}</article>

          <div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
            <div className="flex flex-col">
--- a/app/root.tsx
+++ b/app/root.tsx
@ -43,6 +43,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
+        <link
+          rel="stylesheet"
+          href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css"
+        />
        <meta charSet="utf-8" />
        <meta
          name="viewport"
--- a/app/routes/_layout.register.tsx
+++ b/app/routes/_layout.register.tsx
@ -0,0 +1,11 @@
+import FormLogin from '~/components/ui/form-login'
+
+const RegisterLayout = () => {
+  return (
+    <main>
+      <FormLogin />
+    </main>
+  )
+}
+
+export default RegisterLayout
--- a/package.json
+++ b/package.json
@ -31,6 +31,7 @@
    "@commitlint/is-ignored": "^19.6.0",
    "@eslint/js": "^9.19.0",
    "@react-router/dev": "^7.1.3",
+    "@tailwindcss/typography": "^0.5.16",
    "@tailwindcss/vite": "^4.0.0",
    "@types/node": "^20.17.16",
    "@types/react": "^19.0.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -54,6 +54,9 @@ importers:
      '@react-router/dev':
        specifier: ^7.1.3
        version: 7.1.3(@react-router/serve@7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3))(@types/node@20.17.16)(babel-plugin-macros@3.1.0)(lightningcss@1.29.1)(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1))
+      '@tailwindcss/typography':
+        specifier: ^0.5.16
+        version: 0.5.16(tailwindcss@4.0.1)
      '@tailwindcss/vite':
        specifier: ^4.0.0
        version: 4.0.1(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1))
@ -1245,6 +1248,11 @@ packages:
    resolution: {integrity: sha512-3z1SpWoDeaA6K6jd92CRrGyDghOcRILEgyWVHRhaUm/tcpiazwJpU9BSG0xB7GGGnl9capojaC+zme/nKsZd/w==}
    engines: {node: '>= 10'}

+  '@tailwindcss/typography@0.5.16':
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
  '@tailwindcss/vite@4.0.1':
    resolution: {integrity: sha512-ZkwMBA7uR+nyrafIZI8ce3PduE0dDVFVmxmInCUPTN17Jgy6RfEPXzqtL5fz658eDDxKa5xZ+gmiTt+5AMD0pw==}
    peerDependencies:
@ -1694,6 +1702,11 @@ packages:
    resolution: {integrity: sha512-ljnSOCOiMbklF+dwPbpooyB78foId02vUrTDogWzu6ca2DCNB7Kc/BHEGBnYOlUYtwXvSW0mWTwaiO2pwFIoRg==}
    hasBin: true

+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
  csstype@3.1.3:
    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}

@ -2731,6 +2744,9 @@ packages:
  lodash.camelcase@4.3.0:
    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}

+  lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+
  lodash.isplainobject@4.0.6:
    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}

@ -3100,6 +3116,10 @@ packages:
    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
    engines: {node: '>= 0.4'}

+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
  postcss@8.5.1:
    resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
    engines: {node: ^10 || ^12 || >=14}
@ -5111,6 +5131,14 @@ snapshots:
      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.1
      '@tailwindcss/oxide-win32-x64-msvc': 4.0.1

+  '@tailwindcss/typography@0.5.16(tailwindcss@4.0.1)':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.0.1
+
  '@tailwindcss/vite@4.0.1(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1))':
    dependencies:
      '@tailwindcss/node': 4.0.1
@ -5614,6 +5642,8 @@ snapshots:

  cssbeautify@0.3.1: {}

+  cssesc@3.0.0: {}
+
  csstype@3.1.3: {}

  d3-color@3.1.0: {}
@ -6783,6 +6813,8 @@ snapshots:

  lodash.camelcase@4.3.0: {}

+  lodash.castarray@4.4.0: {}
+
  lodash.isplainobject@4.0.6: {}

  lodash.kebabcase@4.1.1: {}
@ -7108,6 +7140,11 @@ snapshots:

  possible-typed-array-names@1.0.0: {}

+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
  postcss@8.5.1:
    dependencies:
      nanoid: 3.3.8