feat(SW-453): Fixed new filter buttons and updated price in summary

components/TempDesignSystem/Form/FilterChip/Checkbox.tsx

@@ -0,0 +1,7 @@
+import Chip from "./_Chip"
+
+import type { FilterChipCheckboxProps } from "@/types/components/form/filterChip"
+
+export default function CheckboxChip(props: FilterChipCheckboxProps) {
+  return <Chip {...props} type="checkbox" />
+}

components/TempDesignSystem/Form/FilterChip/_Chip/chip.module.css

@@ -0,0 +1,27 @@
+.label {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Small);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  cursor: pointer;
+}
+
+.label[data-selected="true"],
+.label[data-selected="true"]:hover {
+  background-color: var(--Primary-Light-Surface-Normal);
+  border-color: var(--Base-Border-Hover);
+}
+
+.label:hover {
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+  border-color: var(--Base-Border-Subtle);
+}
+
+.label[data-disabled="true"] {
+  background-color: var(--Base-Button-Primary-Fill-Disabled);
+  border-color: var(--Base-Button-Primary-Fill-Disabled);
+  cursor: not-allowed;
+}

components/TempDesignSystem/Form/FilterChip/_Chip/index.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from "react"
+import { useFormContext } from "react-hook-form"
+
+import { HeartIcon } from "@/components/Icons"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./chip.module.css"
+
+import { FilterChipProps } from "@/types/components/form/filterChip"
+
+export default function FilterChip({
+  Icon = HeartIcon,
+  iconHeight = 20,
+  iconWidth = 20,
+  id,
+  name,
+  label,
+  type,
+  value,
+  selected,
+  disabled,
+}: FilterChipProps) {
+  const { register } = useFormContext()
+
+  const color = useMemo(() => {
+    if (selected) return "burgundy"
+    if (disabled) return "disabled"
+    return "uiTextPlaceholder"
+  }, [selected, disabled])
+
+  return (
+    <label
+      className={styles.label}
+      data-selected={selected}
+      data-disabled={disabled}
+    >
+      <Icon
+        className={styles.icon}
+        color={color}
+        height={iconHeight}
+        width={iconWidth}
+      />
+      <Caption type="bold" color={color}>
+        {label}
+      </Caption>
+      <input
+        aria-hidden
+        id={id || name}
+        hidden
+        type={type}
+        value={value}
+        disabled={disabled}
+        {...register(name)}
+      />
+    </label>
+  )
+}

components/TempDesignSystem/Tooltip/tooltip.module.css

@@ -15,6 +15,7 @@
   opacity: 0;
   transition: opacity 0.3s;
   max-width: 200px;
+  min-width: 150px;
 }
 
 .tooltipContainer:hover .tooltip {
@@ -31,11 +32,15 @@
 }
 
 .top {
-  bottom: 100%;
+  bottom: calc(100% + 8px);
 }
 
 .bottom {
-  top: 100%;
+  top: calc(100% + 8px);
+}
+
+.bottom.arrowRight {
+  right: 0;
 }
 
 .tooltip::before {