@bergetai/ui 0.16.0 → 0.16.2

package/dist/components/container/Container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.cjs","names":["cva","React","useRender","mergeProps","cn"],"sources":["../../../src/components/container/Container.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\n\nconst containerVariants = cva('w-full mx-auto', {\n  variants: {\n    size: {\n      sm: 'max-w-3xl',\n      md: 'max-w-5xl',\n      lg: 'max-w-7xl',\n      xl: 'max-w-screen-xl',\n      full: 'max-w-full',\n    },\n    padding: {\n      none: 'px-0',\n      sm: 'px-4 sm:px-6',\n      md: 'px-4 sm:px-6 lg:px-8',\n      lg: 'px-4 sm:px-8 lg:px-12',\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n    padding: 'md',\n  },\n});\n\nexport interface ContainerProps\n  extends useRender.ComponentProps<'div'>, VariantProps<typeof containerVariants> {\n  children?: React.ReactNode;\n  /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n  asChild?: boolean;\n}\n\nconst Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ className, size, padding, asChild = false, children, ...props }, ref) => {\n    return useRender({\n      ref,\n      defaultTagName: 'div',\n      render: asChild ? (children as React.ReactElement) : undefined,\n      props: mergeProps<'div'>(\n        {\n          className: cn(containerVariants({ size, padding }), className),\n          children: asChild ? undefined : children,\n        } as React.ComponentProps<'div'>,\n        props,\n      ),\n    });\n  },\n);\nContainer.displayName = 'Container';\n\nexport { Container, containerVariants };\n"],"mappings":";;;;;;;;;AAQA,MAAM,qBAAA,GAAoBA,yBAAAA,IAAAA,CAAI,kBAAkB;CAC9C,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;EACA,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AASD,MAAM,YAAYC,MAAM,YACrB,EAAE,WAAW,MAAM,SAAS,UAAU,OAAO,UAAU,GAAG,SAAS,QAAQ;CAC1E,QAAA,GAAOC,0BAAAA,UAAAA,CAAU;EACf;EACA,gBAAgB;EAChB,QAAQ,UAAW,WAAkC,KAAA;EACrD,QAAA,GAAOC,2BAAAA,WAAAA,CACL;GACE,WAAWC,cAAAA,GAAG,kBAAkB;IAAE;IAAM;GAAQ,CAAC,GAAG,SAAS;GAC7D,UAAU,UAAU,KAAA,IAAY;EAClC,GACA,KACF;CACF,CAAC;AACH,CACF;AACA,UAAU,cAAc"}
+{"version":3,"file":"Container.cjs","names":["cva","React","useRender","mergeProps","cn"],"sources":["../../../src/components/container/Container.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\n\nconst containerVariants = cva('mx-auto w-full', {\n  variants: {\n    size: {\n      sm: 'max-w-3xl',\n      md: 'max-w-5xl',\n      lg: 'max-w-7xl',\n      xl: 'max-w-7xl',\n      full: 'max-w-full',\n    },\n    padding: {\n      none: 'px-0',\n      sm: `\n        px-4\n        sm:px-6\n      `,\n      md: `\n        px-4\n        sm:px-6\n        lg:px-8\n      `,\n      lg: `\n        px-4\n        sm:px-8\n        lg:px-12\n      `,\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n    padding: 'md',\n  },\n});\n\nexport interface ContainerProps\n  extends useRender.ComponentProps<'div'>, VariantProps<typeof containerVariants> {\n  children?: React.ReactNode;\n  /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n  asChild?: boolean;\n}\n\nconst Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ className, size, padding, asChild = false, children, ...props }, ref) => {\n    return useRender({\n      ref,\n      defaultTagName: 'div',\n      render: asChild ? (children as React.ReactElement) : undefined,\n      props: mergeProps<'div'>(\n        {\n          className: cn(containerVariants({ size, padding }), className),\n          children: asChild ? undefined : children,\n        } as React.ComponentProps<'div'>,\n        props,\n      ),\n    });\n  },\n);\nContainer.displayName = 'Container';\n\nexport { Container, containerVariants };\n"],"mappings":";;;;;;;;;AAQA,MAAM,qBAAA,GAAoBA,yBAAAA,IAAAA,CAAI,kBAAkB;CAC9C,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;EACA,SAAS;GACP,MAAM;GACN,IAAI;;;;GAIJ,IAAI;;;;;GAKJ,IAAI;;;;;EAKN;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AASD,MAAM,YAAYC,MAAM,YACrB,EAAE,WAAW,MAAM,SAAS,UAAU,OAAO,UAAU,GAAG,SAAS,QAAQ;CAC1E,QAAA,GAAOC,0BAAAA,UAAAA,CAAU;EACf;EACA,gBAAgB;EAChB,QAAQ,UAAW,WAAkC,KAAA;EACrD,QAAA,GAAOC,2BAAAA,WAAAA,CACL;GACE,WAAWC,cAAAA,GAAG,kBAAkB;IAAE;IAAM;GAAQ,CAAC,GAAG,SAAS;GAC7D,UAAU,UAAU,KAAA,IAAY;EAClC,GACA,KACF;CACF,CAAC;AACH,CACF;AACA,UAAU,cAAc"}

package/dist/components/container/Container.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.cts","names":[],"sources":["../../../src/components/container/Container.tsx"],"mappings":";;;;cAQM,oBAAiB;;;6CAoBrB;iBAEe,uBACP,UAAU,uBAAuB,oBAAoB;EAC7D,WAAW,MAAM;;EAEjB;;cAGI,WAAS,MAAA,0BAAA,KAAA,yBAAA,MAAA,cAAA"}
+{"version":3,"file":"Container.d.cts","names":[],"sources":["../../../src/components/container/Container.tsx"],"mappings":";;;;cAQM,oBAAiB;;;6CA+BrB;iBAEe,uBACP,UAAU,uBAAuB,oBAAoB;EAC7D,WAAW,MAAM;;EAEjB;;cAGI,WAAS,MAAA,0BAAA,KAAA,yBAAA,MAAA,cAAA"}

package/dist/components/container/Container.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.mts","names":[],"sources":["../../../src/components/container/Container.tsx"],"mappings":";;;;cAQM,oBAAiB;;;6CAoBrB;iBAEe,uBACP,UAAU,uBAAuB,oBAAoB;EAC7D,WAAW,MAAM;;EAEjB;;cAGI,WAAS,MAAA,0BAAA,KAAA,yBAAA,MAAA,cAAA"}
+{"version":3,"file":"Container.d.mts","names":[],"sources":["../../../src/components/container/Container.tsx"],"mappings":";;;;cAQM,oBAAiB;;;6CA+BrB;iBAEe,uBACP,UAAU,uBAAuB,oBAAoB;EAC7D,WAAW,MAAM;;EAEjB;;cAGI,WAAS,MAAA,0BAAA,KAAA,yBAAA,MAAA,cAAA"}

package/dist/components/container/Container.mjs

@@ -5,20 +5,31 @@ import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/container/Container.tsx
-const containerVariants = cva("w-full mx-auto", {
+const containerVariants = cva("mx-auto w-full", {
 	variants: {
 		size: {
 			sm: "max-w-3xl",
 			md: "max-w-5xl",
 			lg: "max-w-7xl",
-			xl: "max-w-screen-xl",
+			xl: "max-w-7xl",
 			full: "max-w-full"
 		},
 		padding: {
 			none: "px-0",
-			sm: "px-4 sm:px-6",
-			md: "px-4 sm:px-6 lg:px-8",
-			lg: "px-4 sm:px-8 lg:px-12"
+			sm: `
+        px-4
+        sm:px-6
+      `,
+			md: `
+        px-4
+        sm:px-6
+        lg:px-8
+      `,
+			lg: `
+        px-4
+        sm:px-8
+        lg:px-12
+      `
 		}
 	},
 	defaultVariants: {

package/dist/components/container/Container.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.mjs","names":[],"sources":["../../../src/components/container/Container.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\n\nconst containerVariants = cva('w-full mx-auto', {\n  variants: {\n    size: {\n      sm: 'max-w-3xl',\n      md: 'max-w-5xl',\n      lg: 'max-w-7xl',\n      xl: 'max-w-screen-xl',\n      full: 'max-w-full',\n    },\n    padding: {\n      none: 'px-0',\n      sm: 'px-4 sm:px-6',\n      md: 'px-4 sm:px-6 lg:px-8',\n      lg: 'px-4 sm:px-8 lg:px-12',\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n    padding: 'md',\n  },\n});\n\nexport interface ContainerProps\n  extends useRender.ComponentProps<'div'>, VariantProps<typeof containerVariants> {\n  children?: React.ReactNode;\n  /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n  asChild?: boolean;\n}\n\nconst Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ className, size, padding, asChild = false, children, ...props }, ref) => {\n    return useRender({\n      ref,\n      defaultTagName: 'div',\n      render: asChild ? (children as React.ReactElement) : undefined,\n      props: mergeProps<'div'>(\n        {\n          className: cn(containerVariants({ size, padding }), className),\n          children: asChild ? undefined : children,\n        } as React.ComponentProps<'div'>,\n        props,\n      ),\n    });\n  },\n);\nContainer.displayName = 'Container';\n\nexport { Container, containerVariants };\n"],"mappings":";;;;;;;AAQA,MAAM,oBAAoB,IAAI,kBAAkB;CAC9C,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;EACA,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AASD,MAAM,YAAY,MAAM,YACrB,EAAE,WAAW,MAAM,SAAS,UAAU,OAAO,UAAU,GAAG,SAAS,QAAQ;CAC1E,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,QAAQ,UAAW,WAAkC,KAAA;EACrD,OAAO,WACL;GACE,WAAW,GAAG,kBAAkB;IAAE;IAAM;GAAQ,CAAC,GAAG,SAAS;GAC7D,UAAU,UAAU,KAAA,IAAY;EAClC,GACA,KACF;CACF,CAAC;AACH,CACF;AACA,UAAU,cAAc"}
+{"version":3,"file":"Container.mjs","names":[],"sources":["../../../src/components/container/Container.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\n\nconst containerVariants = cva('mx-auto w-full', {\n  variants: {\n    size: {\n      sm: 'max-w-3xl',\n      md: 'max-w-5xl',\n      lg: 'max-w-7xl',\n      xl: 'max-w-7xl',\n      full: 'max-w-full',\n    },\n    padding: {\n      none: 'px-0',\n      sm: `\n        px-4\n        sm:px-6\n      `,\n      md: `\n        px-4\n        sm:px-6\n        lg:px-8\n      `,\n      lg: `\n        px-4\n        sm:px-8\n        lg:px-12\n      `,\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n    padding: 'md',\n  },\n});\n\nexport interface ContainerProps\n  extends useRender.ComponentProps<'div'>, VariantProps<typeof containerVariants> {\n  children?: React.ReactNode;\n  /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n  asChild?: boolean;\n}\n\nconst Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ className, size, padding, asChild = false, children, ...props }, ref) => {\n    return useRender({\n      ref,\n      defaultTagName: 'div',\n      render: asChild ? (children as React.ReactElement) : undefined,\n      props: mergeProps<'div'>(\n        {\n          className: cn(containerVariants({ size, padding }), className),\n          children: asChild ? undefined : children,\n        } as React.ComponentProps<'div'>,\n        props,\n      ),\n    });\n  },\n);\nContainer.displayName = 'Container';\n\nexport { Container, containerVariants };\n"],"mappings":";;;;;;;AAQA,MAAM,oBAAoB,IAAI,kBAAkB;CAC9C,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACR;EACA,SAAS;GACP,MAAM;GACN,IAAI;;;;GAIJ,IAAI;;;;;GAKJ,IAAI;;;;;EAKN;CACF;CACA,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;AACF,CAAC;AASD,MAAM,YAAY,MAAM,YACrB,EAAE,WAAW,MAAM,SAAS,UAAU,OAAO,UAAU,GAAG,SAAS,QAAQ;CAC1E,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,QAAQ,UAAW,WAAkC,KAAA;EACrD,OAAO,WACL;GACE,WAAW,GAAG,kBAAkB;IAAE;IAAM;GAAQ,CAAC,GAAG,SAAS;GAC7D,UAAU,UAAU,KAAA,IAAY;EAClC,GACA,KACF;CACF,CAAC;AACH,CACF;AACA,UAAU,cAAc"}

package/dist/components/country-select/CountrySelect.cjs

@@ -22,13 +22,19 @@ const CountrySelect = react.forwardRef(({ value, onValueChange, placeholder = "S
 				type: "button",
 				disabled,
 				"aria-expanded": open,
-				className: require_utils.cn("flex w-full items-center justify-between", "rounded-berget-xs border bg-card", "px-4 py-3 text-sm", "transition-colors duration-200", "focus-visible:outline-none focus-visible:ring-0", "focus-visible:ring-offset-0 focus-visible:border-berget-form-focus-border", "disabled:cursor-not-allowed disabled:opacity-50", "border-berget-border-interactive hover:bg-berget-surface-hover", className)
+				className: require_utils.cn("flex w-full items-center justify-between", "rounded-berget-xs border bg-card", "px-4 py-3 text-sm", "transition-colors duration-200", "focus-visible:ring-0 focus-visible:outline-none", `
+                  focus-visible:border-berget-form-focus-border
+                  focus-visible:ring-offset-0
+                `, "disabled:cursor-not-allowed disabled:opacity-50", `
+                  border-berget-border-interactive
+                  hover:bg-berget-surface-hover
+                `, className)
 			}),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex items-center gap-2 min-w-0 flex-1",
+				className: "flex min-w-0 flex-1 items-center gap-2",
 				children: selectedCountry ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-xl flex-shrink-0",
+						className: "shrink-0 text-xl",
 						children: selectedCountry.flag
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -36,7 +42,7 @@ const CountrySelect = react.forwardRef(({ value, onValueChange, placeholder = "S
 						children: selectedCountry.name
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "text-berget-muted-foreground text-xs flex-shrink-0",
+						className: "shrink-0 text-xs text-berget-muted-foreground",
 						children: [
 							"(",
 							selectedCountry.code,
@@ -46,43 +52,46 @@ const CountrySelect = react.forwardRef(({ value, onValueChange, placeholder = "S
 				] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
 					icon: lucide_react.Globe,
 					size: 16,
-					className: "flex-shrink-0 text-berget-muted-foreground"
+					className: "shrink-0 text-berget-muted-foreground"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-berget-muted-foreground truncate",
+					className: "truncate text-berget-muted-foreground",
 					children: placeholder
 				})] })
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
 				icon: lucide_react.ChevronDown,
 				size: 16,
-				className: require_utils.cn("flex-shrink-0 text-berget-muted-foreground", "transition-transform duration-200", open && "rotate-180")
+				className: require_utils.cn("shrink-0 text-berget-muted-foreground", "transition-transform duration-200", open && "rotate-180")
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverContent, {
 			align,
 			sideOffset,
-			className: "w-[var(--radix-popover-trigger-width)] p-0",
+			className: "w-(--radix-popover-trigger-width) p-0",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_command.Command, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_command.CommandInput, { placeholder: "Search country..." }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_command.CommandList, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_command.CommandEmpty, { children: "No countries found." }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_command.CommandGroup, { children: require_countries.COUNTRIES.map((country) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_command.CommandItem, {
 				value: `${country.name} ${country.code}`,
 				onSelect: () => {
 					onValueChange?.(country.code);
 					setOpen(false);
 				},
-				className: require_utils.cn("flex items-center gap-3 px-3 py-2.5", "data-[selected='true']:bg-berget-brand-granite-700/40! data-[selected=true]:text-berget-foreground", value === country.code && "bg-berget-brand-granite-800/40"),
+				className: require_utils.cn("flex items-center gap-3 px-3 py-2.5", `
+                        data-[selected='true']:bg-berget-brand-granite-700/40!
+                        data-[selected=true]:text-berget-foreground
+                      `, value === country.code && "bg-berget-brand-granite-800/40"),
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "text-xl flex-shrink-0",
+						className: "shrink-0 text-xl",
 						children: country.flag
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex-1 min-w-0",
+						className: "min-w-0 flex-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "text-sm truncate",
+							className: "truncate text-sm",
 							children: country.name
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "text-xs text-berget-muted-foreground",
 							children: country.code
 						})]
 					}),
-					value === country.code && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-2 h-2 rounded-full bg-berget-brand-granite-400 flex-shrink-0" })
+					value === country.code && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "\n                          size-2 shrink-0 rounded-full\n                          bg-berget-brand-granite-400\n                        " })
 				]
 			}, country.code)) })] })] })
 		})]

package/dist/components/country-select/CountrySelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CountrySelect.cjs","names":["React","COUNTRIES","Popover","PopoverTrigger","cn","Icon","Globe","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem"],"sources":["../../../src/components/country-select/CountrySelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDown, Globe } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { Icon } from '@/components/icon';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/primitives/popover';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/primitives/command';\nimport { type Country, COUNTRIES } from './countries';\n\nexport interface CountrySelectProps {\n  value?: string | null;\n  onValueChange?: (code: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  align?: 'center' | 'start' | 'end';\n  sideOffset?: number;\n}\n\nconst CountrySelect = React.forwardRef<React.ElementRef<'button'>, CountrySelectProps>(\n  (\n    {\n      value,\n      onValueChange,\n      placeholder = 'Select country',\n      disabled = false,\n      className,\n      align = 'center',\n      sideOffset = 4,\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false);\n    const selectedCountry = React.useMemo(() => COUNTRIES.find((c) => c.code === value), [value]);\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          ref={ref}\n          render={\n            <button\n              type=\"button\"\n              disabled={disabled}\n              aria-expanded={open}\n              className={cn(\n                // Base layout — consistent with Select trigger\n                'flex w-full items-center justify-between',\n                'rounded-berget-xs border bg-card',\n                'px-4 py-3 text-sm',\n                'transition-colors duration-200',\n                'focus-visible:outline-none focus-visible:ring-0',\n                'focus-visible:ring-offset-0 focus-visible:border-berget-form-focus-border',\n                'disabled:cursor-not-allowed disabled:opacity-50',\n                // Default border & hover matching Select variant \"default\"\n                'border-berget-border-interactive hover:bg-berget-surface-hover',\n                className,\n              )}\n            />\n          }\n        >\n          <div className=\"flex items-center gap-2 min-w-0 flex-1\">\n            {selectedCountry ? (\n              <>\n                <span className=\"text-xl flex-shrink-0\">{selectedCountry.flag}</span>\n                <span className=\"truncate\">{selectedCountry.name}</span>\n                <span className=\"text-berget-muted-foreground text-xs flex-shrink-0\">\n                  ({selectedCountry.code})\n                </span>\n              </>\n            ) : (\n              <>\n                <Icon\n                  icon={Globe}\n                  size={16}\n                  className=\"flex-shrink-0 text-berget-muted-foreground\"\n                />\n                <span className=\"text-berget-muted-foreground truncate\">{placeholder}</span>\n              </>\n            )}\n          </div>\n          <Icon\n            icon={ChevronDown}\n            size={16}\n            className={cn(\n              'flex-shrink-0 text-berget-muted-foreground',\n              'transition-transform duration-200',\n              open && 'rotate-180',\n            )}\n          />\n        </PopoverTrigger>\n\n        <PopoverContent\n          align={align}\n          sideOffset={sideOffset}\n          className=\"w-[var(--radix-popover-trigger-width)] p-0\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandList>\n              <CommandEmpty>No countries found.</CommandEmpty>\n              <CommandGroup>\n                {COUNTRIES.map((country) => (\n                  <CommandItem\n                    key={country.code}\n                    value={`${country.name} ${country.code}`}\n                    onSelect={() => {\n                      onValueChange?.(country.code);\n                      setOpen(false);\n                    }}\n                    className={cn(\n                      'flex items-center gap-3 px-3 py-2.5',\n                      \"data-[selected='true']:bg-berget-brand-granite-700/40! data-[selected=true]:text-berget-foreground\",\n                      value === country.code && 'bg-berget-brand-granite-800/40',\n                    )}\n                  >\n                    <span className=\"text-xl flex-shrink-0\">{country.flag}</span>\n                    <div className=\"flex-1 min-w-0\">\n                      <div className=\"text-sm truncate\">{country.name}</div>\n                      <div className=\"text-xs text-berget-muted-foreground\">{country.code}</div>\n                    </div>\n                    {value === country.code && (\n                      <div className=\"w-2 h-2 rounded-full bg-berget-brand-granite-400 flex-shrink-0\" />\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  },\n);\n\nCountrySelect.displayName = 'CountrySelect';\n\nexport { CountrySelect };\nexport type { Country };\nexport {\n  COUNTRIES,\n  EU_COUNTRY_CODES,\n  getCountryByCode,\n  getCountryByName,\n  isEUCountry,\n} from './countries';\n"],"mappings":"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"}
+{"version":3,"file":"CountrySelect.cjs","names":["React","COUNTRIES","Popover","PopoverTrigger","cn","Icon","Globe","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem"],"sources":["../../../src/components/country-select/CountrySelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDown, Globe } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { Icon } from '@/components/icon';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/primitives/popover';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/primitives/command';\nimport { type Country, COUNTRIES } from './countries';\n\nexport interface CountrySelectProps {\n  value?: string | null;\n  onValueChange?: (code: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  align?: 'center' | 'start' | 'end';\n  sideOffset?: number;\n}\n\nconst CountrySelect = React.forwardRef<React.ElementRef<'button'>, CountrySelectProps>(\n  (\n    {\n      value,\n      onValueChange,\n      placeholder = 'Select country',\n      disabled = false,\n      className,\n      align = 'center',\n      sideOffset = 4,\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false);\n    const selectedCountry = React.useMemo(() => COUNTRIES.find((c) => c.code === value), [value]);\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          ref={ref}\n          render={\n            <button\n              type=\"button\"\n              disabled={disabled}\n              aria-expanded={open}\n              className={cn(\n                // Base layout — consistent with Select trigger\n                'flex w-full items-center justify-between',\n                'rounded-berget-xs border bg-card',\n                'px-4 py-3 text-sm',\n                'transition-colors duration-200',\n                'focus-visible:ring-0 focus-visible:outline-none',\n                `\n                  focus-visible:border-berget-form-focus-border\n                  focus-visible:ring-offset-0\n                `,\n                'disabled:cursor-not-allowed disabled:opacity-50',\n                // Default border & hover matching Select variant \"default\"\n                `\n                  border-berget-border-interactive\n                  hover:bg-berget-surface-hover\n                `,\n                className,\n              )}\n            />\n          }\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {selectedCountry ? (\n              <>\n                <span className=\"shrink-0 text-xl\">{selectedCountry.flag}</span>\n                <span className=\"truncate\">{selectedCountry.name}</span>\n                <span className=\"shrink-0 text-xs text-berget-muted-foreground\">\n                  ({selectedCountry.code})\n                </span>\n              </>\n            ) : (\n              <>\n                <Icon icon={Globe} size={16} className=\"shrink-0 text-berget-muted-foreground\" />\n                <span className=\"truncate text-berget-muted-foreground\">{placeholder}</span>\n              </>\n            )}\n          </div>\n          <Icon\n            icon={ChevronDown}\n            size={16}\n            className={cn(\n              'shrink-0 text-berget-muted-foreground',\n              'transition-transform duration-200',\n              open && 'rotate-180',\n            )}\n          />\n        </PopoverTrigger>\n\n        <PopoverContent\n          align={align}\n          sideOffset={sideOffset}\n          className=\"w-(--radix-popover-trigger-width) p-0\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandList>\n              <CommandEmpty>No countries found.</CommandEmpty>\n              <CommandGroup>\n                {COUNTRIES.map((country) => (\n                  <CommandItem\n                    key={country.code}\n                    value={`${country.name} ${country.code}`}\n                    onSelect={() => {\n                      onValueChange?.(country.code);\n                      setOpen(false);\n                    }}\n                    className={cn(\n                      'flex items-center gap-3 px-3 py-2.5',\n                      `\n                        data-[selected='true']:bg-berget-brand-granite-700/40!\n                        data-[selected=true]:text-berget-foreground\n                      `,\n                      value === country.code && 'bg-berget-brand-granite-800/40',\n                    )}\n                  >\n                    <span className=\"shrink-0 text-xl\">{country.flag}</span>\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"truncate text-sm\">{country.name}</div>\n                      <div className=\"text-xs text-berget-muted-foreground\">{country.code}</div>\n                    </div>\n                    {value === country.code && (\n                      <div\n                        className=\"\n                          size-2 shrink-0 rounded-full\n                          bg-berget-brand-granite-400\n                        \"\n                      />\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  },\n);\n\nCountrySelect.displayName = 'CountrySelect';\n\nexport { CountrySelect };\nexport type { Country };\nexport {\n  COUNTRIES,\n  EU_COUNTRY_CODES,\n  getCountryByCode,\n  getCountryByName,\n  isEUCountry,\n} from './countries';\n"],"mappings":"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"}

package/dist/components/country-select/CountrySelect.mjs

@@ -20,13 +20,19 @@ const CountrySelect = React.forwardRef(({ value, onValueChange, placeholder = "S
 				type: "button",
 				disabled,
 				"aria-expanded": open,
-				className: cn("flex w-full items-center justify-between", "rounded-berget-xs border bg-card", "px-4 py-3 text-sm", "transition-colors duration-200", "focus-visible:outline-none focus-visible:ring-0", "focus-visible:ring-offset-0 focus-visible:border-berget-form-focus-border", "disabled:cursor-not-allowed disabled:opacity-50", "border-berget-border-interactive hover:bg-berget-surface-hover", className)
+				className: cn("flex w-full items-center justify-between", "rounded-berget-xs border bg-card", "px-4 py-3 text-sm", "transition-colors duration-200", "focus-visible:ring-0 focus-visible:outline-none", `
+                  focus-visible:border-berget-form-focus-border
+                  focus-visible:ring-offset-0
+                `, "disabled:cursor-not-allowed disabled:opacity-50", `
+                  border-berget-border-interactive
+                  hover:bg-berget-surface-hover
+                `, className)
 			}),
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex items-center gap-2 min-w-0 flex-1",
+				className: "flex min-w-0 flex-1 items-center gap-2",
 				children: selectedCountry ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "text-xl flex-shrink-0",
+						className: "shrink-0 text-xl",
 						children: selectedCountry.flag
 					}),
 					/* @__PURE__ */ jsx("span", {
@@ -34,7 +40,7 @@ const CountrySelect = React.forwardRef(({ value, onValueChange, placeholder = "S
 						children: selectedCountry.name
 					}),
 					/* @__PURE__ */ jsxs("span", {
-						className: "text-berget-muted-foreground text-xs flex-shrink-0",
+						className: "shrink-0 text-xs text-berget-muted-foreground",
 						children: [
 							"(",
 							selectedCountry.code,
@@ -44,43 +50,46 @@ const CountrySelect = React.forwardRef(({ value, onValueChange, placeholder = "S
 				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
 					icon: Globe,
 					size: 16,
-					className: "flex-shrink-0 text-berget-muted-foreground"
+					className: "shrink-0 text-berget-muted-foreground"
 				}), /* @__PURE__ */ jsx("span", {
-					className: "text-berget-muted-foreground truncate",
+					className: "truncate text-berget-muted-foreground",
 					children: placeholder
 				})] })
 			}), /* @__PURE__ */ jsx(Icon, {
 				icon: ChevronDown,
 				size: 16,
-				className: cn("flex-shrink-0 text-berget-muted-foreground", "transition-transform duration-200", open && "rotate-180")
+				className: cn("shrink-0 text-berget-muted-foreground", "transition-transform duration-200", open && "rotate-180")
 			})]
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			align,
 			sideOffset,
-			className: "w-[var(--radix-popover-trigger-width)] p-0",
+			className: "w-(--radix-popover-trigger-width) p-0",
 			children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: "Search country..." }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No countries found." }), /* @__PURE__ */ jsx(CommandGroup, { children: COUNTRIES.map((country) => /* @__PURE__ */ jsxs(CommandItem, {
 				value: `${country.name} ${country.code}`,
 				onSelect: () => {
 					onValueChange?.(country.code);
 					setOpen(false);
 				},
-				className: cn("flex items-center gap-3 px-3 py-2.5", "data-[selected='true']:bg-berget-brand-granite-700/40! data-[selected=true]:text-berget-foreground", value === country.code && "bg-berget-brand-granite-800/40"),
+				className: cn("flex items-center gap-3 px-3 py-2.5", `
+                        data-[selected='true']:bg-berget-brand-granite-700/40!
+                        data-[selected=true]:text-berget-foreground
+                      `, value === country.code && "bg-berget-brand-granite-800/40"),
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "text-xl flex-shrink-0",
+						className: "shrink-0 text-xl",
 						children: country.flag
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex-1 min-w-0",
+						className: "min-w-0 flex-1",
 						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-sm truncate",
+							className: "truncate text-sm",
 							children: country.name
 						}), /* @__PURE__ */ jsx("div", {
 							className: "text-xs text-berget-muted-foreground",
 							children: country.code
 						})]
 					}),
-					value === country.code && /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-berget-brand-granite-400 flex-shrink-0" })
+					value === country.code && /* @__PURE__ */ jsx("div", { className: "\n                          size-2 shrink-0 rounded-full\n                          bg-berget-brand-granite-400\n                        " })
 				]
 			}, country.code)) })] })] })
 		})]

package/dist/components/country-select/CountrySelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CountrySelect.mjs","names":[],"sources":["../../../src/components/country-select/CountrySelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDown, Globe } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { Icon } from '@/components/icon';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/primitives/popover';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/primitives/command';\nimport { type Country, COUNTRIES } from './countries';\n\nexport interface CountrySelectProps {\n  value?: string | null;\n  onValueChange?: (code: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  align?: 'center' | 'start' | 'end';\n  sideOffset?: number;\n}\n\nconst CountrySelect = React.forwardRef<React.ElementRef<'button'>, CountrySelectProps>(\n  (\n    {\n      value,\n      onValueChange,\n      placeholder = 'Select country',\n      disabled = false,\n      className,\n      align = 'center',\n      sideOffset = 4,\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false);\n    const selectedCountry = React.useMemo(() => COUNTRIES.find((c) => c.code === value), [value]);\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          ref={ref}\n          render={\n            <button\n              type=\"button\"\n              disabled={disabled}\n              aria-expanded={open}\n              className={cn(\n                // Base layout — consistent with Select trigger\n                'flex w-full items-center justify-between',\n                'rounded-berget-xs border bg-card',\n                'px-4 py-3 text-sm',\n                'transition-colors duration-200',\n                'focus-visible:outline-none focus-visible:ring-0',\n                'focus-visible:ring-offset-0 focus-visible:border-berget-form-focus-border',\n                'disabled:cursor-not-allowed disabled:opacity-50',\n                // Default border & hover matching Select variant \"default\"\n                'border-berget-border-interactive hover:bg-berget-surface-hover',\n                className,\n              )}\n            />\n          }\n        >\n          <div className=\"flex items-center gap-2 min-w-0 flex-1\">\n            {selectedCountry ? (\n              <>\n                <span className=\"text-xl flex-shrink-0\">{selectedCountry.flag}</span>\n                <span className=\"truncate\">{selectedCountry.name}</span>\n                <span className=\"text-berget-muted-foreground text-xs flex-shrink-0\">\n                  ({selectedCountry.code})\n                </span>\n              </>\n            ) : (\n              <>\n                <Icon\n                  icon={Globe}\n                  size={16}\n                  className=\"flex-shrink-0 text-berget-muted-foreground\"\n                />\n                <span className=\"text-berget-muted-foreground truncate\">{placeholder}</span>\n              </>\n            )}\n          </div>\n          <Icon\n            icon={ChevronDown}\n            size={16}\n            className={cn(\n              'flex-shrink-0 text-berget-muted-foreground',\n              'transition-transform duration-200',\n              open && 'rotate-180',\n            )}\n          />\n        </PopoverTrigger>\n\n        <PopoverContent\n          align={align}\n          sideOffset={sideOffset}\n          className=\"w-[var(--radix-popover-trigger-width)] p-0\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandList>\n              <CommandEmpty>No countries found.</CommandEmpty>\n              <CommandGroup>\n                {COUNTRIES.map((country) => (\n                  <CommandItem\n                    key={country.code}\n                    value={`${country.name} ${country.code}`}\n                    onSelect={() => {\n                      onValueChange?.(country.code);\n                      setOpen(false);\n                    }}\n                    className={cn(\n                      'flex items-center gap-3 px-3 py-2.5',\n                      \"data-[selected='true']:bg-berget-brand-granite-700/40! data-[selected=true]:text-berget-foreground\",\n                      value === country.code && 'bg-berget-brand-granite-800/40',\n                    )}\n                  >\n                    <span className=\"text-xl flex-shrink-0\">{country.flag}</span>\n                    <div className=\"flex-1 min-w-0\">\n                      <div className=\"text-sm truncate\">{country.name}</div>\n                      <div className=\"text-xs text-berget-muted-foreground\">{country.code}</div>\n                    </div>\n                    {value === country.code && (\n                      <div className=\"w-2 h-2 rounded-full bg-berget-brand-granite-400 flex-shrink-0\" />\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  },\n);\n\nCountrySelect.displayName = 'CountrySelect';\n\nexport { CountrySelect };\nexport type { Country };\nexport {\n  COUNTRIES,\n  EU_COUNTRY_CODES,\n  getCountryByCode,\n  getCountryByName,\n  isEUCountry,\n} from './countries';\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,gBAAgB,MAAM,YAExB,EACE,OACA,eACA,cAAc,kBACd,WAAW,OACX,WACA,QAAQ,UACR,aAAa,KAEf,QACG;CACH,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAC5C,MAAM,kBAAkB,MAAM,cAAc,UAAU,MAAM,MAAM,EAAE,SAAS,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5F,OACE,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,qBAAC,gBAAD;GACO;GACL,QACE,oBAAC,UAAD;IACE,MAAK;IACK;IACV,iBAAe;IACf,WAAW,GAET,4CACA,oCACA,qBACA,kCACA,mDACA,6EACA,mDAEA,kEACA,SACF;GACD,CAAA;GApBL,UAAA,CAuBE,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,kBACC,qBAAA,UAAA,EAAA,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MAAyB,UAAA,gBAAgB;KAAW,CAAA;KACpE,oBAAC,QAAD;MAAM,WAAU;MAAY,UAAA,gBAAgB;KAAW,CAAA;KACvD,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAAqE;OACjE,gBAAgB;OAAK;MACnB;;IACN,EAAA,CAAA,IAEF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;KACE,MAAM;KACN,MAAM;KACN,WAAU;IACX,CAAA,GACD,oBAAC,QAAD;KAAM,WAAU;KAAyC,UAAA;IAAkB,CAAA,CAC3E,EAAA,CAAA;GAED,CAAA,GACL,oBAAC,MAAD;IACE,MAAM;IACN,MAAM;IACN,WAAW,GACT,8CACA,qCACA,QAAQ,YACV;GACD,CAAA,CACa;EAEhB,CAAA,GAAA,oBAAC,gBAAD;GACS;GACK;GACZ,WAAU;GAEV,UAAA,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAc,aAAY,oBAAqB,CAAA,GAC/C,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAA,UAAc,sBAAiC,CAAA,GAC/C,oBAAC,cAAD,EAAA,UACG,UAAU,KAAK,YACd,qBAAC,aAAD;IAEE,OAAO,GAAG,QAAQ,KAAK,GAAG,QAAQ;IAClC,gBAAgB;KACd,gBAAgB,QAAQ,IAAI;KAC5B,QAAQ,KAAK;IACf;IACA,WAAW,GACT,uCACA,sGACA,UAAU,QAAQ,QAAQ,gCAC5B;IAXF,UAAA;KAaE,oBAAC,QAAD;MAAM,WAAU;MAAyB,UAAA,QAAQ;KAAW,CAAA;KAC5D,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,OAAD;OAAK,WAAU;OAAoB,UAAA,QAAQ;MAAU,CAAA,GACrD,oBAAC,OAAD;OAAK,WAAU;OAAwC,UAAA,QAAQ;MAAU,CAAA,CACtE;;KACJ,UAAU,QAAQ,QACjB,oBAAC,OAAD,EAAK,WAAU,iEAAkE,CAAA;IAExE;GApBN,GAAA,QAAQ,IAoBF,CACd,EACW,CAAA,CACH,EAAA,CAAA,CACN,EAAA,CAAA;EACK,CAAA,CACT;;AAEb,CACF;AAEA,cAAc,cAAc"}
+{"version":3,"file":"CountrySelect.mjs","names":[],"sources":["../../../src/components/country-select/CountrySelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDown, Globe } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { Icon } from '@/components/icon';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/primitives/popover';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/primitives/command';\nimport { type Country, COUNTRIES } from './countries';\n\nexport interface CountrySelectProps {\n  value?: string | null;\n  onValueChange?: (code: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  align?: 'center' | 'start' | 'end';\n  sideOffset?: number;\n}\n\nconst CountrySelect = React.forwardRef<React.ElementRef<'button'>, CountrySelectProps>(\n  (\n    {\n      value,\n      onValueChange,\n      placeholder = 'Select country',\n      disabled = false,\n      className,\n      align = 'center',\n      sideOffset = 4,\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false);\n    const selectedCountry = React.useMemo(() => COUNTRIES.find((c) => c.code === value), [value]);\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          ref={ref}\n          render={\n            <button\n              type=\"button\"\n              disabled={disabled}\n              aria-expanded={open}\n              className={cn(\n                // Base layout — consistent with Select trigger\n                'flex w-full items-center justify-between',\n                'rounded-berget-xs border bg-card',\n                'px-4 py-3 text-sm',\n                'transition-colors duration-200',\n                'focus-visible:ring-0 focus-visible:outline-none',\n                `\n                  focus-visible:border-berget-form-focus-border\n                  focus-visible:ring-offset-0\n                `,\n                'disabled:cursor-not-allowed disabled:opacity-50',\n                // Default border & hover matching Select variant \"default\"\n                `\n                  border-berget-border-interactive\n                  hover:bg-berget-surface-hover\n                `,\n                className,\n              )}\n            />\n          }\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {selectedCountry ? (\n              <>\n                <span className=\"shrink-0 text-xl\">{selectedCountry.flag}</span>\n                <span className=\"truncate\">{selectedCountry.name}</span>\n                <span className=\"shrink-0 text-xs text-berget-muted-foreground\">\n                  ({selectedCountry.code})\n                </span>\n              </>\n            ) : (\n              <>\n                <Icon icon={Globe} size={16} className=\"shrink-0 text-berget-muted-foreground\" />\n                <span className=\"truncate text-berget-muted-foreground\">{placeholder}</span>\n              </>\n            )}\n          </div>\n          <Icon\n            icon={ChevronDown}\n            size={16}\n            className={cn(\n              'shrink-0 text-berget-muted-foreground',\n              'transition-transform duration-200',\n              open && 'rotate-180',\n            )}\n          />\n        </PopoverTrigger>\n\n        <PopoverContent\n          align={align}\n          sideOffset={sideOffset}\n          className=\"w-(--radix-popover-trigger-width) p-0\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandList>\n              <CommandEmpty>No countries found.</CommandEmpty>\n              <CommandGroup>\n                {COUNTRIES.map((country) => (\n                  <CommandItem\n                    key={country.code}\n                    value={`${country.name} ${country.code}`}\n                    onSelect={() => {\n                      onValueChange?.(country.code);\n                      setOpen(false);\n                    }}\n                    className={cn(\n                      'flex items-center gap-3 px-3 py-2.5',\n                      `\n                        data-[selected='true']:bg-berget-brand-granite-700/40!\n                        data-[selected=true]:text-berget-foreground\n                      `,\n                      value === country.code && 'bg-berget-brand-granite-800/40',\n                    )}\n                  >\n                    <span className=\"shrink-0 text-xl\">{country.flag}</span>\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"truncate text-sm\">{country.name}</div>\n                      <div className=\"text-xs text-berget-muted-foreground\">{country.code}</div>\n                    </div>\n                    {value === country.code && (\n                      <div\n                        className=\"\n                          size-2 shrink-0 rounded-full\n                          bg-berget-brand-granite-400\n                        \"\n                      />\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    );\n  },\n);\n\nCountrySelect.displayName = 'CountrySelect';\n\nexport { CountrySelect };\nexport type { Country };\nexport {\n  COUNTRIES,\n  EU_COUNTRY_CODES,\n  getCountryByCode,\n  getCountryByName,\n  isEUCountry,\n} from './countries';\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,gBAAgB,MAAM,YAExB,EACE,OACA,eACA,cAAc,kBACd,WAAW,OACX,WACA,QAAQ,UACR,aAAa,KAEf,QACG;CACH,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,KAAK;CAC5C,MAAM,kBAAkB,MAAM,cAAc,UAAU,MAAM,MAAM,EAAE,SAAS,KAAK,GAAG,CAAC,KAAK,CAAC;CAE5F,OACE,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,qBAAC,gBAAD;GACO;GACL,QACE,oBAAC,UAAD;IACE,MAAK;IACK;IACV,iBAAe;IACf,WAAW,GAET,4CACA,oCACA,qBACA,kCACA,mDACA;;;mBAIA,mDAEA;;;mBAIA,SACF;GACD,CAAA;GA1BL,UAAA,CA6BE,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,kBACC,qBAAA,UAAA,EAAA,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MAAoB,UAAA,gBAAgB;KAAW,CAAA;KAC/D,oBAAC,QAAD;MAAM,WAAU;MAAY,UAAA,gBAAgB;KAAW,CAAA;KACvD,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAAgE;OAC5D,gBAAgB;OAAK;MACnB;;IACN,EAAA,CAAA,IAEF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;KAAM,MAAM;KAAO,MAAM;KAAI,WAAU;IAAyC,CAAA,GAChF,oBAAC,QAAD;KAAM,WAAU;KAAyC,UAAA;IAAkB,CAAA,CAC3E,EAAA,CAAA;GAED,CAAA,GACL,oBAAC,MAAD;IACE,MAAM;IACN,MAAM;IACN,WAAW,GACT,yCACA,qCACA,QAAQ,YACV;GACD,CAAA,CACa;EAEhB,CAAA,GAAA,oBAAC,gBAAD;GACS;GACK;GACZ,WAAU;GAEV,UAAA,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAc,aAAY,oBAAqB,CAAA,GAC/C,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAA,UAAc,sBAAiC,CAAA,GAC/C,oBAAC,cAAD,EAAA,UACG,UAAU,KAAK,YACd,qBAAC,aAAD;IAEE,OAAO,GAAG,QAAQ,KAAK,GAAG,QAAQ;IAClC,gBAAgB;KACd,gBAAgB,QAAQ,IAAI;KAC5B,QAAQ,KAAK;IACf;IACA,WAAW,GACT,uCACA;;;yBAIA,UAAU,QAAQ,QAAQ,gCAC5B;IAdF,UAAA;KAgBE,oBAAC,QAAD;MAAM,WAAU;MAAoB,UAAA,QAAQ;KAAW,CAAA;KACvD,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,OAAD;OAAK,WAAU;OAAoB,UAAA,QAAQ;MAAU,CAAA,GACrD,oBAAC,OAAD;OAAK,WAAU;OAAwC,UAAA,QAAQ;MAAU,CAAA,CACtE;;KACJ,UAAU,QAAQ,QACjB,oBAAC,OAAD,EACE,WAAU,4IAIX,CAAA;IAEQ;GA5BN,GAAA,QAAQ,IA4BF,CACd,EACW,CAAA,CACH,EAAA,CAAA,CACN,EAAA,CAAA;EACK,CAAA,CACT;;AAEb,CACF;AAEA,cAAc,cAAc"}

package/dist/components/dialog/Dialog.cjs

@@ -20,16 +20,28 @@ const DialogPortal = _base_ui_react_dialog.Dialog.Portal;
 const DialogClose = _base_ui_react_dialog.Dialog.Close;
 const DialogOverlay = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
 	ref,
-	className: require_utils.cn("fixed inset-0 z-50 bg-berget-dialog-overlay-bg transition-[opacity] duration-200 data-starting-style:opacity-0 data-ending-style:opacity-0", className),
+	className: require_utils.cn(`
+        fixed inset-0 z-50 bg-berget-dialog-overlay-bg transition-opacity
+        duration-200
+        data-ending-style:opacity-0
+        data-starting-style:opacity-0
+      `, className),
 	...props
 }));
 DialogOverlay.displayName = "DialogOverlay";
 const DialogContent = react.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Popup, {
 	ref,
-	className: require_utils.cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-berget-dialog-bg border-berget-dialog-border rounded-berget-sm p-6 shadow-berget-lg transition-[opacity,transform] duration-200 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95", className),
+	className: require_utils.cn(`
+          fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg
+          translate-x-[-50%] translate-y-[-50%] gap-4 rounded-berget-sm border
+          border-berget-dialog-border bg-berget-dialog-bg p-6 shadow-berget-lg
+          transition-[opacity,transform] duration-200
+          data-ending-style:scale-95 data-ending-style:opacity-0
+          data-starting-style:scale-95 data-starting-style:opacity-0
+        `, className),
 	...props,
 	children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Close, {
-		className: "absolute right-4 top-4 rounded-berget-xs opacity-70 ring-offset-berget-dialog-bg transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-berget-focus-ring focus:ring-offset-2 disabled:pointer-events-none data-open:bg-berget-muted data-open:text-berget-muted-foreground",
+		className: "\n          focus:ring-berget-focus-ring\n          absolute top-4 right-4 rounded-berget-xs opacity-70\n          ring-offset-berget-dialog-bg transition-opacity\n          hover:opacity-100\n          focus:ring-2 focus:ring-offset-2 focus:outline-none\n          disabled:pointer-events-none\n          data-open:bg-berget-muted data-open:text-berget-muted-foreground\n        ",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
 			children: "Close"
@@ -38,12 +50,18 @@ const DialogContent = react.forwardRef(({ className, children, ...props }, ref)
 })] }));
 DialogContent.displayName = "DialogContent";
 const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: require_utils.cn("flex flex-col gap-1.5 text-center sm:text-left", className),
+	className: require_utils.cn(`
+        flex flex-col gap-1.5 text-center
+        sm:text-left
+      `, className),
 	...props
 });
 DialogHeader.displayName = "DialogHeader";
 const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: require_utils.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+	className: require_utils.cn(`
+        flex flex-col-reverse gap-2
+        sm:flex-row sm:justify-end
+      `, className),
 	...props
 });
 DialogFooter.displayName = "DialogFooter";

package/dist/components/dialog/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","names":["DialogPrimitive","React","asChildRender","cn","X","Typography"],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { X } from 'lucide-react';\n\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Typography } from '../typography';\n\nconst Dialog = DialogPrimitive.Root;\n\ntype DialogTriggerProps = Omit<DialogPrimitive.Trigger.Props, 'className' | 'render'> & {\n  className?: string;\n  /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n  asChild?: boolean;\n};\n\nconst DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(\n  ({ asChild, children, ...props }, ref) => (\n    <DialogPrimitive.Trigger ref={ref} render={asChildRender(asChild, children)} {...props}>\n      {asChild ? undefined : children}\n    </DialogPrimitive.Trigger>\n  ),\n);\nDialogTrigger.displayName = 'DialogTrigger';\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  HTMLDivElement,\n  Omit<DialogPrimitive.Backdrop.Props, 'className'> & { className?: string }\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Backdrop\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-berget-dialog-overlay-bg transition-[opacity] duration-200 data-starting-style:opacity-0 data-ending-style:opacity-0',\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nconst DialogContent = React.forwardRef<\n  HTMLDivElement,\n  Omit<DialogPrimitive.Popup.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Popup\n      ref={ref}\n      className={cn(\n        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-berget-dialog-bg border-berget-dialog-border rounded-berget-sm p-6 shadow-berget-lg transition-[opacity,transform] duration-200 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-berget-xs opacity-70 ring-offset-berget-dialog-bg transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-berget-focus-ring focus:ring-offset-2 disabled:pointer-events-none data-open:bg-berget-muted data-open:text-berget-muted-foreground\">\n        <X className=\"size-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Popup>\n  </DialogPortal>\n));\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props} />\n);\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}\n    {...props}\n  />\n);\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogTitle = React.forwardRef<\n  HTMLHeadingElement,\n  Omit<DialogPrimitive.Title.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    render={<Typography variant=\"h5\" color=\"default\" as=\"h2\" className={className} />}\n    {...props}\n  >\n    {children}\n  </DialogPrimitive.Title>\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  Omit<DialogPrimitive.Description.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    render={<Typography variant=\"small\" color=\"muted\" className={className} />}\n    {...props}\n  >\n    {children}\n  </DialogPrimitive.Description>\n));\nDialogDescription.displayName = 'DialogDescription';\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,SAASA,sBAAAA,OAAgB;AAQ/B,MAAM,gBAAgBC,MAAM,YACzB,EAAE,SAAS,UAAU,GAAG,SAAS,QAChC,iBAAA,GAAA,kBAAA,IAAA,CAACD,sBAAAA,OAAgB,SAAjB;CAA8B;CAAK,QAAQE,cAAAA,cAAc,SAAS,QAAQ;CAAG,GAAI;CAC9E,UAAA,UAAU,KAAA,IAAY;AACA,CAAA,CAE7B;AACA,cAAc,cAAc;AAE5B,MAAM,eAAeF,sBAAAA,OAAgB;AAErC,MAAM,cAAcA,sBAAAA,OAAgB;AAEpC,MAAM,gBAAgBC,MAAM,YAGzB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAACD,sBAAAA,OAAgB,UAAjB;CACO;CACL,WAAWG,cAAAA,GACT,8IACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgBF,MAAM,YAGzB,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,CAAgB,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAA,CAACD,sBAAAA,OAAgB,OAAjB;CACO;CACL,WAAWG,cAAAA,GACT,gWACA,SACF;CACA,GAAI;CANN,UAAA,CAQG,UACD,iBAAA,GAAA,kBAAA,KAAA,CAACH,sBAAAA,OAAgB,OAAjB;EAAuB,WAAU;EAAjC,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACI,aAAAA,GAAD,EAAG,WAAU,SAAU,CAAA,GACvB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAW,CAAA,CAChB;CACF,CAAA,CAAA;AACX,CAAA,CAAA,EAAA,CAAA,CACf;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgB,EAAE,WAAW,GAAG,YACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CAAK,WAAWD,cAAAA,GAAG,kDAAkD,SAAS;CAAG,GAAI;AAAQ,CAAA;AAE/F,aAAa,cAAc;AAE3B,MAAM,gBAAgB,EAAE,WAAW,GAAG,YACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CACE,WAAWA,cAAAA,GAAG,0DAA0D,SAAS;CACjF,GAAI;AACL,CAAA;AAEH,aAAa,cAAc;AAE3B,MAAM,cAAcF,MAAM,YAGvB,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,IAAA,CAACD,sBAAAA,OAAgB,OAAjB;CACO;CACL,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACK,mBAAAA,YAAD;EAAY,SAAQ;EAAK,OAAM;EAAU,IAAG;EAAgB;CAAY,CAAA;CAChF,GAAI;CAEH;AACoB,CAAA,CACxB;AACD,YAAY,cAAc;AAE1B,MAAM,oBAAoBJ,MAAM,YAG7B,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,IAAA,CAACD,sBAAAA,OAAgB,aAAjB;CACO;CACL,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACK,mBAAAA,YAAD;EAAY,SAAQ;EAAQ,OAAM;EAAmB;CAAY,CAAA;CACzE,GAAI;CAEH;AAC0B,CAAA,CAC9B;AACD,kBAAkB,cAAc"}
+{"version":3,"file":"Dialog.cjs","names":["DialogPrimitive","React","asChildRender","cn","X","Typography"],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { X } from 'lucide-react';\n\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Typography } from '../typography';\n\nconst Dialog = DialogPrimitive.Root;\n\ntype DialogTriggerProps = Omit<DialogPrimitive.Trigger.Props, 'className' | 'render'> & {\n  className?: string;\n  /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n  asChild?: boolean;\n};\n\nconst DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(\n  ({ asChild, children, ...props }, ref) => (\n    <DialogPrimitive.Trigger ref={ref} render={asChildRender(asChild, children)} {...props}>\n      {asChild ? undefined : children}\n    </DialogPrimitive.Trigger>\n  ),\n);\nDialogTrigger.displayName = 'DialogTrigger';\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  HTMLDivElement,\n  Omit<DialogPrimitive.Backdrop.Props, 'className'> & { className?: string }\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Backdrop\n    ref={ref}\n    className={cn(\n      `\n        fixed inset-0 z-50 bg-berget-dialog-overlay-bg transition-opacity\n        duration-200\n        data-ending-style:opacity-0\n        data-starting-style:opacity-0\n      `,\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nconst DialogContent = React.forwardRef<\n  HTMLDivElement,\n  Omit<DialogPrimitive.Popup.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Popup\n      ref={ref}\n      className={cn(\n        `\n          fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg\n          translate-x-[-50%] translate-y-[-50%] gap-4 rounded-berget-sm border\n          border-berget-dialog-border bg-berget-dialog-bg p-6 shadow-berget-lg\n          transition-[opacity,transform] duration-200\n          data-ending-style:scale-95 data-ending-style:opacity-0\n          data-starting-style:scale-95 data-starting-style:opacity-0\n        `,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close\n        className=\"\n          focus:ring-berget-focus-ring\n          absolute top-4 right-4 rounded-berget-xs opacity-70\n          ring-offset-berget-dialog-bg transition-opacity\n          hover:opacity-100\n          focus:ring-2 focus:ring-offset-2 focus:outline-none\n          disabled:pointer-events-none\n          data-open:bg-berget-muted data-open:text-berget-muted-foreground\n        \"\n      >\n        <X className=\"size-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Popup>\n  </DialogPortal>\n));\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      `\n        flex flex-col gap-1.5 text-center\n        sm:text-left\n      `,\n      className,\n    )}\n    {...props}\n  />\n);\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      `\n        flex flex-col-reverse gap-2\n        sm:flex-row sm:justify-end\n      `,\n      className,\n    )}\n    {...props}\n  />\n);\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogTitle = React.forwardRef<\n  HTMLHeadingElement,\n  Omit<DialogPrimitive.Title.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    render={<Typography variant=\"h5\" color=\"default\" as=\"h2\" className={className} />}\n    {...props}\n  >\n    {children}\n  </DialogPrimitive.Title>\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  Omit<DialogPrimitive.Description.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    render={<Typography variant=\"small\" color=\"muted\" className={className} />}\n    {...props}\n  >\n    {children}\n  </DialogPrimitive.Description>\n));\nDialogDescription.displayName = 'DialogDescription';\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,SAASA,sBAAAA,OAAgB;AAQ/B,MAAM,gBAAgBC,MAAM,YACzB,EAAE,SAAS,UAAU,GAAG,SAAS,QAChC,iBAAA,GAAA,kBAAA,IAAA,CAACD,sBAAAA,OAAgB,SAAjB;CAA8B;CAAK,QAAQE,cAAAA,cAAc,SAAS,QAAQ;CAAG,GAAI;CAC9E,UAAA,UAAU,KAAA,IAAY;AACA,CAAA,CAE7B;AACA,cAAc,cAAc;AAE5B,MAAM,eAAeF,sBAAAA,OAAgB;AAErC,MAAM,cAAcA,sBAAAA,OAAgB;AAEpC,MAAM,gBAAgBC,MAAM,YAGzB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,IAAA,CAACD,sBAAAA,OAAgB,UAAjB;CACO;CACL,WAAWG,cAAAA,GACT;;;;;SAMA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgBF,MAAM,YAGzB,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD,CAAgB,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAA,CAACD,sBAAAA,OAAgB,OAAjB;CACO;CACL,WAAWG,cAAAA,GACT;;;;;;;WAQA,SACF;CACA,GAAI;CAbN,UAAA,CAeG,UACD,iBAAA,GAAA,kBAAA,KAAA,CAACH,sBAAAA,OAAgB,OAAjB;EACE,WAAU;EADZ,UAAA,CAWE,iBAAA,GAAA,kBAAA,IAAA,CAACI,aAAAA,GAAD,EAAG,WAAU,SAAU,CAAA,GACvB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAW,CAAA,CAChB;CACF,CAAA,CAAA;AACX,CAAA,CAAA,EAAA,CAAA,CACf;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgB,EAAE,WAAW,GAAG,YACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CACE,WAAWD,cAAAA,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA;AAEH,aAAa,cAAc;AAE3B,MAAM,gBAAgB,EAAE,WAAW,GAAG,YACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CACE,WAAWA,cAAAA,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA;AAEH,aAAa,cAAc;AAE3B,MAAM,cAAcF,MAAM,YAGvB,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,IAAA,CAACD,sBAAAA,OAAgB,OAAjB;CACO;CACL,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACK,mBAAAA,YAAD;EAAY,SAAQ;EAAK,OAAM;EAAU,IAAG;EAAgB;CAAY,CAAA;CAChF,GAAI;CAEH;AACoB,CAAA,CACxB;AACD,YAAY,cAAc;AAE1B,MAAM,oBAAoBJ,MAAM,YAG7B,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,iBAAA,GAAA,kBAAA,IAAA,CAACD,sBAAAA,OAAgB,aAAjB;CACO;CACL,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACK,mBAAAA,YAAD;EAAY,SAAQ;EAAQ,OAAM;EAAmB;CAAY,CAAA;CACzE,GAAI;CAEH;AAC0B,CAAA,CAC9B;AACD,kBAAkB,cAAc"}

package/dist/components/dialog/Dialog.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.cts","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/Dialog.tsx"],"mappings":";;;cASMA,WAAM,SAAA,OAAAC,OAAA,KAAA,MAAA,aAAA,MAAA,IAAA;KAEP,qBAAqB,KAAKA,OAAgB,QAAQ;EACrD;;EAEA;;cAGI,eAAa,MAAA,0BAAA,KAAA,6BAAA,MAAA,cAAA;cASb,cAAY,MAAA,0BAAA,8BAAA,iCAAA,MAAA,cAAA;cAEZ,aAAW,MAAA,0BAAA,8BAAA,gCAAA,MAAA,cAAA;cAEX,eAAa,MAAA,0BAAA,KAAA,8BAAA;EAEiD;YAUlE,MAAA,cAAA;cAGI,eAAa,MAAA,0BAAA,KAAA,8BAAA;EAE8C;YAmB/D,MAAA,cAAA;cAGI;KAAyC,cAAA,SAAA,MAAM,eAAe,8CAAe,IAAA;;;cAK7E;KAAyC,cAAA,SAAA,MAAM,eAAe,8CAAe,IAAA;;;cAQ7E,aAAW,MAAA,0BAAA,KAAA,8BAAA;EAEgD;YAS/D,MAAA,cAAA;cAGI,mBAAiB,MAAA,0BAAA,KAAA,8BAAA;EAEgD;YASrE,MAAA,cAAA"}
+{"version":3,"file":"Dialog.d.cts","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/Dialog.tsx"],"mappings":";;;cASMA,WAAM,SAAA,OAAAC,OAAA,KAAA,MAAA,aAAA,MAAA,IAAA;KAEP,qBAAqB,KAAKA,OAAgB,QAAQ;EACrD;;EAEA;;cAGI,eAAa,MAAA,0BAAA,KAAA,6BAAA,MAAA,cAAA;cASb,cAAY,MAAA,0BAAA,8BAAA,iCAAA,MAAA,cAAA;cAEZ,aAAW,MAAA,0BAAA,8BAAA,gCAAA,MAAA,cAAA;cAEX,eAAa,MAAA,0BAAA,KAAA,8BAAA;EAEiD;YAelE,MAAA,cAAA;cAGI,eAAa,MAAA,0BAAA,KAAA,8BAAA;EAE8C;YAoC/D,MAAA,cAAA;cAGI;KAAyC,cAAA,SAAA,MAAM,eAAe,8CAAe,IAAA;;;cAc7E;KAAyC,cAAA,SAAA,MAAM,eAAe,8CAAe,IAAA;;;cAc7E,aAAW,MAAA,0BAAA,KAAA,8BAAA;EAEgD;YAS/D,MAAA,cAAA;cAGI,mBAAiB,MAAA,0BAAA,KAAA,8BAAA;EAEgD;YASrE,MAAA,cAAA"}

package/dist/components/dialog/Dialog.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.mts","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/Dialog.tsx"],"mappings":";;;cASMA,WAAM,SAAA,OAAAC,OAAA,KAAA,MAAA,aAAA,MAAA,IAAA;KAEP,qBAAqB,KAAKA,OAAgB,QAAQ;EACrD;;EAEA;;cAGI,eAAa,MAAA,0BAAA,KAAA,6BAAA,MAAA,cAAA;cASb,cAAY,MAAA,0BAAA,8BAAA,iCAAA,MAAA,cAAA;cAEZ,aAAW,MAAA,0BAAA,8BAAA,gCAAA,MAAA,cAAA;cAEX,eAAa,MAAA,0BAAA,KAAA,8BAAA;EAEiD;YAUlE,MAAA,cAAA;cAGI,eAAa,MAAA,0BAAA,KAAA,8BAAA;EAE8C;YAmB/D,MAAA,cAAA;cAGI;KAAyC,cAAA,SAAA,MAAM,eAAe,8CAAe,IAAA;;;cAK7E;KAAyC,cAAA,SAAA,MAAM,eAAe,8CAAe,IAAA;;;cAQ7E,aAAW,MAAA,0BAAA,KAAA,8BAAA;EAEgD;YAS/D,MAAA,cAAA;cAGI,mBAAiB,MAAA,0BAAA,KAAA,8BAAA;EAEgD;YASrE,MAAA,cAAA"}
+{"version":3,"file":"Dialog.d.mts","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/Dialog.tsx"],"mappings":";;;cASMA,WAAM,SAAA,OAAAC,OAAA,KAAA,MAAA,aAAA,MAAA,IAAA;KAEP,qBAAqB,KAAKA,OAAgB,QAAQ;EACrD;;EAEA;;cAGI,eAAa,MAAA,0BAAA,KAAA,6BAAA,MAAA,cAAA;cASb,cAAY,MAAA,0BAAA,8BAAA,iCAAA,MAAA,cAAA;cAEZ,aAAW,MAAA,0BAAA,8BAAA,gCAAA,MAAA,cAAA;cAEX,eAAa,MAAA,0BAAA,KAAA,8BAAA;EAEiD;YAelE,MAAA,cAAA;cAGI,eAAa,MAAA,0BAAA,KAAA,8BAAA;EAE8C;YAoC/D,MAAA,cAAA;cAGI;KAAyC,cAAA,SAAA,MAAM,eAAe,8CAAe,IAAA;;;cAc7E;KAAyC,cAAA,SAAA,MAAM,eAAe,8CAAe,IAAA;;;cAc7E,aAAW,MAAA,0BAAA,KAAA,8BAAA;EAEgD;YAS/D,MAAA,cAAA;cAGI,mBAAiB,MAAA,0BAAA,KAAA,8BAAA;EAEgD;YASrE,MAAA,cAAA"}

package/dist/components/dialog/Dialog.mjs

@@ -18,16 +18,28 @@ const DialogPortal = Dialog.Portal;
 const DialogClose = Dialog.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Backdrop, {
 	ref,
-	className: cn("fixed inset-0 z-50 bg-berget-dialog-overlay-bg transition-[opacity] duration-200 data-starting-style:opacity-0 data-ending-style:opacity-0", className),
+	className: cn(`
+        fixed inset-0 z-50 bg-berget-dialog-overlay-bg transition-opacity
+        duration-200
+        data-ending-style:opacity-0
+        data-starting-style:opacity-0
+      `, className),
 	...props
 }));
 DialogOverlay.displayName = "DialogOverlay";
 const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 	ref,
-	className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-berget-dialog-bg border-berget-dialog-border rounded-berget-sm p-6 shadow-berget-lg transition-[opacity,transform] duration-200 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95", className),
+	className: cn(`
+          fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg
+          translate-x-[-50%] translate-y-[-50%] gap-4 rounded-berget-sm border
+          border-berget-dialog-border bg-berget-dialog-bg p-6 shadow-berget-lg
+          transition-[opacity,transform] duration-200
+          data-ending-style:scale-95 data-ending-style:opacity-0
+          data-starting-style:scale-95 data-starting-style:opacity-0
+        `, className),
 	...props,
 	children: [children, /* @__PURE__ */ jsxs(Dialog.Close, {
-		className: "absolute right-4 top-4 rounded-berget-xs opacity-70 ring-offset-berget-dialog-bg transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-berget-focus-ring focus:ring-offset-2 disabled:pointer-events-none data-open:bg-berget-muted data-open:text-berget-muted-foreground",
+		className: "\n          focus:ring-berget-focus-ring\n          absolute top-4 right-4 rounded-berget-xs opacity-70\n          ring-offset-berget-dialog-bg transition-opacity\n          hover:opacity-100\n          focus:ring-2 focus:ring-offset-2 focus:outline-none\n          disabled:pointer-events-none\n          data-open:bg-berget-muted data-open:text-berget-muted-foreground\n        ",
 		children: [/* @__PURE__ */ jsx(X, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Close"
@@ -36,12 +48,18 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
 })] }));
 DialogContent.displayName = "DialogContent";
 const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex flex-col gap-1.5 text-center sm:text-left", className),
+	className: cn(`
+        flex flex-col gap-1.5 text-center
+        sm:text-left
+      `, className),
 	...props
 });
 DialogHeader.displayName = "DialogHeader";
 const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+	className: cn(`
+        flex flex-col-reverse gap-2
+        sm:flex-row sm:justify-end
+      `, className),
 	...props
 });
 DialogFooter.displayName = "DialogFooter";

package/dist/components/dialog/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.mjs","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { X } from 'lucide-react';\n\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Typography } from '../typography';\n\nconst Dialog = DialogPrimitive.Root;\n\ntype DialogTriggerProps = Omit<DialogPrimitive.Trigger.Props, 'className' | 'render'> & {\n  className?: string;\n  /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n  asChild?: boolean;\n};\n\nconst DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(\n  ({ asChild, children, ...props }, ref) => (\n    <DialogPrimitive.Trigger ref={ref} render={asChildRender(asChild, children)} {...props}>\n      {asChild ? undefined : children}\n    </DialogPrimitive.Trigger>\n  ),\n);\nDialogTrigger.displayName = 'DialogTrigger';\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  HTMLDivElement,\n  Omit<DialogPrimitive.Backdrop.Props, 'className'> & { className?: string }\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Backdrop\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-berget-dialog-overlay-bg transition-[opacity] duration-200 data-starting-style:opacity-0 data-ending-style:opacity-0',\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nconst DialogContent = React.forwardRef<\n  HTMLDivElement,\n  Omit<DialogPrimitive.Popup.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Popup\n      ref={ref}\n      className={cn(\n        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-berget-dialog-bg border-berget-dialog-border rounded-berget-sm p-6 shadow-berget-lg transition-[opacity,transform] duration-200 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-berget-xs opacity-70 ring-offset-berget-dialog-bg transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-berget-focus-ring focus:ring-offset-2 disabled:pointer-events-none data-open:bg-berget-muted data-open:text-berget-muted-foreground\">\n        <X className=\"size-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Popup>\n  </DialogPortal>\n));\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props} />\n);\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}\n    {...props}\n  />\n);\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogTitle = React.forwardRef<\n  HTMLHeadingElement,\n  Omit<DialogPrimitive.Title.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    render={<Typography variant=\"h5\" color=\"default\" as=\"h2\" className={className} />}\n    {...props}\n  >\n    {children}\n  </DialogPrimitive.Title>\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  Omit<DialogPrimitive.Description.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    render={<Typography variant=\"small\" color=\"muted\" className={className} />}\n    {...props}\n  >\n    {children}\n  </DialogPrimitive.Description>\n));\nDialogDescription.displayName = 'DialogDescription';\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n"],"mappings":";;;;;;;;AASA,MAAMA,WAASC,OAAgB;AAQ/B,MAAM,gBAAgB,MAAM,YACzB,EAAE,SAAS,UAAU,GAAG,SAAS,QAChC,oBAACA,OAAgB,SAAjB;CAA8B;CAAK,QAAQ,cAAc,SAAS,QAAQ;CAAG,GAAI;CAC9E,UAAA,UAAU,KAAA,IAAY;AACA,CAAA,CAE7B;AACA,cAAc,cAAc;AAE5B,MAAM,eAAeA,OAAgB;AAErC,MAAM,cAAcA,OAAgB;AAEpC,MAAM,gBAAgB,MAAM,YAGzB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACA,OAAgB,UAAjB;CACO;CACL,WAAW,GACT,8IACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgB,MAAM,YAGzB,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,OAAjB;CACO;CACL,WAAW,GACT,gWACA,SACF;CACA,GAAI;CANN,UAAA,CAQG,UACD,qBAACA,OAAgB,OAAjB;EAAuB,WAAU;EAAjC,UAAA,CACE,oBAAC,GAAD,EAAG,WAAU,SAAU,CAAA,GACvB,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAW,CAAA,CAChB;CACF,CAAA,CAAA;AACX,CAAA,CAAA,EAAA,CAAA,CACf;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgB,EAAE,WAAW,GAAG,YACpC,oBAAC,OAAD;CAAK,WAAW,GAAG,kDAAkD,SAAS;CAAG,GAAI;AAAQ,CAAA;AAE/F,aAAa,cAAc;AAE3B,MAAM,gBAAgB,EAAE,WAAW,GAAG,YACpC,oBAAC,OAAD;CACE,WAAW,GAAG,0DAA0D,SAAS;CACjF,GAAI;AACL,CAAA;AAEH,aAAa,cAAc;AAE3B,MAAM,cAAc,MAAM,YAGvB,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,oBAACA,OAAgB,OAAjB;CACO;CACL,QAAQ,oBAAC,YAAD;EAAY,SAAQ;EAAK,OAAM;EAAU,IAAG;EAAgB;CAAY,CAAA;CAChF,GAAI;CAEH;AACoB,CAAA,CACxB;AACD,YAAY,cAAc;AAE1B,MAAM,oBAAoB,MAAM,YAG7B,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,oBAACA,OAAgB,aAAjB;CACO;CACL,QAAQ,oBAAC,YAAD;EAAY,SAAQ;EAAQ,OAAM;EAAmB;CAAY,CAAA;CACzE,GAAI;CAEH;AAC0B,CAAA,CAC9B;AACD,kBAAkB,cAAc"}
+{"version":3,"file":"Dialog.mjs","names":["Dialog","DialogPrimitive"],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { X } from 'lucide-react';\n\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Typography } from '../typography';\n\nconst Dialog = DialogPrimitive.Root;\n\ntype DialogTriggerProps = Omit<DialogPrimitive.Trigger.Props, 'className' | 'render'> & {\n  className?: string;\n  /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n  asChild?: boolean;\n};\n\nconst DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(\n  ({ asChild, children, ...props }, ref) => (\n    <DialogPrimitive.Trigger ref={ref} render={asChildRender(asChild, children)} {...props}>\n      {asChild ? undefined : children}\n    </DialogPrimitive.Trigger>\n  ),\n);\nDialogTrigger.displayName = 'DialogTrigger';\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  HTMLDivElement,\n  Omit<DialogPrimitive.Backdrop.Props, 'className'> & { className?: string }\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Backdrop\n    ref={ref}\n    className={cn(\n      `\n        fixed inset-0 z-50 bg-berget-dialog-overlay-bg transition-opacity\n        duration-200\n        data-ending-style:opacity-0\n        data-starting-style:opacity-0\n      `,\n      className,\n    )}\n    {...props}\n  />\n));\nDialogOverlay.displayName = 'DialogOverlay';\n\nconst DialogContent = React.forwardRef<\n  HTMLDivElement,\n  Omit<DialogPrimitive.Popup.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Popup\n      ref={ref}\n      className={cn(\n        `\n          fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg\n          translate-x-[-50%] translate-y-[-50%] gap-4 rounded-berget-sm border\n          border-berget-dialog-border bg-berget-dialog-bg p-6 shadow-berget-lg\n          transition-[opacity,transform] duration-200\n          data-ending-style:scale-95 data-ending-style:opacity-0\n          data-starting-style:scale-95 data-starting-style:opacity-0\n        `,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close\n        className=\"\n          focus:ring-berget-focus-ring\n          absolute top-4 right-4 rounded-berget-xs opacity-70\n          ring-offset-berget-dialog-bg transition-opacity\n          hover:opacity-100\n          focus:ring-2 focus:ring-offset-2 focus:outline-none\n          disabled:pointer-events-none\n          data-open:bg-berget-muted data-open:text-berget-muted-foreground\n        \"\n      >\n        <X className=\"size-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Popup>\n  </DialogPortal>\n));\nDialogContent.displayName = 'DialogContent';\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      `\n        flex flex-col gap-1.5 text-center\n        sm:text-left\n      `,\n      className,\n    )}\n    {...props}\n  />\n);\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      `\n        flex flex-col-reverse gap-2\n        sm:flex-row sm:justify-end\n      `,\n      className,\n    )}\n    {...props}\n  />\n);\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogTitle = React.forwardRef<\n  HTMLHeadingElement,\n  Omit<DialogPrimitive.Title.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    render={<Typography variant=\"h5\" color=\"default\" as=\"h2\" className={className} />}\n    {...props}\n  >\n    {children}\n  </DialogPrimitive.Title>\n));\nDialogTitle.displayName = 'DialogTitle';\n\nconst DialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  Omit<DialogPrimitive.Description.Props, 'className'> & { className?: string }\n>(({ className, children, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    render={<Typography variant=\"small\" color=\"muted\" className={className} />}\n    {...props}\n  >\n    {children}\n  </DialogPrimitive.Description>\n));\nDialogDescription.displayName = 'DialogDescription';\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n"],"mappings":";;;;;;;;AASA,MAAMA,WAASC,OAAgB;AAQ/B,MAAM,gBAAgB,MAAM,YACzB,EAAE,SAAS,UAAU,GAAG,SAAS,QAChC,oBAACA,OAAgB,SAAjB;CAA8B;CAAK,QAAQ,cAAc,SAAS,QAAQ;CAAG,GAAI;CAC9E,UAAA,UAAU,KAAA,IAAY;AACA,CAAA,CAE7B;AACA,cAAc,cAAc;AAE5B,MAAM,eAAeA,OAAgB;AAErC,MAAM,cAAcA,OAAgB;AAEpC,MAAM,gBAAgB,MAAM,YAGzB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACA,OAAgB,UAAjB;CACO;CACL,WAAW,GACT;;;;;SAMA,SACF;CACA,GAAI;AACL,CAAA,CACF;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgB,MAAM,YAGzB,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,OAAjB;CACO;CACL,WAAW,GACT;;;;;;;WAQA,SACF;CACA,GAAI;CAbN,UAAA,CAeG,UACD,qBAACA,OAAgB,OAAjB;EACE,WAAU;EADZ,UAAA,CAWE,oBAAC,GAAD,EAAG,WAAU,SAAU,CAAA,GACvB,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAW,CAAA,CAChB;CACF,CAAA,CAAA;AACX,CAAA,CAAA,EAAA,CAAA,CACf;AACD,cAAc,cAAc;AAE5B,MAAM,gBAAgB,EAAE,WAAW,GAAG,YACpC,oBAAC,OAAD;CACE,WAAW,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA;AAEH,aAAa,cAAc;AAE3B,MAAM,gBAAgB,EAAE,WAAW,GAAG,YACpC,oBAAC,OAAD;CACE,WAAW,GACT;;;SAIA,SACF;CACA,GAAI;AACL,CAAA;AAEH,aAAa,cAAc;AAE3B,MAAM,cAAc,MAAM,YAGvB,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,oBAACA,OAAgB,OAAjB;CACO;CACL,QAAQ,oBAAC,YAAD;EAAY,SAAQ;EAAK,OAAM;EAAU,IAAG;EAAgB;CAAY,CAAA;CAChF,GAAI;CAEH;AACoB,CAAA,CACxB;AACD,YAAY,cAAc;AAE1B,MAAM,oBAAoB,MAAM,YAG7B,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC,oBAACA,OAAgB,aAAjB;CACO;CACL,QAAQ,oBAAC,YAAD;EAAY,SAAQ;EAAQ,OAAM;EAAmB;CAAY,CAAA;CACzE,GAAI;CAEH;AAC0B,CAAA,CAC9B;AACD,kBAAkB,cAAc"}

package/dist/components/divider/Divider.cjs

@@ -18,8 +18,8 @@ const dividerVariants = (0, require("class-variance-authority").cva)("", {
 		},
 		size: {
 			thin: "",
-			medium: "!h-[2px]",
-			thick: "!h-[4px]"
+			medium: "h-[2px]!",
+			thick: "h-[4px]!"
 		}
 	},
 	defaultVariants: {
@@ -30,7 +30,7 @@ const dividerVariants = (0, require("class-variance-authority").cva)("", {
 const Divider = react.forwardRef(({ className, orientation = "horizontal", variant, size, label, labelPosition = "center", ...props }, ref) => {
 	if (label) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref,
-		className: require_utils.cn("flex items-center w-full", className),
+		className: require_utils.cn("flex w-full items-center", className),
 		...props,
 		children: [
 			labelPosition !== "right" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_separator.Separator, {
@@ -43,7 +43,7 @@ const Divider = react.forwardRef(({ className, orientation = "horizontal", varia
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 				variant: "small",
 				color: "muted",
-				className: "px-4 whitespace-nowrap",
+				className: "\n            px-4 whitespace-nowrap\n          ",
 				children: label
 			}),
 			labelPosition !== "left" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_separator.Separator, {
@@ -61,7 +61,7 @@ const Divider = react.forwardRef(({ className, orientation = "horizontal", varia
 		className: require_utils.cn(dividerVariants({
 			variant,
 			size
-		}), orientation === "vertical" && "h-full !w-[1px]", className)
+		}), orientation === "vertical" && "h-full w-px!", className)
 	});
 });
 Divider.displayName = "Divider";