@petnow/ui 3.0.4 → 4.0.0

package/dist/src/components/ui/button.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/src/components/ui/dialog.d.ts

@@ -0,0 +1,13 @@
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import * as React from "react";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/src/components/{mobile → v0}/tabs/Tabs.d.ts

@@ -7,7 +7,7 @@ interface TabItem {
 interface Props<T extends TabItem> {
     tabList: Readonly<T[]>;
     isCuratedcontent?: true;
-    unswipeableContent?: JSX.Element;
+    unswipeableContent?: ReactNode;
     defaultIndex?: number;
     onTabChange?: (index: number) => void;
     disabled?: boolean;

package/dist/src/components/v1/badge/Badge.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+type BadgeType = "filled" | "outlined" | "tinted";
+type BadgeColor = "orange" | "blue" | "red" | "green" | "neutral";
+type BadgeSize = "small" | "large";
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    type?: BadgeType;
+    color?: BadgeColor;
+    size?: BadgeSize;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export { Badge };

package/dist/src/components/v1/badge/Badge.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const TintedWithIcon: Story;
+export declare const OutlinedSmall: Story;
+export declare const TypeColorShowcase: Story;
+export declare const SizeShowcase: Story;

package/dist/src/components/v1/chip/Chip.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    selected?: boolean;
+    onPress?: () => void;
+}
+declare const Chip: ({ className, label, icon: Icon, selected, disabled, onPress, onClick, type, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export { Chip };

package/dist/src/components/v1/chip/Chip.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Chip } from './Chip';
+declare const meta: Meta<typeof Chip>;
+export default meta;
+type Story = StoryObj<typeof Chip>;
+export declare const Default: Story;
+export declare const Selected: Story;
+export declare const WithIcon: Story;
+export declare const Disabled: Story;
+export declare const SelectableGroup: Story;

package/dist/src/components/v1/cta-button/CTAButton.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const ctaButtonVariants: (props?: ({
+    hierarchy?: "primary" | "secondary" | "tertiary" | null | undefined;
+    size?: "small" | "large" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CTAButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof ctaButtonVariants> {
+    label: string | React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    className?: string;
+}
+declare const CTAButton: React.ForwardRefExoticComponent<CTAButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { CTAButton };

package/dist/src/components/v1/cta-button/CTAButton.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CTAButton } from './CTAButton';
+declare const meta: Meta<typeof CTAButton>;
+export default meta;
+type Story = StoryObj<typeof CTAButton>;
+export declare const Default: Story;
+export declare const SecondaryMedium: Story;
+export declare const TertiarySmallWithIcon: Story;
+export declare const Disabled: Story;
+export declare const HierarchyShowcase: Story;
+export declare const SizeShowcase: Story;

package/dist/src/components/v1/icons/action/CancelFilledIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const CancelFilledIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { CancelFilledIcon };

package/dist/src/components/v1/icons/action/CancelIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const CancelIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { CancelIcon };

package/dist/src/components/v1/icons/action/ChevronDownIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ChevronDownIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ChevronDownIcon };

package/dist/src/components/v1/icons/action/ChevronLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ChevronLeftIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ChevronLeftIcon };

package/dist/src/components/v1/icons/action/ChevronRightIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ChevronRightIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ChevronRightIcon };

package/dist/src/components/v1/icons/action/ChevronUpIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ChevronUpIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ChevronUpIcon };

package/dist/src/components/v1/icons/action/FilterIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const FilterIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { FilterIcon };

package/dist/src/components/v1/icons/action/RetryIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const RetryIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { RetryIcon };

package/dist/src/components/v1/icons/action/SortingIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SortingIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { SortingIcon };

package/dist/src/components/v1/icons/static/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const CloseIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { CloseIcon };

package/dist/src/components/v1/icons/static/DeleteIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const DeleteIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { DeleteIcon };

package/dist/src/components/v1/icons/static/RecentIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const RecentIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { RecentIcon };

package/dist/src/components/v1/icons/static/ReportIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ReportIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ReportIcon };

package/dist/src/components/v1/icons/static/ShieldDoneIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ShieldDoneIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ShieldDoneIcon };

package/dist/src/components/v1/popup/Popup.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+type PopupAction = {
+    label: string | React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    onClick?: () => void;
+};
+export interface PopupProps {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    content?: React.ReactNode;
+    confirm?: PopupAction;
+    cancel?: PopupAction;
+    preventEasyClose?: boolean;
+    className?: string;
+}
+declare const Popup: ({ isOpen, setIsOpen, title, description, content, confirm, cancel, preventEasyClose, className, }: PopupProps) => import("react/jsx-runtime").JSX.Element;
+export { Popup };

package/dist/src/components/{mobile → v1}/popup/Popup.stories.d.ts

@@ -1,12 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { default as Popup } from './Popup';
+import { Popup } from './Popup';
 declare const meta: Meta<typeof Popup>;
 export default meta;
 type Story = StoryObj<typeof Popup>;
 export declare const Default: Story;
 export declare const OnlyTitle: Story;
 export declare const OnlyConfirm: Story;
-export declare const OnlyTitleAndConfirm: Story;
-export declare const OnlyImage: Story;
-export declare const DisableOutsideClick: Story;
-export declare const DisableConfirmAndCancelBtn: Story;
+export declare const WithCustomContent: Story;
+export declare const PreventEasyClose: Story;
+export declare const DescriptionOnly: Story;

package/dist/src/components/v1/text-field/TextField.d.ts

@@ -0,0 +1,50 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+interface TextFieldNormalProps extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "size"> {
+    subtitle?: string;
+    isRequired?: boolean;
+    assistiveText?: string | React.ReactNode;
+    errorText?: string;
+    disabled?: boolean;
+    multiLine?: boolean;
+    className?: string;
+    rightElement?: React.ReactNode;
+    showCounter?: boolean;
+    size?: "large" | "small";
+}
+declare const TextFieldNormal: React.ForwardRefExoticComponent<TextFieldNormalProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+declare const textFieldSelectVariants: (props?: ({
+    size?: "small" | "large" | null | undefined;
+    hasError?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface TextFieldSelectProps extends VariantProps<typeof textFieldSelectVariants> {
+    label?: string;
+    placeholder: string;
+    value?: string;
+    isRequired?: boolean;
+    disabled?: boolean;
+    assistiveText?: string | React.ReactNode;
+    errorText?: string;
+    onPress?: () => void;
+    className?: string;
+    size?: "large" | "small";
+}
+declare const TextFieldSelect: ({ label, placeholder, value, isRequired, disabled, assistiveText, errorText, onPress, className, size, }: TextFieldSelectProps) => import("react/jsx-runtime").JSX.Element;
+interface TextFieldWithButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "size"> {
+    subtitle?: string;
+    isRequired?: boolean;
+    assistiveText?: string | React.ReactNode;
+    errorText?: string;
+    disabled?: boolean;
+    multiLine?: boolean;
+    className?: string;
+    showCounter?: boolean;
+    size?: "large" | "small";
+    fieldRightElement?: React.ReactNode;
+    buttonText: string;
+    onButtonClick: () => void;
+    buttonDisabled?: boolean;
+}
+declare const TextFieldWithButton: React.ForwardRefExoticComponent<TextFieldWithButtonProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export { TextFieldNormal, TextFieldSelect, TextFieldWithButton };

package/dist/src/components/v1/text-field/TextField.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TextFieldNormal } from './TextField';
+declare const meta: Meta<typeof TextFieldNormal>;
+export default meta;
+type Story = StoryObj<typeof TextFieldNormal>;
+export declare const Normal: Story;
+export declare const NormalWithErrorAndCounter: Story;
+export declare const Multiline: Story;
+export declare const SelectField: Story;
+export declare const SelectFieldSmallError: Story;
+export declare const WithButton: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@petnow/ui",
-  "version": "3.0.4",
+  "version": "4.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,18 +15,22 @@
     "format:fix": "prettier . --write"
   },
   "dependencies": {
+    "@fontsource-variable/geist": "^5.2.8",
     "@headlessui/react": "^2.2.9",
     "@types/react-swipeable-views": "^0.13.6",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "keen-slider": "^6.8.6",
-    "react": "^18.2.0",
+    "lucide-react": "^0.577.0",
+    "radix-ui": "^1.4.3",
     "react-datepicker": "^8.3.0",
     "react-daum-postcode": "^3.2.0",
-    "react-dom": "^18.2.0",
     "react-icons": "^5.5.0",
     "react-swipeable-views": "^0.14.1",
-    "tailwind-merge": "^3.3.1"
+    "shadcn": "^4.0.8",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.7",
@@ -44,8 +48,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.6.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^5.0.4",
@@ -61,6 +65,8 @@
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "storybook": "^8.5.3",
     "tailwindcss": "^4.1.14",
     "ts-jest": "^29.4.4",
@@ -69,13 +75,17 @@
     "vite": "^6.2.4",
     "vite-plugin-dts": "^4.5.3"
   },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.umd.js"
     },
     "./package.json": "./package.json",
     "./dist/*": "./dist/*",

package/tailwind.css

@@ -2,6 +2,14 @@
 
 @import "./petnow-design-system-v1.css";
 
+@import "tw-animate-css";
+
+@import "shadcn/tailwind.css";
+
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
 @theme {
   --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
   --background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops));
@@ -154,3 +162,126 @@
     @apply text-[11px] leading-[16px] font-medium tracking-normal;
   }
 }
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --font-sans: "Geist Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/dist/src/components/mobile/chip/Chip.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    className?: string;
-    text: string;
-    isSelected: boolean;
-    onClick: () => void;
-    disabled?: boolean;
-}
-declare const Chip: ({ className, text, isSelected, onClick, disabled }: Props) => import("react/jsx-runtime").JSX.Element;
-export default Chip;

package/dist/src/components/mobile/chip/Chip.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Chip } from './Chip';
-declare const meta: Meta<typeof Chip>;
-export default meta;
-type Story = StoryObj<typeof Chip>;
-export declare const Default: Story;

package/dist/src/components/mobile/popup/Popup.d.ts

@@ -1,33 +0,0 @@
-import { ReactNode } from 'react';
-interface Props {
-    isOpen: boolean;
-    setIsOpen: (newState: boolean) => void;
-    onClose?: () => void;
-    title?: string | ReactNode;
-    image?: Image;
-    description?: string | ReactNode;
-    confirm?: Confirm;
-    cancel?: Cancel;
-    disableOutsideClick?: boolean;
-    className?: {
-        popup?: string;
-        image?: string;
-        title?: string;
-        description?: string;
-    };
-}
-interface Image {
-    url: string;
-    alt: string;
-}
-interface Confirm {
-    text: string;
-    onClick: () => void;
-    disabled?: boolean;
-}
-interface Cancel {
-    text: string;
-    disabled?: boolean;
-}
-declare const Popup: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export default Popup;

package/dist/src/components/pc/autocomplete/LabeledAutocomplete.d.ts

@@ -1,17 +0,0 @@
-interface AutocompleteOption {
-    name: string | undefined;
-    value: string | boolean | number | undefined;
-    [key: string]: unknown;
-}
-interface Props {
-    label: string;
-    placeholder: string;
-    value: string | undefined;
-    options: AutocompleteOption[];
-    onChange: (value: AutocompleteOption) => void;
-    disabled?: boolean;
-    helperText?: string;
-    disableDebounce?: true;
-}
-declare const LabeledAutocomplete: ({ label, placeholder, value, options, onChange, disabled, helperText, disableDebounce, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default LabeledAutocomplete;

package/dist/src/components/pc/autocomplete/LabeledAutocomplete.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as LabeledAutocomplete } from './LabeledAutocomplete.tsx';
-declare const meta: Meta<typeof LabeledAutocomplete>;
-export default meta;
-type Story = StoryObj<typeof LabeledAutocomplete>;
-export declare const Default: Story;
-export declare const DisableDebounce: Story;
-export declare const Disabled: Story;

package/dist/src/components/pc/card/AccordionCard.d.ts

@@ -1,9 +0,0 @@
-import { JSXElementConstructor, ReactElement, ReactNode } from 'react';
-interface Props {
-    title: string;
-    description: string | ReactElement<string | JSXElementConstructor<unknown>> | ReactNode;
-    titleTextClassName?: string;
-    descriptionTextClassName?: string;
-}
-declare const AccordionCard: ({ title, description, titleTextClassName, descriptionTextClassName }: Props) => import("react/jsx-runtime").JSX.Element;
-export default AccordionCard;

package/dist/src/components/pc/card/AccordionCard.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as AccordionCard } from './AccordionCard.tsx';
-declare const meta: Meta<typeof AccordionCard>;
-export default meta;
-type Story = StoryObj<typeof AccordionCard>;
-export declare const Default: Story;
-export declare const AdditionalClassName: Story;

package/dist/src/components/pc/checkbox/LabeledCheckbox.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    checked?: boolean;
-    label?: string;
-    onChange: (newValue: boolean) => void;
-    termImageUrl: string;
-}
-declare const LabeledCheckbox: ({ checked, label, onChange, termImageUrl }: Props) => import("react/jsx-runtime").JSX.Element;
-export default LabeledCheckbox;

package/dist/src/components/pc/checkbox/LabeledCheckbox.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Checkbox } from './LabeledCheckbox.tsx';
-declare const meta: Meta<typeof Checkbox>;
-export default meta;
-type Story = StoryObj<typeof Checkbox>;
-export declare const Default: Story;

package/dist/src/components/pc/datepicker/LabeledDatepicker.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    label: string;
-    placeholder: string;
-    value: string;
-    onChange: (date: Date) => void;
-    helperText?: string;
-}
-declare const LabeledDatepicker: ({ label, placeholder, value, onChange, helperText }: Props) => import("react/jsx-runtime").JSX.Element;
-export default LabeledDatepicker;