@lateralus-ai/shipping-ui 2.0.0-dev.0 → 2.0.0-dev.10

package/src/components/Entry.tsx

@@ -1,64 +1,138 @@
-import { type ReactNode } from "react";
-import { ChatIcon, IssuesIcon } from "../icons";
+import {
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { ChatIcon, IssuesIcon, ReportIcon, StatusIcon } from "../icons";
 import { cn } from "../utils/cn";
 
-export type EntryType = "chat" | "issue";
-export type EntryState = "idle" | "selected";
+export type EntryVariant = "chat" | "issue" | "report";
+/** @deprecated Prefer `EntryVariant`. */
+export type EntryType = EntryVariant;
+export type EntryState = "idle" | "active";
 
 export type EntryProps = {
-  type: EntryType;
+  /** Visual type — drives the default leading icon. */
+  variant?: EntryVariant;
+  /** @deprecated Use `variant`. */
+  type?: EntryVariant;
   state?: EntryState;
-  title: string;
-  subtitle?: string;
-  meta?: ReactNode;
+  title?: ReactNode;
+  /** Secondary line — excerpt, metadata, or highlighted query match. */
+  subtitle?: ReactNode;
+  /** Unread count badge in the title row (Figma red pill). */
+  count?: number;
+  /** Trailing actions (e.g. ellipsis menu). Shown on hover / when forced. */
+  trailing?: ReactNode;
+  /** Override the default variant icon. */
+  icon?: ReactNode;
   onClick?: () => void;
   className?: string;
+  /** @deprecated Use `count` or `trailing`. */
+  meta?: ReactNode;
 };
 
-const typeIcons: Record<EntryType, ReactNode> = {
-  chat: <ChatIcon size="small" />,
-  issue: <IssuesIcon size="small" />,
+const variantIcons: Record<EntryVariant, ReactNode> = {
+  chat: <ChatIcon className="size-4" />,
+  issue: <StatusIcon className="size-4" />,
+  report: <ReportIcon className="size-4" />,
 };
 
+/**
+ * List entry row — Figma `Entry` (389:10001).
+ * Shared by search results and activity lists.
+ *
+ * Renders a `div` (not `<button>`) so trailing controls can be real buttons
+ * without nested-button issues. Whole-row click uses `onClick` + keyboard.
+ */
 export const Entry = ({
+  variant,
   type,
   state = "idle",
-  title,
+  title = "Title",
   subtitle,
-  meta,
+  count,
+  trailing,
+  icon,
   onClick,
   className,
-}: EntryProps) => (
-  <button
-    type="button"
-    data-type={type}
-    data-state={state}
-    onClick={onClick}
-    className={cn(
-      "flex w-full items-start gap-3 rounded-control px-3 py-2.5 text-left transition-colors",
-      "hover:bg-background-secondary",
-      "data-[state=selected]:bg-background-selected data-[state=selected]:text-display-on-dark-primary",
-      "data-[state=selected]:[&_.entry-subtitle]:text-display-on-dark-secondary",
-      "data-[state=selected]:[&_.entry-meta]:text-display-on-dark-tertiary",
-      "data-[state=selected]:[&_.entry-icon]:text-display-on-dark-secondary",
-      className,
-    )}
-  >
-    <span className="entry-icon mt-0.5 shrink-0 text-display-on-light-secondary">
-      {typeIcons[type]}
-    </span>
-    <span className="min-w-0 flex-1">
-      <span className="block truncate text-caption-2-em">{title}</span>
-      {subtitle && (
-        <span className="entry-subtitle mt-0.5 block truncate text-footnote text-display-on-light-tertiary">
-          {subtitle}
-        </span>
+  meta,
+}: EntryProps) => {
+  const resolvedVariant: EntryVariant = variant ?? type ?? "chat";
+  const isInteractive = typeof onClick === "function";
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!onClick) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <div
+      role={isInteractive ? "button" : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
+      data-variant={resolvedVariant}
+      data-state={state}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "group flex w-full items-center gap-4 rounded-control p-2 text-left transition-colors",
+        "hover:bg-[rgba(38,36,32,0.04)]",
+        state === "active" && "bg-[rgba(38,36,32,0.04)]",
+        isInteractive && "cursor-pointer",
+        className,
       )}
-    </span>
-    {meta && (
-      <span className="entry-meta shrink-0 text-footnote text-display-on-light-quaternary">
-        {meta}
+    >
+      <span className="shrink-0 text-display-on-light-secondary">
+        {icon ?? variantIcons[resolvedVariant] ?? (
+          <IssuesIcon className="size-4" />
+        )}
+      </span>
+
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="flex min-h-6 w-full items-center gap-4">
+          <span className="min-w-0 flex-1 truncate text-caption-1-em text-display-on-light-primary">
+            {title}
+          </span>
+          {typeof count === "number" && count > 0 && (
+            <span
+              className="inline-flex min-h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-red-600 px-0.5 text-footnote-em text-white"
+              aria-label={`${count} unread`}
+            >
+              {count > 99 ? "99+" : count}
+            </span>
+          )}
+          {meta != null && typeof count !== "number" && (
+            <span className="shrink-0 text-footnote text-display-on-light-quaternary">
+              {meta}
+            </span>
+          )}
+        </span>
+
+        {(subtitle != null && subtitle !== false) || trailing ? (
+          <span className="flex min-h-6 w-full items-center gap-4">
+            {subtitle != null && subtitle !== false ? (
+              <span className="min-w-0 flex-1 truncate text-caption-2 text-display-on-light-secondary">
+                {subtitle}
+              </span>
+            ) : (
+              <span className="min-w-0 flex-1" />
+            )}
+            {trailing != null && (
+              <span
+                className="inline-flex size-5 shrink-0 items-center justify-center"
+                onClick={(event) => event.stopPropagation()}
+                onKeyDown={(event) => event.stopPropagation()}
+              >
+                {trailing}
+              </span>
+            )}
+          </span>
+        ) : null}
       </span>
-    )}
-  </button>
-);
+    </div>
+  );
+};

package/src/components/Modal.tsx

@@ -0,0 +1,141 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type ReactNode,
+} from "react";
+import { cn } from "../utils/cn";
+
+export type ModalProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
+
+/** Generic dialog shell — portal, backdrop, focus trap, Escape. */
+export const Modal = DialogPrimitive.Root;
+
+export const ModalTrigger = DialogPrimitive.Trigger;
+
+export const ModalClose = DialogPrimitive.Close;
+
+export type ModalPortalProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Portal
+>;
+
+export const ModalPortal = DialogPrimitive.Portal;
+
+export type ModalOverlayProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Overlay
+>;
+
+/** Dark gray backdrop (app convention; Figma search frames omit overlay). */
+export const ModalOverlay = forwardRef<
+  ElementRef<typeof DialogPrimitive.Overlay>,
+  ModalOverlayProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-[999] bg-grey-900/65 transition-opacity",
+      "data-[state=open]:animate-in data-[state=open]:fade-in",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out",
+      className,
+    )}
+    {...props}
+  />
+));
+ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+export type ModalContentProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> & {
+  /** When false, backdrop is omitted. Defaults to true. */
+  showOverlay?: boolean;
+  overlayClassName?: string;
+};
+
+export const ModalContent = forwardRef<
+  ElementRef<typeof DialogPrimitive.Content>,
+  ModalContentProps
+>(
+  (
+    {
+      className,
+      children,
+      showOverlay = true,
+      overlayClassName,
+      ...props
+    },
+    ref,
+  ) => (
+    <ModalPortal>
+      {showOverlay && <ModalOverlay className={overlayClassName} />}
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-1/2 top-1/2 z-[999] w-full max-w-xl -translate-x-1/2 -translate-y-1/2",
+          "overflow-hidden rounded-xl border border-divider-primary bg-background-primary shadow-raise3",
+          "outline-none",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-90",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  ),
+);
+ModalContent.displayName = DialogPrimitive.Content.displayName;
+
+export type ModalTitleProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Title
+>;
+
+export const ModalTitle = forwardRef<
+  ElementRef<typeof DialogPrimitive.Title>,
+  ModalTitleProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-subheader-em text-display-on-light-primary", className)}
+    {...props}
+  />
+));
+ModalTitle.displayName = DialogPrimitive.Title.displayName;
+
+export type ModalDescriptionProps = ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Description
+>;
+
+export const ModalDescription = forwardRef<
+  ElementRef<typeof DialogPrimitive.Description>,
+  ModalDescriptionProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-caption-2 text-display-on-light-secondary", className)}
+    {...props}
+  />
+));
+ModalDescription.displayName = DialogPrimitive.Description.displayName;
+
+export type ModalHeaderSlotProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const ModalHeaderSlot = ({
+  children,
+  className,
+}: ModalHeaderSlotProps) => (
+  <div className={cn("shrink-0", className)}>{children}</div>
+);
+
+export type ModalBodyProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const ModalBody = ({ children, className }: ModalBodyProps) => (
+  <div className={cn("min-h-0 overflow-auto", className)}>{children}</div>
+);

package/src/components/Tabs.tsx

@@ -1,48 +1,146 @@
-import { cn } from "../utils/cn";
-import { Tab } from "./Tab";
-
-export type TabsType = "tabs" | "pills";
-
-export type TabsItem = {
-  label: string;
-};
-
-export type TabsProps = {
-  type?: TabsType;
-  items: TabsItem[];
-  activeIndex: number;
-  onChange: (index: number) => void;
-  className?: string;
-};
-
-export const Tabs = ({
-  type = "tabs",
-  items,
-  activeIndex,
-  onChange,
-  className,
-}: TabsProps) => (
-  <div
-    role="tablist"
-    className={cn(
-      "flex gap-1",
-      type === "pills" && "rounded-control bg-background-secondary p-1",
-      className,
-    )}
-  >
-    {items.map((item, index) => (
-      <Tab
-        key={item.label}
-        label={item.label}
-        state={index === activeIndex ? "active" : "idle"}
-        onClick={() => onChange(index)}
-        className={cn(
-          type === "pills" && "rounded-control px-3 py-1.5",
-          type === "pills" &&
-            index === activeIndex &&
-            "bg-white shadow-raise1 data-[state=active]:after:hidden",
-        )}
-      />
-    ))}
-  </div>
-);
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type ReactNode,
+} from "react";
+import { cn } from "../utils/cn";
+
+export type TabsType = "tabs" | "pills";
+
+/** Soft = search filters (filled idle). Solid = workflow shell (ghost idle, blue active). */
+export type TabsAppearance = "soft" | "solid";
+
+type TabsContextValue = {
+  type: TabsType;
+  appearance: TabsAppearance;
+};
+
+const TabsContext = createContext<TabsContextValue>({
+  type: "tabs",
+  appearance: "soft",
+});
+
+export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+  type?: TabsType;
+  /** Only applies when `type="pills"`. Defaults to `soft`. */
+  appearance?: TabsAppearance;
+};
+
+export const Tabs = ({
+  type = "tabs",
+  appearance = "soft",
+  className,
+  children,
+  ...props
+}: TabsProps) => (
+  <TabsContext.Provider value={{ type, appearance }}>
+    <TabsPrimitive.Root
+      className={cn("flex flex-col", className)}
+      data-type={type}
+      data-appearance={type === "pills" ? appearance : undefined}
+      {...props}
+    >
+      {children}
+    </TabsPrimitive.Root>
+  </TabsContext.Provider>
+);
+
+export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
+
+export const TabsList = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, ...props }, ref) => {
+  const { type } = useContext(TabsContext);
+
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        "flex items-center",
+        type === "tabs" && "gap-6 border-b border-divider-primary",
+        type === "pills" && "gap-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+export type TabsTriggerProps = ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Trigger
+> & {
+  children: ReactNode;
+};
+
+export const TabsTrigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  TabsTriggerProps
+>(({ className, children, ...props }, ref) => {
+  const { type, appearance } = useContext(TabsContext);
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "inline-flex items-center justify-center gap-2.5 transition-colors outline-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        type === "tabs" && [
+          "relative h-12 gap-2 px-0 py-0 text-caption-2 text-display-on-light-secondary",
+          "hover:text-display-on-light-primary",
+          "data-[state=active]:text-caption-2-em data-[state=active]:text-display-on-light-primary",
+          "data-[state=active]:after:absolute data-[state=active]:after:inset-x-0 data-[state=active]:after:-bottom-px",
+          "data-[state=active]:after:h-0.5 data-[state=active]:after:rounded-full data-[state=active]:after:bg-grey-900",
+        ],
+        type === "pills" &&
+          appearance === "soft" && [
+            "min-h-9 rounded-full px-3 py-1 text-caption-2-em",
+            "bg-grey-100 text-display-on-light-secondary",
+            "hover:bg-grey-200",
+            "data-[state=active]:bg-accent-bg-light data-[state=active]:text-display-on-light-primary",
+          ],
+        type === "pills" &&
+          appearance === "solid" && [
+            "min-h-9 rounded-full px-3 py-1 text-caption-2-em",
+            "bg-transparent text-display-on-light-primary",
+            "hover:bg-grey-900/[0.04]",
+            "data-[state=active]:bg-blue-600 data-[state=active]:text-white",
+            "data-[state=active]:hover:bg-blue-600",
+          ],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </TabsPrimitive.Trigger>
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+export type TabsContentProps = ComponentPropsWithoutRef<
+  typeof TabsPrimitive.Content
+>;
+
+export const TabsContent = forwardRef<
+  ElementRef<typeof TabsPrimitive.Content>,
+  TabsContentProps
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn("outline-none", className)}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+/** @deprecated Prefer Tabs + TabsTrigger. Kept for Storybook atom demos. */
+export type TabsItem = {
+  label: string;
+  value?: string;
+  count?: number;
+};

package/src/components/index.ts

@@ -1,13 +1,43 @@
-export { Input, type InputProps, type InputState } from "./Input";
-export { ReportInput, type ReportInputProps, type ReportInputState } from "./ReportInput";
-export { InputType, type InputTypeProps, type InputTypeKind, type InputTypeState } from "./InputType";
-export { Chip, type ChipProps, type ChipVariant } from "./Chip";
-export { Checkbox, type CheckboxProps } from "./Checkbox";
-export { Tab, type TabProps, type TabState } from "./Tab";
-export { Tabs, type TabsProps, type TabsItem, type TabsType } from "./Tabs";
-export { Header, type HeaderProps, type HeaderVariant } from "./Header";
-export { Entry, type EntryProps, type EntryType, type EntryState } from "./Entry";
-export { EmptyState, type EmptyStateProps } from "./EmptyState";
-export { ModalPanel } from "./ModalPanel";
-export * from "./PdfViewer/";
-export * from "./DocumentEditor";
+export { Input, type InputProps, type InputState } from "./Input";
+export { ReportInput, type ReportInputProps, type ReportInputState } from "./ReportInput";
+export { InputType, type InputTypeProps, type InputTypeKind, type InputTypeState } from "./InputType";
+export { Chip, type ChipProps, type ChipVariant } from "./Chip";
+export { Checkbox, type CheckboxProps } from "./Checkbox";
+export { Tab, type TabProps, type TabState } from "./Tab";
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentProps,
+  type TabsItem,
+  type TabsType,
+  type TabsAppearance,
+} from "./Tabs";
+export { Header, type HeaderProps, type HeaderVariant } from "./Header";
+export { Entry, type EntryProps, type EntryType, type EntryState, type EntryVariant } from "./Entry";
+export { EmptyState, type EmptyStateProps } from "./EmptyState";
+export {
+  Modal,
+  ModalTrigger,
+  ModalClose,
+  ModalPortal,
+  ModalOverlay,
+  ModalContent,
+  ModalTitle,
+  ModalDescription,
+  ModalHeaderSlot,
+  ModalBody,
+  type ModalProps,
+  type ModalOverlayProps,
+  type ModalContentProps,
+  type ModalTitleProps,
+  type ModalDescriptionProps,
+  type ModalBodyProps,
+} from "./Modal";
+export { ModalPanel } from "./ModalPanel";
+export * from "./PdfViewer/";
+export * from "./DocumentEditor";

package/src/icons/arrow-paths.ts

@@ -1,8 +1,8 @@
-export const ARROW_PATHS = {
-  left: {
-    large: { d: "M10.2217 6.21973C10.5146 5.9271 10.9894 5.92692 11.2822 6.21973C11.5749 6.51254 11.5748 6.98742 11.2822 7.28027L7.56055 11.002H18.2549C18.6688 11.0023 19.0049 11.3379 19.0049 11.752C19.0049 12.166 18.6688 12.5016 18.2549 12.502H7.56055L11.2822 16.2236C11.5748 16.5165 11.5748 16.9914 11.2822 17.2842C10.9894 17.5769 10.5146 17.5768 10.2217 17.2842L5.21973 12.2822C5.16331 12.2258 5.12062 12.1611 5.08594 12.0938C5.07633 12.0751 5.06469 12.0576 5.05664 12.0381C5.04919 12.02 5.04504 12.0009 5.03906 11.9824C5.01544 11.9095 5 11.8327 5 11.752C5 11.6709 5.01525 11.5937 5.03906 11.5205C5.04453 11.5037 5.04801 11.4862 5.05469 11.4697L5.05859 11.46C5.06783 11.4381 5.08061 11.4182 5.0918 11.3975C5.12559 11.3348 5.16683 11.2746 5.21973 11.2217L10.2217 6.21973Z" },
-  },
-  right: {
-    large: { d: "M13.7808 17.282C13.4878 17.5746 13.013 17.5748 12.7202 17.282C12.4276 16.9892 12.4276 16.5143 12.7202 16.2214L16.4419 12.4998L5.74756 12.4998C5.33361 12.4995 4.99756 12.1638 4.99756 11.7498C4.99756 11.3357 5.3336 11.0001 5.74756 10.9998L16.4419 10.9998L12.7202 7.27808C12.4277 6.98524 12.4276 6.51036 12.7202 6.21753C13.013 5.92476 13.4879 5.9249 13.7808 6.21753L18.7827 11.2195C18.8391 11.2759 18.8818 11.3406 18.9165 11.408C18.9261 11.4266 18.9378 11.4441 18.9458 11.4636C18.9533 11.4817 18.9574 11.5008 18.9634 11.5193C18.987 11.5922 19.0024 11.669 19.0024 11.7498C19.0024 11.8309 18.9872 11.908 18.9634 11.9812C18.9579 11.998 18.9544 12.0155 18.9478 12.032L18.9438 12.0417C18.9346 12.0636 18.9218 12.0835 18.9106 12.1042C18.8769 12.1669 18.8356 12.2271 18.7827 12.28L13.7808 17.282Z" },
-  },
-} as const;
+export const ARROW_PATHS = {
+  left: {
+    large: { d: "M10.2217 6.21973C10.5146 5.9271 10.9894 5.92692 11.2822 6.21973C11.5749 6.51254 11.5748 6.98742 11.2822 7.28027L7.56055 11.002H18.2549C18.6688 11.0023 19.0049 11.3379 19.0049 11.752C19.0049 12.166 18.6688 12.5016 18.2549 12.502H7.56055L11.2822 16.2236C11.5748 16.5165 11.5748 16.9914 11.2822 17.2842C10.9894 17.5769 10.5146 17.5768 10.2217 17.2842L5.21973 12.2822C5.16331 12.2258 5.12062 12.1611 5.08594 12.0938C5.07633 12.0751 5.06469 12.0576 5.05664 12.0381C5.04919 12.02 5.04504 12.0009 5.03906 11.9824C5.01544 11.9095 5 11.8327 5 11.752C5 11.6709 5.01525 11.5937 5.03906 11.5205C5.04453 11.5037 5.04801 11.4862 5.05469 11.4697L5.05859 11.46C5.06783 11.4381 5.08061 11.4182 5.0918 11.3975C5.12559 11.3348 5.16683 11.2746 5.21973 11.2217L10.2217 6.21973Z" },
+  },
+  right: {
+    large: { d: "M13.7808 17.282C13.4878 17.5746 13.013 17.5748 12.7202 17.282C12.4276 16.9892 12.4276 16.5143 12.7202 16.2214L16.4419 12.4998L5.74756 12.4998C5.33361 12.4995 4.99756 12.1638 4.99756 11.7498C4.99756 11.3357 5.3336 11.0001 5.74756 10.9998L16.4419 10.9998L12.7202 7.27808C12.4277 6.98524 12.4276 6.51036 12.7202 6.21753C13.013 5.92476 13.4879 5.9249 13.7808 6.21753L18.7827 11.2195C18.8391 11.2759 18.8818 11.3406 18.9165 11.408C18.9261 11.4266 18.9378 11.4441 18.9458 11.4636C18.9533 11.4817 18.9574 11.5008 18.9634 11.5193C18.987 11.5922 19.0024 11.669 19.0024 11.7498C19.0024 11.8309 18.9872 11.908 18.9634 11.9812C18.9579 11.998 18.9544 12.0155 18.9478 12.032L18.9438 12.0417C18.9346 12.0636 18.9218 12.0835 18.9106 12.1042C18.8769 12.1669 18.8356 12.2271 18.7827 12.28L13.7808 17.282Z" },
+  },
+} as const;

package/src/icons/chevron-paths.ts

@@ -1,17 +1,17 @@
-export const CHEVRON_PATHS = {
-  right: {
-    small: { d: "M10.9288 7.74314C11.0393 7.92719 11.0213 8.16626 10.8741 8.332L6.87414 12.832C6.69075 13.0383 6.37446 13.0572 6.16809 12.874C5.96185 12.6906 5.94294 12.3743 6.12609 12.1679L9.83117 7.99997L6.12609 3.832C5.94294 3.62563 5.96185 3.30933 6.16809 3.12595C6.37446 2.94274 6.69075 2.96168 6.87414 3.16794L10.8741 7.66794L10.9288 7.74314Z" },
-  },
-  left: {
-    small: { d: "M6.07117 8.25686C5.96073 8.07281 5.97872 7.83374 6.12586 7.668L10.1259 3.168C10.3093 2.96174 10.6255 2.94279 10.8319 3.12601C11.0381 3.30938 11.0571 3.62568 10.8739 3.83206L7.16883 8.00003L10.8739 12.168C11.0571 12.3744 11.0381 12.6907 10.8319 12.8741C10.6255 13.0573 10.3093 13.0383 10.1259 12.8321L6.12586 8.33206L6.07117 8.25686Z" },
-  },
-  down: {
-    small: { d: "M12.168 6.12597C12.3744 5.94274 12.6906 5.96165 12.874 6.16797C13.0572 6.37436 13.0383 6.69063 12.832 6.87402L8.33203 10.874C8.14266 11.0421 7.85733 11.0421 7.66797 10.874L3.16797 6.87402C2.96165 6.69063 2.94274 6.37436 3.12597 6.16797C3.30936 5.96165 3.62563 5.94274 3.83203 6.12597L8 9.83007L12.168 6.12597Z" },
-  },
-  up: {
-    small: { d: "M7.74314 6.07117C7.92719 5.96073 8.16626 5.97872 8.332 6.12586L12.832 10.1259C13.0383 10.3093 13.0572 10.6255 12.874 10.8319C12.6906 11.0381 12.3743 11.0571 12.1679 10.8739L7.99997 7.16883L3.832 10.8739C3.62563 11.0571 3.30933 11.0381 3.12595 10.8319C2.94274 10.6255 2.96168 10.3093 3.16794 10.1259L7.66794 6.12586L7.74314 6.07117Z" },
-  },
-  upDown: {
-    small: { d: "M12.1679 11.1259C12.3743 10.9426 12.6906 10.9615 12.874 11.1679C13.0572 11.3742 13.0383 11.6905 12.832 11.8739L8.332 15.8739C8.14266 16.0419 7.85728 16.0419 7.66794 15.8739L3.16794 11.8739C2.96165 11.6905 2.94278 11.3742 3.12595 11.1679C3.30933 10.9615 3.6256 10.9426 3.832 11.1259L7.99997 14.83L12.1679 11.1259ZM7.74313 0.0711718C7.92719 -0.0392683 8.16625 -0.021282 8.332 0.125859L12.832 4.12586C13.0383 4.30925 13.0572 4.62554 12.874 4.83191C12.6906 5.03814 12.3743 5.05706 12.1679 4.87391L7.99997 1.16883L3.832 4.87391C3.62563 5.05706 3.30932 5.03814 3.12595 4.83191C2.94274 4.62554 2.96168 4.30925 3.16794 4.12586L7.66794 0.125859L7.74313 0.0711718Z" },
-  },
-} as const;
+export const CHEVRON_PATHS = {
+  right: {
+    small: { d: "M10.9288 7.74314C11.0393 7.92719 11.0213 8.16626 10.8741 8.332L6.87414 12.832C6.69075 13.0383 6.37446 13.0572 6.16809 12.874C5.96185 12.6906 5.94294 12.3743 6.12609 12.1679L9.83117 7.99997L6.12609 3.832C5.94294 3.62563 5.96185 3.30933 6.16809 3.12595C6.37446 2.94274 6.69075 2.96168 6.87414 3.16794L10.8741 7.66794L10.9288 7.74314Z" },
+  },
+  left: {
+    small: { d: "M6.07117 8.25686C5.96073 8.07281 5.97872 7.83374 6.12586 7.668L10.1259 3.168C10.3093 2.96174 10.6255 2.94279 10.8319 3.12601C11.0381 3.30938 11.0571 3.62568 10.8739 3.83206L7.16883 8.00003L10.8739 12.168C11.0571 12.3744 11.0381 12.6907 10.8319 12.8741C10.6255 13.0573 10.3093 13.0383 10.1259 12.8321L6.12586 8.33206L6.07117 8.25686Z" },
+  },
+  down: {
+    small: { d: "M12.168 6.12597C12.3744 5.94274 12.6906 5.96165 12.874 6.16797C13.0572 6.37436 13.0383 6.69063 12.832 6.87402L8.33203 10.874C8.14266 11.0421 7.85733 11.0421 7.66797 10.874L3.16797 6.87402C2.96165 6.69063 2.94274 6.37436 3.12597 6.16797C3.30936 5.96165 3.62563 5.94274 3.83203 6.12597L8 9.83007L12.168 6.12597Z" },
+  },
+  up: {
+    small: { d: "M7.74314 6.07117C7.92719 5.96073 8.16626 5.97872 8.332 6.12586L12.832 10.1259C13.0383 10.3093 13.0572 10.6255 12.874 10.8319C12.6906 11.0381 12.3743 11.0571 12.1679 10.8739L7.99997 7.16883L3.832 10.8739C3.62563 11.0571 3.30933 11.0381 3.12595 10.8319C2.94274 10.6255 2.96168 10.3093 3.16794 10.1259L7.66794 6.12586L7.74314 6.07117Z" },
+  },
+  upDown: {
+    small: { d: "M12.1679 11.1259C12.3743 10.9426 12.6906 10.9615 12.874 11.1679C13.0572 11.3742 13.0383 11.6905 12.832 11.8739L8.332 15.8739C8.14266 16.0419 7.85728 16.0419 7.66794 15.8739L3.16794 11.8739C2.96165 11.6905 2.94278 11.3742 3.12595 11.1679C3.30933 10.9615 3.6256 10.9426 3.832 11.1259L7.99997 14.83L12.1679 11.1259ZM7.74313 0.0711718C7.92719 -0.0392683 8.16625 -0.021282 8.332 0.125859L12.832 4.12586C13.0383 4.30925 13.0572 4.62554 12.874 4.83191C12.6906 5.03814 12.3743 5.05706 12.1679 4.87391L7.99997 1.16883L3.832 4.87391C3.62563 5.05706 3.30932 5.03814 3.12595 4.83191C2.94274 4.62554 2.96168 4.30925 3.16794 4.12586L7.66794 0.125859L7.74313 0.0711718Z" },
+  },
+} as const;