feat(WEB-304): remaning UI from design system primitives

components/TempDesignSystem/Chip/chip.module.css

@@ -0,0 +1,14 @@
+div.chip {
+  align-items: center;
+  border-radius: var(--Corner-radius-xLarge);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  height: 22px;
+  justify-content: center;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+.primary {
+  background-color: var(--Scandic-Red-90);
+  color: var(--Scandic-Peach-50);
+}

components/TempDesignSystem/Chip/chip.ts

@@ -0,0 +1,7 @@
+import { chipVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface ChipProps
+  extends React.HtmlHTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof chipVariants> {}

components/TempDesignSystem/Chip/index.tsx

@@ -0,0 +1,23 @@
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import { chipVariants } from "./variants"
+
+import type { ChipProps } from "./chip"
+
+export default function Chip({
+  children,
+  className,
+  intent,
+  variant,
+}: ChipProps) {
+  const classNames = chipVariants({
+    className,
+    intent,
+    variant,
+  })
+  return (
+    <Footnote asChild>
+      <div className={classNames}>{children}</div>
+    </Footnote>
+  )
+}

components/TempDesignSystem/Chip/variants.ts

@@ -0,0 +1,18 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./chip.module.css"
+
+export const chipVariants = cva(styles.chip, {
+  variants: {
+    intent: {
+      primary: styles.primary,
+    },
+    variant: {
+      default: styles.default,
+    },
+  },
+  defaultVariants: {
+    intent: "primary",
+    variant: "default",
+  },
+})