@umami/react-zen 0.179.0 → 0.180.0

package/dist/index.css

@@ -3769,44 +3769,6 @@ body a.Button_button__NGQyO {
   padding: var(--spacing-1);
 }
 
-/* virtual-css:css:418d794d283baef586ab30b99cf90aa1 */
-.Container_container__ZWU0Y {
-  width: 100%;
-  padding: 0 1rem;
-}
-.Container_container__ZWU0Y.Container_centered__OTM1M {
-  margin: 0 auto;
-}
-.Container_container__ZWU0Y.Container_fluid__NTBhY {
-  max-width: 100%;
-  padding: 0;
-}
-@media (min-width: 520px) {
-  .Container_container__ZWU0Y {
-    max-width: 500px;
-  }
-}
-@media (min-width: 768px) {
-  .Container_container__ZWU0Y {
-    max-width: 740px;
-  }
-}
-@media (min-width: 1024px) {
-  .Container_container__ZWU0Y {
-    max-width: 1000px;
-  }
-}
-@media (min-width: 1280px) {
-  .Container_container__ZWU0Y {
-    max-width: 1240px;
-  }
-}
-@media (min-width: 1640px) {
-  .Container_container__ZWU0Y {
-    max-width: 1600px;
-  }
-}
-
 /* virtual-css:css:814f767aeadf5e17bfb63509d2206999 */
 .CopyButton_icon__YTM2Y {
   animation: CopyButton_copy-button__MjY1M 200ms;
@@ -3911,6 +3873,44 @@ body a.Button_button__NGQyO {
   font-weight: 700;
 }
 
+/* virtual-css:css:418d794d283baef586ab30b99cf90aa1 */
+.Container_container__ZWU0Y {
+  width: 100%;
+  padding: 0 1rem;
+}
+.Container_container__ZWU0Y.Container_centered__OTM1M {
+  margin: 0 auto;
+}
+.Container_container__ZWU0Y.Container_fluid__NTBhY {
+  max-width: 100%;
+  padding: 0;
+}
+@media (min-width: 520px) {
+  .Container_container__ZWU0Y {
+    max-width: 500px;
+  }
+}
+@media (min-width: 768px) {
+  .Container_container__ZWU0Y {
+    max-width: 740px;
+  }
+}
+@media (min-width: 1024px) {
+  .Container_container__ZWU0Y {
+    max-width: 1000px;
+  }
+}
+@media (min-width: 1280px) {
+  .Container_container__ZWU0Y {
+    max-width: 1240px;
+  }
+}
+@media (min-width: 1640px) {
+  .Container_container__ZWU0Y {
+    max-width: 1600px;
+  }
+}
+
 /* virtual-css:css:eedba9fc7e3d8030bbd07387da49f358 */
 .Table_table__YjllN {
   font-size: var(--font-size);

package/dist/index.d.mts

@@ -354,17 +354,25 @@ interface ColumnProps extends FlexboxProps {
 }
 declare function Column({ reverse, children, ...props }: ColumnProps): react.JSX.Element;
 
+interface ConfirmationDialogProps extends AlertDialogProps {
+    value: string;
+    confirmMessage?: ReactNode;
+}
+declare function ConfirmationDialog({ value, confirmMessage, className, children, ...props }: ConfirmationDialogProps): react.JSX.Element;
+
 interface ContainerProps extends BoxProps {
     isFluid?: boolean;
     isCentered?: boolean;
 }
 declare function Container({ isCentered, isFluid, className, children, ...props }: ContainerProps): react.JSX.Element;
 
-interface ConfirmationDialogProps extends AlertDialogProps {
-    value: string;
-    confirmMessage?: ReactNode;
+interface CopyButtonProps {
+    value?: string;
+    timeout?: number;
+    className?: string;
+    children?: ReactNode;
 }
-declare function ConfirmationDialog({ value, confirmMessage, className, children, ...props }: ConfirmationDialogProps): react.JSX.Element;
+declare function CopyButton({ value, timeout, className, children, ...props }: CopyButtonProps): react.JSX.Element;
 
 interface DataTableProps extends TableProps {
     data?: any[];
@@ -726,4 +734,4 @@ interface ZenProviderProps {
 }
 declare function ZenProvider({ children, ...props }: ZenProviderProps): react.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };

package/dist/index.d.ts

@@ -354,17 +354,25 @@ interface ColumnProps extends FlexboxProps {
 }
 declare function Column({ reverse, children, ...props }: ColumnProps): react.JSX.Element;
 
+interface ConfirmationDialogProps extends AlertDialogProps {
+    value: string;
+    confirmMessage?: ReactNode;
+}
+declare function ConfirmationDialog({ value, confirmMessage, className, children, ...props }: ConfirmationDialogProps): react.JSX.Element;
+
 interface ContainerProps extends BoxProps {
     isFluid?: boolean;
     isCentered?: boolean;
 }
 declare function Container({ isCentered, isFluid, className, children, ...props }: ContainerProps): react.JSX.Element;
 
-interface ConfirmationDialogProps extends AlertDialogProps {
-    value: string;
-    confirmMessage?: ReactNode;
+interface CopyButtonProps {
+    value?: string;
+    timeout?: number;
+    className?: string;
+    children?: ReactNode;
 }
-declare function ConfirmationDialog({ value, confirmMessage, className, children, ...props }: ConfirmationDialogProps): react.JSX.Element;
+declare function CopyButton({ value, timeout, className, children, ...props }: CopyButtonProps): react.JSX.Element;
 
 interface DataTableProps extends TableProps {
     data?: any[];
@@ -726,4 +734,4 @@ interface ZenProviderProps {
 }
 declare function ZenProvider({ children, ...props }: ZenProviderProps): react.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };

package/dist/index.js

@@ -240,6 +240,7 @@ __export(index_exports, {
   ComboBox: () => ComboBox2,
   ConfirmationDialog: () => ConfirmationDialog,
   Container: () => Container,
+  CopyButton: () => CopyButton,
   DataColumn: () => DataColumn,
   DataTable: () => DataTable,
   Dialog: () => Dialog2,
@@ -33019,53 +33020,23 @@ function Code({ asChild, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Component, { className: Code_default.code, children });
 }
 
-// src/components/Container.tsx
-var import_classnames23 = __toESM(require_classnames());
-
-// css-modules:E:\dev\umami-react-zen\src\components\Container.module.css
-var Container_default = { "container": "Container_container__ZWU0Y", "centered": "Container_centered__OTM1M", "fluid": "Container_fluid__NTBhY" };
-
-// src/components/Container.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-function Container({
-  isCentered = true,
-  isFluid,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    Box,
-    {
-      ...props,
-      className: (0, import_classnames23.default)(
-        Container_default.container,
-        className,
-        isCentered && Container_default.centered,
-        isFluid && Container_default.fluid
-      ),
-      children
-    }
-  );
-}
-
 // src/components/ConfirmationDialog.tsx
 var import_react185 = require("react");
-var import_classnames26 = __toESM(require_classnames());
+var import_classnames25 = __toESM(require_classnames());
 
 // src/components/TextField.tsx
 var import_react184 = require("react");
-var import_classnames25 = __toESM(require_classnames());
+var import_classnames24 = __toESM(require_classnames());
 
 // src/components/CopyButton.tsx
 var import_react183 = require("react");
-var import_classnames24 = __toESM(require_classnames());
+var import_classnames23 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
 var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "CopyButton_copy-button__MjY1M" };
 
 // src/components/CopyButton.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
   const [copied, setCopied] = (0, import_react183.useState)(false);
@@ -33078,14 +33049,14 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
       ref.current = +setTimeout(() => setCopied(false), timeout);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon2, { ...props, className: (0, import_classnames24.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Copy, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon2, { ...props, className: (0, import_classnames23.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Copy, {}) });
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
 var TextField_default = { "field": "TextField_field__YzU1O", "icon": "TextField_icon__MDJlY", "novalue": "TextField_novalue__NDg4Y", "textarea": "TextField_textarea__NTQ3M", "resize-vertical": "TextField_resize-vertical__ZDc3N", "resize-horizontal": "TextField_resize-horizontal__MzJjY", "resize-none": "TextField_resize-none__ZmUxZ" };
 
 // src/components/TextField.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function TextField2({
   value,
   defaultValue,
@@ -33110,14 +33081,14 @@ function TextField2({
   (0, import_react184.useEffect)(() => {
     setInputValue(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label2, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       $bcdf0525bf22703d$export$2c73285ae9390cec,
       {
         "aria-label": "Text",
         ...props,
-        className: (0, import_classnames25.default)(
+        className: (0, import_classnames24.default)(
           TextField_default.field,
           asTextArea && TextField_default.textarea,
           allowCopy && TextField_default.copy,
@@ -33130,8 +33101,8 @@ function TextField2({
         isDisabled,
         onChange: handleChange,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, { placeholder }),
-          allowCopy && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CopyButton, { value: inputValue, className: TextField_default.icon })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Component, { placeholder }),
+          allowCopy && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CopyButton, { value: inputValue, className: TextField_default.icon })
         ]
       }
     )
@@ -33142,7 +33113,7 @@ function TextField2({
 var ConfirmationDialog_default = { "dialog": "ConfirmationDialog_dialog__YjQzN", "value": "ConfirmationDialog_value__Njg3N" };
 
 // src/components/ConfirmationDialog.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function ConfirmationDialog({
   value,
   confirmMessage,
@@ -33154,27 +33125,57 @@ function ConfirmationDialog({
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     AlertDialog,
     {
       ...props,
-      className: (0, import_classnames26.default)(ConfirmationDialog_default.dialog, className),
+      className: (0, import_classnames25.default)(ConfirmationDialog_default.dialog, className),
       isConfirmDisabled: !canSave,
       children: ({ close }) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
           typeof children === "function" ? children({ close }) : children,
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Text, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Text, { children: [
             confirmMessage || "Type the following value to confirm",
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: ConfirmationDialog_default.value, children: value }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TextField2, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: ConfirmationDialog_default.value, children: value }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TextField2, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
         ] });
       }
     }
   );
 }
 
+// src/components/Container.tsx
+var import_classnames26 = __toESM(require_classnames());
+
+// css-modules:E:\dev\umami-react-zen\src\components\Container.module.css
+var Container_default = { "container": "Container_container__ZWU0Y", "centered": "Container_centered__OTM1M", "fluid": "Container_fluid__NTBhY" };
+
+// src/components/Container.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function Container({
+  isCentered = true,
+  isFluid,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    Box,
+    {
+      ...props,
+      className: (0, import_classnames26.default)(
+        Container_default.container,
+        className,
+        isCentered && Container_default.centered,
+        isFluid && Container_default.fluid
+      ),
+      children
+    }
+  );
+}
+
 // src/components/DataTable.tsx
 var import_classnames28 = __toESM(require_classnames());
 var import_react186 = require("react");

package/dist/index.mjs

@@ -32901,53 +32901,23 @@ function Code({ asChild, children }) {
   return /* @__PURE__ */ jsx36(Component, { className: Code_default.code, children });
 }
 
-// src/components/Container.tsx
-var import_classnames23 = __toESM(require_classnames());
-
-// css-modules:E:\dev\umami-react-zen\src\components\Container.module.css
-var Container_default = { "container": "Container_container__ZWU0Y", "centered": "Container_centered__OTM1M", "fluid": "Container_fluid__NTBhY" };
-
-// src/components/Container.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
-function Container({
-  isCentered = true,
-  isFluid,
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx37(
-    Box,
-    {
-      ...props,
-      className: (0, import_classnames23.default)(
-        Container_default.container,
-        className,
-        isCentered && Container_default.centered,
-        isFluid && Container_default.fluid
-      ),
-      children
-    }
-  );
-}
-
 // src/components/ConfirmationDialog.tsx
-var import_classnames26 = __toESM(require_classnames());
+var import_classnames25 = __toESM(require_classnames());
 import { useState as useState10 } from "react";
 
 // src/components/TextField.tsx
 import { useEffect as useEffect9, useState as useState9 } from "react";
-var import_classnames25 = __toESM(require_classnames());
+var import_classnames24 = __toESM(require_classnames());
 
 // src/components/CopyButton.tsx
-var import_classnames24 = __toESM(require_classnames());
+var import_classnames23 = __toESM(require_classnames());
 import { useState as useState8, useRef as useRef7 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\CopyButton.module.css
 var CopyButton_default = { "icon": "CopyButton_icon__YTM2Y", "copy-button": "CopyButton_copy-button__MjY1M" };
 
 // src/components/CopyButton.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var TIMEOUT = 2e3;
 function CopyButton({ value, timeout = TIMEOUT, className, children, ...props }) {
   const [copied, setCopied] = useState8(false);
@@ -32960,14 +32930,14 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
       ref.current = +setTimeout(() => setCopied(false), timeout);
     }
   };
-  return /* @__PURE__ */ jsx38(Icon2, { ...props, className: (0, import_classnames24.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx38(Check, {}) : /* @__PURE__ */ jsx38(Copy, {}) });
+  return /* @__PURE__ */ jsx37(Icon2, { ...props, className: (0, import_classnames23.default)(CopyButton_default.icon, className), onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx37(Check, {}) : /* @__PURE__ */ jsx37(Copy, {}) });
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
 var TextField_default = { "field": "TextField_field__YzU1O", "icon": "TextField_icon__MDJlY", "novalue": "TextField_novalue__NDg4Y", "textarea": "TextField_textarea__NTQ3M", "resize-vertical": "TextField_resize-vertical__ZDc3N", "resize-horizontal": "TextField_resize-horizontal__MzJjY", "resize-none": "TextField_resize-none__ZmUxZ" };
 
 // src/components/TextField.tsx
-import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 function TextField2({
   value,
   defaultValue,
@@ -32993,13 +32963,13 @@ function TextField2({
     setInputValue(value);
   }, [value]);
   return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-    label && /* @__PURE__ */ jsx39(Label2, { children: label }),
+    label && /* @__PURE__ */ jsx38(Label2, { children: label }),
     /* @__PURE__ */ jsxs20(
       $bcdf0525bf22703d$export$2c73285ae9390cec,
       {
         "aria-label": "Text",
         ...props,
-        className: (0, import_classnames25.default)(
+        className: (0, import_classnames24.default)(
           TextField_default.field,
           asTextArea && TextField_default.textarea,
           allowCopy && TextField_default.copy,
@@ -33012,8 +32982,8 @@ function TextField2({
         isDisabled,
         onChange: handleChange,
         children: [
-          /* @__PURE__ */ jsx39(Component, { placeholder }),
-          allowCopy && /* @__PURE__ */ jsx39(CopyButton, { value: inputValue, className: TextField_default.icon })
+          /* @__PURE__ */ jsx38(Component, { placeholder }),
+          allowCopy && /* @__PURE__ */ jsx38(CopyButton, { value: inputValue, className: TextField_default.icon })
         ]
       }
     )
@@ -33024,7 +32994,7 @@ function TextField2({
 var ConfirmationDialog_default = { "dialog": "ConfirmationDialog_dialog__YjQzN", "value": "ConfirmationDialog_value__Njg3N" };
 
 // src/components/ConfirmationDialog.tsx
-import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 function ConfirmationDialog({
   value,
   confirmMessage,
@@ -33036,11 +33006,11 @@ function ConfirmationDialog({
   const handleChange = (e) => {
     setCanSave(e.target.value === value);
   };
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx39(
     AlertDialog,
     {
       ...props,
-      className: (0, import_classnames26.default)(ConfirmationDialog_default.dialog, className),
+      className: (0, import_classnames25.default)(ConfirmationDialog_default.dialog, className),
       isConfirmDisabled: !canSave,
       children: ({ close }) => {
         return /* @__PURE__ */ jsxs21(Fragment7, { children: [
@@ -33049,14 +33019,44 @@ function ConfirmationDialog({
             confirmMessage || "Type the following value to confirm",
             ":"
           ] }),
-          /* @__PURE__ */ jsx40("div", { className: ConfirmationDialog_default.value, children: value }),
-          /* @__PURE__ */ jsx40(TextField2, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
+          /* @__PURE__ */ jsx39("div", { className: ConfirmationDialog_default.value, children: value }),
+          /* @__PURE__ */ jsx39(TextField2, { autoFocus: true, "aria-label": "Confirmation", onChange: handleChange })
         ] });
       }
     }
   );
 }
 
+// src/components/Container.tsx
+var import_classnames26 = __toESM(require_classnames());
+
+// css-modules:E:\dev\umami-react-zen\src\components\Container.module.css
+var Container_default = { "container": "Container_container__ZWU0Y", "centered": "Container_centered__OTM1M", "fluid": "Container_fluid__NTBhY" };
+
+// src/components/Container.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+function Container({
+  isCentered = true,
+  isFluid,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx40(
+    Box,
+    {
+      ...props,
+      className: (0, import_classnames26.default)(
+        Container_default.container,
+        className,
+        isCentered && Container_default.centered,
+        isFluid && Container_default.fluid
+      ),
+      children
+    }
+  );
+}
+
 // src/components/DataTable.tsx
 var import_classnames28 = __toESM(require_classnames());
 import { Children as Children2, createElement as createElement7 } from "react";
@@ -34229,6 +34229,7 @@ export {
   ComboBox2 as ComboBox,
   ConfirmationDialog,
   Container,
+  CopyButton,
   DataColumn,
   DataTable,
   Dialog2 as Dialog,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.179.0",
+  "version": "0.180.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -4087,44 +4087,6 @@ body a.Button_button__NGQyO {
   padding: var(--spacing-1);
 }
 
-/* virtual-css:css:418d794d283baef586ab30b99cf90aa1 */
-.Container_container__ZWU0Y {
-  width: 100%;
-  padding: 0 1rem;
-}
-.Container_container__ZWU0Y.Container_centered__OTM1M {
-  margin: 0 auto;
-}
-.Container_container__ZWU0Y.Container_fluid__NTBhY {
-  max-width: 100%;
-  padding: 0;
-}
-@media (min-width: 520px) {
-  .Container_container__ZWU0Y {
-    max-width: 500px;
-  }
-}
-@media (min-width: 768px) {
-  .Container_container__ZWU0Y {
-    max-width: 740px;
-  }
-}
-@media (min-width: 1024px) {
-  .Container_container__ZWU0Y {
-    max-width: 1000px;
-  }
-}
-@media (min-width: 1280px) {
-  .Container_container__ZWU0Y {
-    max-width: 1240px;
-  }
-}
-@media (min-width: 1640px) {
-  .Container_container__ZWU0Y {
-    max-width: 1600px;
-  }
-}
-
 /* virtual-css:css:814f767aeadf5e17bfb63509d2206999 */
 .CopyButton_icon__YTM2Y {
   animation: CopyButton_copy-button__MjY1M 200ms;
@@ -4229,6 +4191,44 @@ body a.Button_button__NGQyO {
   font-weight: 700;
 }
 
+/* virtual-css:css:418d794d283baef586ab30b99cf90aa1 */
+.Container_container__ZWU0Y {
+  width: 100%;
+  padding: 0 1rem;
+}
+.Container_container__ZWU0Y.Container_centered__OTM1M {
+  margin: 0 auto;
+}
+.Container_container__ZWU0Y.Container_fluid__NTBhY {
+  max-width: 100%;
+  padding: 0;
+}
+@media (min-width: 520px) {
+  .Container_container__ZWU0Y {
+    max-width: 500px;
+  }
+}
+@media (min-width: 768px) {
+  .Container_container__ZWU0Y {
+    max-width: 740px;
+  }
+}
+@media (min-width: 1024px) {
+  .Container_container__ZWU0Y {
+    max-width: 1000px;
+  }
+}
+@media (min-width: 1280px) {
+  .Container_container__ZWU0Y {
+    max-width: 1240px;
+  }
+}
+@media (min-width: 1640px) {
+  .Container_container__ZWU0Y {
+    max-width: 1600px;
+  }
+}
+
 /* virtual-css:css:eedba9fc7e3d8030bbd07387da49f358 */
 .Table_table__YjllN {
   font-size: var(--font-size);