@umami/react-zen 0.60.0 → 0.61.0

package/dist/index.css

@@ -1,16 +1,3 @@
-/* virtual-css:css:c1c264103e87c7a7d9c345a7e75f073b */
-.Form_form__ZjMwZ {
-  position: relative;
-  font-size: var(--font-size);
-}
-.Form_text__NDc1Y {
-  text-align: center;
-  margin: auto;
-}
-.Form_icon__ZGE1Z {
-  align-self: flex-start;
-}
-
 /* virtual-css:css:fd9059b0b8139e56f974f8291736b4c8 */
 .Icon_icon__YWI0Z {
   display: inline-block;
@@ -37,7 +24,7 @@
 }
 
 /* virtual-css:css:1f23037feb6ff5b206a7d955b2a6ff41 */
-.AlertBanner_banner__NTQ1Y {
+.AlertBanner_banner__NDQ0Z {
   display: flex;
   align-items: center;
   padding: var(--padding);
@@ -50,44 +37,35 @@
   color: var(--font-color);
   gap: var(--spacing-3);
 }
-.AlertBanner_message__NDNiZ {
+.AlertBanner_message__MzQ3Y {
   display: flex;
   flex-direction: column;
   flex: 1;
 }
-.AlertBanner_title__ZWUwM {
+.AlertBanner_title__MDI0M {
   font-weight: 700;
 }
-.AlertBanner_close__MzEwM {
+.AlertBanner_close__YzE5M {
   color: var(--font-color-muted);
 }
-.AlertBanner_close__MzEwM:hover {
+.AlertBanner_close__YzE5M:hover {
   color: var(--font-color);
   cursor: pointer;
 }
-.AlertBanner_error__YWZmN {
-  color: var(--danger-font-color);
-  background-color: var(--danger-color);
-  border: 0;
-}
-.AlertBanner_error__YWZmN .AlertBanner_close__MzEwM {
-  color: var(--danger-font-color);
-}
-.AlertBanner_info__ZmE3M {
-  color: var(--primary-font-color);
-  background-color: var(--primary-color);
-  border: 0;
+.AlertBanner_error__NDVmM {
+  color: var(--danger-color);
+  border: 1px solid var(--danger-color);
 }
-.AlertBanner_info__ZmE3M .AlertBanner_close__MzEwM {
-  color: var(--primary-font-color);
+.AlertBanner_error__NDVmM .AlertBanner_close__YzE5M {
+  color: var(--danger-color);
 }
-.AlertBanner_start__MTRkZ {
+.AlertBanner_start__YTlmZ {
   text-align: start;
 }
-.AlertBanner_end__MWIwO {
+.AlertBanner_end__ZmJlM {
   text-align: end;
 }
-.AlertBanner_center__OTkwZ {
+.AlertBanner_center__Y2ZmN {
   text-align: center;
 }
 
@@ -2211,18 +2189,31 @@
   }
 }
 
+/* virtual-css:css:c1c264103e87c7a7d9c345a7e75f073b */
+.Form_form__ZjMwZ {
+  position: relative;
+  font-size: var(--font-size);
+}
+.Form_text__NDc1Y {
+  text-align: center;
+  margin: auto;
+}
+.Form_icon__ZGE1Z {
+  align-self: flex-start;
+}
+
 /* virtual-css:css:b910a97cb1b22b0482f1309d736856b2 */
-.FormField_field__NzY5Y {
+.FormField_field__YTM1N {
   display: flex;
   flex-direction: column;
 }
-.FormField_description__OGY3Y {
+.FormField_description__ZjFiM {
   line-height: 1.8rem;
   font-size: var(--font-size);
 }
-.FormField_error__NmEzO {
+.FormField_error__NWZhM {
   color: var(--danger-color);
-  line-height: 1.8rem;
+  line-height: 2rem;
   font-weight: 600;
 }
 
@@ -2735,12 +2726,12 @@ body a.Button_button__ZjBiN {
 }
 
 /* virtual-css:css:a3f0bcbc602e66499a3823844c11db39 */
-.Code_code__OGIyN {
+.Code_code__YTUzN {
   font-family: var(--font-family-code);
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-medium);
   color: var(--font-color);
-  background: var(--highlight-color);
+  background: var(--layer-color-1);
   border-radius: var(--border-radius);
   padding: var(--spacing-1);
 }
@@ -2928,18 +2919,19 @@ body a.Button_button__ZjBiN {
 }
 
 /* virtual-css:css:ac55918cdbb6b3a9ac9deedf05ce3806 */
-.input_field__ZTk4Z {
+.input_field__Zjk2M {
+  position: relative;
   min-width: 240px;
 }
-.input_field__ZTk4Z,
-.input_row__ZGY2N {
+.input_field__Zjk2M,
+.input_row__NTFhN {
   position: relative;
 }
-.input_field__ZTk4Z[data-readonly] .input_input__ODNmN,
-.input_field__ZTk4Z[data-disabled] .input_input__ODNmN {
+.input_field__Zjk2M[data-readonly] .input_input__NTExY,
+.input_field__Zjk2M[data-disabled] .input_input__NTExY {
   background: var(--input-disabled-color);
 }
-.input_input__ODNmN {
+.input_input__NTExY {
   font-size: var(--font-size);
   color: var(--font-color);
   border: var(--border);
@@ -2950,37 +2942,38 @@ body a.Button_button__ZjBiN {
   line-height: 1.5rem;
   width: 100%;
 }
-.input_input__ODNmN:focus {
+.input_input__NTExY:focus {
   border-color: transparent;
   outline: var(--outline);
 }
-.input_input__ODNmN::placeholder {
+.input_input__NTExY::placeholder {
   color: var(--font-color-muted);
 }
-.input_input__ODNmN:disabled {
+.input_input__NTExY:disabled {
   color: var(--font-color-muted);
 }
-.input_input__ODNmN::-webkit-search-cancel-button,
-.input_input__ODNmN::-webkit-search-decoration {
+.input_input__NTExY::-webkit-search-cancel-button,
+.input_input__NTExY::-webkit-search-decoration {
   -webkit-appearance: none;
 }
-.input_icon__MTEwY {
+.input_icon__ZGI5Y {
   color: var(--font-color-muted);
   background: var(--background-color);
 }
-.input_icon__MTEwY:hover {
+.input_icon__ZGI5Y:hover {
   color: var(--font-color);
   cursor: pointer;
 }
 
 /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
-.TextField_allowCopy__Yjc3Y {
+.TextField_allowCopy__NmUxY {
   padding-right: 32px;
 }
-.TextField_icon__OWIxY {
+.TextField_icon__OTcxO {
   position: absolute;
-  top: var(--padding-y);
-  right: var(--padding-x);
+  top: var(--spacing-4);
+  right: var(--spacing-3);
+  background: none;
 }
 
 /* virtual-css:css:603e8ab63f869366a7b9c81da6a1d757 */
@@ -3047,14 +3040,17 @@ body a.Button_button__ZjBiN {
 }
 
 /* virtual-css:css:e32e6d85b42dfdfd441346c5ed822361 */
-.DataTable_datatable__MWRkN {
+.DataTable_datatable__ZmQ3Z {
   position: relative;
   font-size: var(--font-size);
   color: var(--font-color);
 }
-.DataTable_cell__MmMyM {
+.DataTable_cell__NzZlM {
   align-items: center;
 }
+.DataTable_hidden__M2MxN {
+  display: none;
+}
 
 /* virtual-css:css:e66162403f9946d7217dc462fee28120 */
 .Dots_dots__NzQ0Z {
@@ -3175,7 +3171,7 @@ body a.Button_button__ZjBiN {
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__YWZhN {
+.Menu_menu__YmUyN {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -3184,19 +3180,19 @@ body a.Button_button__ZjBiN {
   background: var(--background-color);
   overflow: hidden;
 }
-.Menu_separator__MzA3M {
+.Menu_separator__NDFlO {
   border-bottom: var(--border);
-  margin: var(--spacing-1) calc(-1* var(--spacing-3));
+  margin: var(--spacing-2) calc(-1 * var(--spacing-3));
 }
-.Menu_section__OGY0Z:not(:last-child) {
+.Menu_section__YjJjY:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__NjgyY {
+.Menu_header__NDVjN {
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__NWNhZ {
+.Menu_item__YjBiN {
   display: flex;
   align-items: center;
   gap: var(--gap);
@@ -3209,23 +3205,23 @@ body a.Button_button__ZjBiN {
   outline: none;
   width: 100%;
 }
-.Menu_item__NWNhZ[data-focus],
-.Menu_item__NWNhZ[data-focus-visible] {
+.Menu_item__YjBiN[data-focus],
+.Menu_item__YjBiN[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__NWNhZ:hover {
+.Menu_item__YjBiN:hover {
   background: var(--highlight-color);
 }
-.Menu_item__NWNhZ[data-selected] {
+.Menu_item__YjBiN[data-selected] {
   font-weight: bold;
 }
-.Menu_item__NWNhZ[data-selected] .Menu_check__M2IyM {
+.Menu_item__YjBiN[data-selected] .Menu_check__YmVhZ {
   display: flex;
   justify-content: flex-end;
   flex: 1;
 }
-.Menu_check__M2IyM {
+.Menu_check__YmVhZ {
   display: none;
 }
 
@@ -3507,24 +3503,29 @@ body a.Button_button__ZjBiN {
 }
 
 /* virtual-css:css:3ce2e85ef9035a94276951bdf0511402 */
-.SearchField_search__N2VmN {
+.SearchField_search__MzkwY {
   position: absolute;
-  top: 12px;
-  left: 9px;
+  top: 0;
+  left: var(--spacing-3);
+  bottom: 0;
+  height: 100%;
+  background: none;
 }
-.SearchField_input__MTQ2Y {
-  padding-left: 28px;
-  padding-right: 24px;
+.SearchField_input__OGFiY {
+  padding-left: var(--spacing-7);
+  padding-right: var(--spacing-7);
 }
-.SearchField_close__MmUwM {
+.SearchField_close__NmJkM {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: absolute;
-  top: 9px;
-  right: 0;
-  border: none;
+  top: 0;
+  right: var(--spacing-3);
+  bottom: 0;
+  height: 100%;
+  border: 0;
   background: none;
-  border-radius: var(--border-radius-full);
-  padding: 0;
-  margin: 0 var(--spacing-2);
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */

package/dist/index.d.ts

@@ -97,7 +97,10 @@ declare module '@umami/react-zen/forms/Form' {
 
 declare module '@umami/react-zen/forms/FormButtons' {
     import { RowProps } from '@umami/react-zen/Row';
-    export function FormButtons({ children, ...props }: RowProps): import("react").JSX.Element;
+    export interface FormButtonsProps extends RowProps {
+        fill?: boolean;
+    }
+    export function FormButtons({ fill, children, ...props }: FormButtonsProps): import("react").JSX.Element;
 }
 
 declare module '@umami/react-zen/forms/FormField' {
@@ -130,7 +133,7 @@ declare module '@umami/react-zen/forms/FormResetButton' {
 
 declare module '@umami/react-zen/forms/FormSubmitButton' {
     import { LoadingButtonProps } from '@umami/react-zen/LoadingButton';
-    function FormSubmitButton({ variant, children, disabled, isLoading, ...props }: LoadingButtonProps): import("react").JSX.Element;
+    function FormSubmitButton({ variant, isDisabled, isLoading, children, ...props }: LoadingButtonProps): import("react").JSX.Element;
     export { FormSubmitButton };
 }
 
@@ -166,7 +169,7 @@ declare module '@umami/react-zen/toast/ToastProvider' {
         children: ReactNode;
     }
     export const ToastContext: import("react").Context<{}>;
-    export function ToastProvider({ children, ...config }: ToastProviderProps): import("react").JSX.Element;
+    export function ToastProvider({ children, ...props }: ToastProviderProps): import("react").JSX.Element;
 }
 
 declare module '@umami/react-zen/hooks/useDebounce' {
@@ -224,7 +227,7 @@ declare module '@umami/react-zen/AlertBanner' {
         title?: ReactNode;
         description?: ReactNode;
         icon?: ReactNode;
-        variant?: 'error' | 'info';
+        variant?: 'error';
         align?: 'start' | 'center' | 'end';
         allowClose?: boolean;
         onClose?: () => void;
@@ -436,6 +439,9 @@ declare module '@umami/react-zen/DataTable' {
     interface DataColumnProps extends ColumnProps {
         id: string;
         label?: ReactNode;
+        align?: 'start' | 'center' | 'end';
+        as?: string;
+        hidden?: boolean;
     }
     function DataColumn(props: DataColumnProps): null;
     export { DataTable, DataColumn };
@@ -752,7 +758,7 @@ declare module '@umami/react-zen/SearchField' {
 declare module '@umami/react-zen/Select' {
     import { SelectProps as AriaSelectProps } from 'react-aria-components';
     interface SelectProps extends AriaSelectProps<HTMLSelectElement> {
-        items: any[];
+        items?: any[];
         value?: string;
         label?: string;
         onChange?: (e: any) => void;
@@ -838,18 +844,19 @@ declare module '@umami/react-zen/Switch' {
 declare module '@umami/react-zen/Table' {
     import { CellProps, ColumnProps, RowProps, TableProps, TableBodyProps, TableHeaderProps } from 'react-aria-components';
     interface TableColumnProps extends ColumnProps {
-        alignment?: 'start' | 'center' | 'end';
+        align?: 'start' | 'center' | 'end';
     }
     interface TableCellProps extends CellProps {
-        alignment?: 'start' | 'center' | 'end';
+        align?: 'start' | 'center' | 'end';
     }
     function Table({ children, className, ...props }: TableProps): import("react").JSX.Element;
     function TableHeader({ children, className, ...props }: TableHeaderProps<any>): import("react").JSX.Element;
     function TableBody({ children, className, ...props }: TableBodyProps<any>): import("react").JSX.Element;
     function TableRow({ children, className, ...props }: RowProps<any>): import("react").JSX.Element;
-    function TableColumn({ children, className, alignment, ...props }: TableColumnProps): import("react").JSX.Element;
-    function TableCell({ children, className, alignment, ...props }: TableCellProps): import("react").JSX.Element;
+    function TableColumn({ children, className, align, ...props }: TableColumnProps): import("react").JSX.Element;
+    function TableCell({ children, className, align, ...props }: TableCellProps): import("react").JSX.Element;
     export { Table, TableHeader, TableBody, TableRow, TableColumn, TableCell };
+    export type { TableCellProps, TableColumnProps, TableBodyProps };
 }
 
 declare module '@umami/react-zen/Tabs' {