@headless-adminapp/fluent 1.4.25 → 1.4.26

package/components/fluent/MenuPopover.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuPopover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        fontWeight: react_components_1.tokens.fontWeightRegular,
+        borderRadius: tokens_1.extendedTokens.paperBorderRadius,
+    },
+});
+exports.MenuPopover = (0, react_1.forwardRef)(function MenuPopover({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+});

package/components/fluent/Option.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefComponent, OptionProps } from '@fluentui/react-components';
+type ExtendedOptionProps = OptionProps;
+export declare const Option: ForwardRefComponent<ExtendedOptionProps>;
+export {};

package/components/fluent/Option.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Option = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.controlBorderRadius,
+        paddingBlock: tokens_1.extendedTokens.optionPaddingVertical,
+    },
+});
+exports.Option = (0, react_1.forwardRef)(function Option({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Option, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+});

package/components/fluent/PopoverSurface.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefComponent, PopoverSurfaceProps } from '@fluentui/react-components';
+type ExtendedPopoverSurfaceProps = PopoverSurfaceProps;
+export declare const PopoverSurface: ForwardRefComponent<ExtendedPopoverSurfaceProps>;
+export {};

package/components/fluent/PopoverSurface.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverSurface = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.paperBorderRadius,
+    },
+});
+exports.PopoverSurface = (0, react_1.forwardRef)(function PopoverSurface({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.PopoverSurface, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+});

package/components/fluent/SearchBox.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefComponent, SearchBoxProps } from '@fluentui/react-components';
+type ExtendedSearchBoxProps = SearchBoxProps;
+export declare const SearchBox: ForwardRefComponent<ExtendedSearchBoxProps>;
+export {};

package/components/fluent/SearchBox.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.controlBorderRadius,
+        '&::after': {
+            borderBottomLeftRadius: tokens_1.extendedTokens.controlBorderRadius,
+            borderBottomRightRadius: tokens_1.extendedTokens.controlBorderRadius,
+            left: tokens_1.extendedTokens.controlBottomBorderMargin,
+            right: tokens_1.extendedTokens.controlBottomBorderMargin,
+        },
+    },
+    readonly: {
+        '&::after': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStrokeDisabled,
+        },
+        '&:focus-within:active::after': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStrokeDisabled,
+        },
+    },
+    outlined: {
+        borderBottomColor: react_components_1.tokens.colorNeutralStroke1,
+        '&:hover': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStroke1Hover,
+        },
+        '&:active': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStroke1Pressed,
+        },
+        '&:focus-within': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStroke1Pressed,
+        },
+    },
+});
+exports.SearchBox = (0, react_1.forwardRef)(function SearchBox({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root, rest.readOnly && styles.readonly, rest.appearance === 'outline' && styles.outlined), ref: ref }));
+});

package/components/fluent/SpinButton.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefComponent, SpinButtonProps } from '@fluentui/react-components';
+type ExtendedSpinButtonProps = SpinButtonProps;
+export declare const SpinButton: ForwardRefComponent<ExtendedSpinButtonProps>;
+export {};

package/components/fluent/SpinButton.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.controlBorderRadius,
+        minHeight: tokens_1.extendedTokens.controlMinHeightM,
+    },
+});
+exports.SpinButton = (0, react_1.forwardRef)(function SpinButton({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+});

package/components/fluent/Tag.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefComponent, TagProps } from '@fluentui/react-components';
+type ExtendedTagProps = TagProps;
+export declare const Tag: ForwardRefComponent<ExtendedTagProps>;
+export {};

package/components/fluent/Tag.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.controlBorderRadius,
+    },
+});
+exports.Tag = (0, react_1.forwardRef)(function Tag({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+});

package/components/fluent/Textarea.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefComponent, TextareaProps } from '@fluentui/react-components';
+type ExtendedTextareaProps = TextareaProps;
+export declare const Textarea: ForwardRefComponent<ExtendedTextareaProps>;
+export {};

package/components/fluent/Textarea.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.controlBorderRadius,
+        '&::after': {
+            borderBottomLeftRadius: tokens_1.extendedTokens.controlBorderRadius,
+            borderBottomRightRadius: tokens_1.extendedTokens.controlBorderRadius,
+            left: tokens_1.extendedTokens.controlBottomBorderMargin,
+            right: tokens_1.extendedTokens.controlBottomBorderMargin,
+        },
+    },
+    readonly: {
+        '&::after': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStrokeDisabled,
+        },
+        '&:focus-within:active::after': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStrokeDisabled,
+        },
+    },
+});
+exports.Textarea = (0, react_1.forwardRef)(function Textarea({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Textarea, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root, rest.readOnly && styles.readonly), ref: ref }));
+});

package/components/fluent/ToolbarButton.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps, ForwardRefComponent, ToolbarButtonProps } from '@fluentui/react-components';
+type ExtendedToolbarButtonProps = ToolbarButtonProps & {
+    iconPosition?: ButtonProps['iconPosition'];
+};
+export declare const ToolbarButton: ForwardRefComponent<ExtendedToolbarButtonProps>;
+export {};

package/components/fluent/ToolbarButton.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        fontWeight: react_components_1.tokens.fontWeightRegular,
+        borderRadius: tokens_1.extendedTokens.buttonBorderRadius,
+        minHeight: tokens_1.extendedTokens.buttonMinHeightM,
+        '&[data-icon-only="true"]': {
+            minWidth: tokens_1.extendedTokens.buttonMinHeightM,
+            maxWidth: tokens_1.extendedTokens.buttonMinHeightM,
+        },
+    },
+});
+exports.ToolbarButton = (0, react_1.forwardRef)(function ToolbarButton({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), "data-icon-only": !rest.children && !!rest.icon ? 'true' : undefined, ref: ref }));
+});

package/components/fluent/index.d.ts

@@ -0,0 +1,17 @@
+export { Button } from './Button';
+export { Input } from './Input';
+export { Textarea } from './Textarea';
+export { Combobox } from './Combobox';
+export { Tag } from './Tag';
+export { Dropdown } from './Dropdown';
+export { SpinButton } from './SpinButton';
+export { ToolbarButton } from './ToolbarButton';
+export { MenuPopover } from './MenuPopover';
+export { SearchBox } from './SearchBox';
+export { FluentProvider } from './FluentProvider';
+export { extendedTokens, tokens } from './tokens';
+export { Option } from './Option';
+export { Checkbox } from './Checkbox';
+export { MenuItem } from './MenuItem';
+export { PopoverSurface } from './PopoverSurface';
+export { DialogSurface } from './DialogSurface';

package/components/fluent/index.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogSurface = exports.PopoverSurface = exports.MenuItem = exports.Checkbox = exports.Option = exports.tokens = exports.extendedTokens = exports.FluentProvider = exports.SearchBox = exports.MenuPopover = exports.ToolbarButton = exports.SpinButton = exports.Dropdown = exports.Tag = exports.Combobox = exports.Textarea = exports.Input = exports.Button = void 0;
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+var Input_1 = require("./Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+var Textarea_1 = require("./Textarea");
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return Textarea_1.Textarea; } });
+var Combobox_1 = require("./Combobox");
+Object.defineProperty(exports, "Combobox", { enumerable: true, get: function () { return Combobox_1.Combobox; } });
+var Tag_1 = require("./Tag");
+Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
+var Dropdown_1 = require("./Dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
+var SpinButton_1 = require("./SpinButton");
+Object.defineProperty(exports, "SpinButton", { enumerable: true, get: function () { return SpinButton_1.SpinButton; } });
+var ToolbarButton_1 = require("./ToolbarButton");
+Object.defineProperty(exports, "ToolbarButton", { enumerable: true, get: function () { return ToolbarButton_1.ToolbarButton; } });
+var MenuPopover_1 = require("./MenuPopover");
+Object.defineProperty(exports, "MenuPopover", { enumerable: true, get: function () { return MenuPopover_1.MenuPopover; } });
+var SearchBox_1 = require("./SearchBox");
+Object.defineProperty(exports, "SearchBox", { enumerable: true, get: function () { return SearchBox_1.SearchBox; } });
+var FluentProvider_1 = require("./FluentProvider");
+Object.defineProperty(exports, "FluentProvider", { enumerable: true, get: function () { return FluentProvider_1.FluentProvider; } });
+var tokens_1 = require("./tokens");
+Object.defineProperty(exports, "extendedTokens", { enumerable: true, get: function () { return tokens_1.extendedTokens; } });
+Object.defineProperty(exports, "tokens", { enumerable: true, get: function () { return tokens_1.tokens; } });
+var Option_1 = require("./Option");
+Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return Option_1.Option; } });
+var Checkbox_1 = require("./Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+var MenuItem_1 = require("./MenuItem");
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return MenuItem_1.MenuItem; } });
+var PopoverSurface_1 = require("./PopoverSurface");
+Object.defineProperty(exports, "PopoverSurface", { enumerable: true, get: function () { return PopoverSurface_1.PopoverSurface; } });
+var DialogSurface_1 = require("./DialogSurface");
+Object.defineProperty(exports, "DialogSurface", { enumerable: true, get: function () { return DialogSurface_1.DialogSurface; } });

package/components/fluent/tokens.d.ts

@@ -0,0 +1,29 @@
+export type ExtendedTokens = {
+    buttonBorderRadius: string;
+    buttonVerticalPaddingS?: string;
+    buttonVerticalPaddingM?: string;
+    buttonVerticalPaddingL?: string;
+    buttonHorizontalPaddingS?: string;
+    buttonHorizontalPaddingM?: string;
+    buttonHorizontalPaddingL?: string;
+    buttonMinWidthS?: string;
+    buttonMinWidthM?: string;
+    buttonMinWidthL?: string;
+    checkboxBorderRadius: string;
+    controlBorderRadius: string;
+    paperBorderRadius: string;
+    controlBottomBorderMargin: string;
+    dialogBorderRadius: string;
+    buttonMinHeightS: string;
+    buttonMinHeightM: string;
+    buttonMinHeightL: string;
+    controlMinHeightS: string;
+    controlMinHeightM: string;
+    controlMinHeightL: string;
+    menuItemPaddingVertical: string;
+    optionPaddingVertical: string;
+    appBarHeight: string;
+    navItempaddingVertical: string;
+};
+export { tokens } from '@fluentui/react-components';
+export declare const extendedTokens: ExtendedTokens;

package/components/fluent/tokens.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extendedTokens = exports.tokens = void 0;
+var react_components_1 = require("@fluentui/react-components");
+Object.defineProperty(exports, "tokens", { enumerable: true, get: function () { return react_components_1.tokens; } });
+exports.extendedTokens = {
+    buttonBorderRadius: 'var(--buttonBorderRadius)',
+    checkboxBorderRadius: 'var(--checkboxBorderRadius)',
+    controlBorderRadius: 'var(--controlBorderRadius)',
+    paperBorderRadius: 'var(--paperBorderRadius)',
+    controlBottomBorderMargin: 'var(--controlBottomBorderMargin)',
+    dialogBorderRadius: 'var(--dialogBorderRadius)',
+    buttonVerticalPaddingS: 'var(--buttonVerticalPaddingS)',
+    buttonVerticalPaddingM: 'var(--buttonVerticalPaddingM)',
+    buttonVerticalPaddingL: 'var(--buttonVerticalPaddingL)',
+    buttonHorizontalPaddingS: 'var(--buttonHorizontalPaddingS)',
+    buttonHorizontalPaddingM: 'var(--buttonHorizontalPaddingM)',
+    buttonHorizontalPaddingL: 'var(--buttonHorizontalPaddingL)',
+    buttonMinWidthS: 'var(--buttonMinWidthS)',
+    buttonMinWidthM: 'var(--buttonMinWidthM)',
+    buttonMinWidthL: 'var(--buttonMinWidthL)',
+    buttonMinHeightS: 'var(--buttonMinHeightS)',
+    buttonMinHeightM: 'var(--buttonMinHeightM)',
+    buttonMinHeightL: 'var(--buttonMinHeightL)',
+    controlMinHeightS: 'var(--controlMinHeightS)',
+    controlMinHeightM: 'var(--controlMinHeightM)',
+    controlMinHeightL: 'var(--controlMinHeightL)',
+    menuItemPaddingVertical: 'var(--menuItemPaddingVertical)',
+    optionPaddingVertical: 'var(--optionPaddingVertical)',
+    appBarHeight: 'var(--appBarHeight)',
+    navItempaddingVertical: 'var(--navItempaddingVertical)',
+};

package/form/controls/AttachmentControl.js

@@ -9,6 +9,7 @@ const utils_1 = require("@headless-adminapp/core/utils");
 const icons_1 = require("@headless-adminapp/icons");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 function useAttachmentSelector({ fileService, fileServiceContext, location, onChange, }) {
     const openErrorDialog = (0, hooks_1.useOpenErrorDialog)();
@@ -71,7 +72,7 @@ const AttachmentImageControl = ({ value, disabled, readOnly, onChange, fileServi
                     width: 100,
                     height: 100,
                     backgroundColor: react_components_1.tokens.colorNeutralBackground2,
-                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    borderRadius: fluent_1.extendedTokens.controlBorderRadius,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -88,7 +89,7 @@ const AttachmentImageControl = ({ value, disabled, readOnly, onChange, fileServi
                         maxHeight: '100%',
                         maxWidth: '100%',
                         objectFit: 'contain',
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        borderRadius: fluent_1.extendedTokens.controlBorderRadius,
                     } }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: 0, right: 0 }, children: (0, jsx_runtime_1.jsx)(ActionMenu, { format: 'image', value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile('image/*') }) }), isProcessing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                 position: 'absolute',
                                 inset: 0,
@@ -148,7 +149,7 @@ const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChan
                 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         width: '100%',
                         height: 30,
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        borderRadius: fluent_1.extendedTokens.controlBorderRadius,
                         backgroundColor: react_components_1.tokens.colorNeutralBackground3,
                         display: 'flex',
                         paddingLeft: react_components_1.tokens.spacingHorizontalS,
@@ -170,7 +171,7 @@ const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChan
             }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                     width: '100%',
                     height: 30,
-                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    borderRadius: fluent_1.extendedTokens.controlBorderRadius,
                     backgroundColor: react_components_1.tokens.colorNeutralBackground3,
                     display: 'flex',
                     paddingLeft: react_components_1.tokens.spacingHorizontalS,
@@ -206,13 +207,13 @@ const ActionMenu = ({ format, value, disabled, readOnly, onChange, onChangeClick
                 return 'Open';
         }
     }, [format]);
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "before-top", hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(FileOpenIcon, {}), onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "before-top", hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}) }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(FileOpenIcon, {}), onClick: () => {
                                 window.open(value.url, '_blank');
-                            }, children: OpenText }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Copy, {}), onClick: () => {
+                            }, children: OpenText }), (0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Copy, {}), onClick: () => {
                                 navigator.clipboard.writeText(value.url).catch(() => { });
-                            }, children: "Copy Url" }), !(disabled || readOnly) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, {}), onClick: () => {
+                            }, children: "Copy Url" }), !(disabled || readOnly) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, {}), onClick: () => {
                                         onChangeClick?.();
-                                    }, children: "Change" }), (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: async () => {
+                                    }, children: "Change" }), (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: async () => {
                                         const result = await openConfirmDialog({
                                             title: 'Remove file',
                                             text: 'Are you sure you want to remove this file?',

package/form/controls/AttachmentsControl.js

@@ -6,13 +6,17 @@ const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/core/utils");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly, value, skeleton, }) => {
     const inputRef = (0, react_1.useRef)(null);
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TagPicker, { appearance: "filled-darker", disabled: disabled, open: false, children: [(0, jsx_runtime_1.jsx)(react_components_1.TagPickerControl, { onFocus: onFocus, onBlur: onBlur, id: id, style: { paddingBlock: react_components_1.tokens.spacingVerticalXXS }, expandIcon: null, children: (0, jsx_runtime_1.jsxs)(react_components_1.TagGroup, { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TagPicker, { appearance: "filled-darker", disabled: disabled, open: false, children: [(0, jsx_runtime_1.jsx)(react_components_1.TagPickerControl, { onFocus: onFocus, onBlur: onBlur, id: id, style: {
+                            paddingBlock: react_components_1.tokens.spacingVerticalXXS,
+                            borderRadius: fluent_1.extendedTokens.controlBorderRadius,
+                        }, expandIcon: null, children: (0, jsx_runtime_1.jsxs)(react_components_1.TagGroup, { style: {
                                 flexWrap: 'wrap',
                                 columnGap: react_components_1.tokens.spacingHorizontalXS,
                                 gap: react_components_1.tokens.spacingHorizontalXS,
@@ -24,7 +28,7 @@ const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly,
                                             event.preventDefault();
                                             event.stopPropagation();
                                             window.open(file.url, '_blank');
-                                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: file.name }) }) }, index))), !readOnly && !disabled && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "outline", onClick: () => {
+                                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: file.name }) }) }, index))), !readOnly && !disabled && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "outline", onClick: () => {
                                         if (readOnly)
                                             return;
                                         inputRef.current?.click();

package/form/controls/CurrencyControl.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurrencyControl = CurrencyControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 function CurrencyControl({ value, onChange, id, name, onBlur, onFocus, 
 // error,
@@ -50,7 +50,7 @@ readOnly, skeleton, }) {
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), appearance: "filled-darker", onFocus: () => onFocus?.(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), readOnly: isReadOnly, className: (0, react_components_1.mergeClasses)(isReadOnly && 'TextControl_readonly'), style: {
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), appearance: "filled-darker", onFocus: () => onFocus?.(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), readOnly: isReadOnly, style: {
             width: '100%',
         }, input: {
             style: {

package/form/controls/DateControl.js

@@ -14,6 +14,7 @@ const dayjs_1 = __importDefault(require("dayjs"));
 const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
 const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const AppStringContext_1 = require("../../App/AppStringContext");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 dayjs_1.default.extend(utc_1.default);
 dayjs_1.default.extend(timezone_1.default);
@@ -27,10 +28,16 @@ function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
             onChange?.(date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD') : null);
         }, strings: datePickerStrings, style: {
             width: '100%',
+            borderRadius: fluent_1.extendedTokens.controlBorderRadius,
+            minHeight: fluent_1.extendedTokens.controlMinHeightM,
         }, input: {
             style: {
                 width: '100%',
             },
+        }, popupSurface: {
+            style: {
+                borderRadius: fluent_1.extendedTokens.paperBorderRadius,
+            },
         }, contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',
                 alignItems: 'center',

package/form/controls/DateRangeControl/DateRangeControl.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
 const react_1 = require("react");
+const fluent_1 = require("../../../components/fluent");
 const SkeletonControl_1 = require("../SkeletonControl");
 const PopoverContent_1 = require("./PopoverContent");
 const utils_1 = require("./utils");
@@ -31,9 +32,9 @@ function DateRangeControl({ value, onChange, onBlur, onFocus, disabled, maxDate,
             }
             onFocus?.();
             setOpen(data.open);
-        }, positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { appearance: "filled-darker", readOnly: true, className: styles.input, value: formattedValue, onChange: () => { }, style: {
+        }, positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(fluent_1.Input, { appearance: "filled-darker", readOnly: true, className: styles.input, value: formattedValue, onChange: () => { }, style: {
                         width: '100%',
-                    } }) }), (0, jsx_runtime_1.jsx)(react_components_1.PopoverSurface, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(PopoverContent_1.PopoverContent, { value: value, minDate: minDate, maxDate: maxDate, onChange: (value) => {
+                    } }) }), (0, jsx_runtime_1.jsx)(fluent_1.PopoverSurface, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(PopoverContent_1.PopoverContent, { value: value, minDate: minDate, maxDate: maxDate, onChange: (value) => {
                         setOpen(false);
                         onChange?.(value);
                         onBlur?.();

package/form/controls/DateRangeControl/PopoverContent.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = require("react");
+const fluent_1 = require("../../../components/fluent");
 const CalendarItem_1 = require("./CalendarItem");
 const utils_1 = require("./utils");
 const PopoverContent = ({ value, minDate, maxDate, onChange, required, showApplyButton, }) => {
@@ -46,13 +47,13 @@ const PopoverContent = ({ value, minDate, maxDate, onChange, required, showApply
     };
     const actions = [];
     if (!required) {
-        actions.push((0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", appearance: "secondary", onClick: () => {
+        actions.push((0, jsx_runtime_1.jsx)(fluent_1.Button, { size: "small", appearance: "secondary", onClick: () => {
                 onChange?.(null);
                 setInternalValue([null, null]);
             }, children: "Clear" }, "clear"));
     }
     if (showApplyButton) {
-        actions.push((0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", appearance: "primary", disabled: !internalValue[0] || !internalValue[1], onClick: () => {
+        actions.push((0, jsx_runtime_1.jsx)(fluent_1.Button, { size: "small", appearance: "primary", disabled: !internalValue[0] || !internalValue[1], onClick: () => {
                 if (!internalValue[0] || !internalValue[1]) {
                     return;
                 }

package/form/controls/DateTimeControl.js

@@ -15,6 +15,7 @@ const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFor
 const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
 const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 const utils_1 = require("./TimeControl/utils");
 dayjs_1.default.extend(customParseFormat_1.default);
@@ -79,12 +80,22 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                         justifyContent: 'center',
                         marginRight: -4,
                         color: react_components_1.tokens.colorNeutralForeground2,
-                    }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, { size: 20 }) }), style: { flex: 1 }, input: {
+                    }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, { size: 20 }) }), style: {
+                    flex: 1,
+                    borderRadius: fluent_1.extendedTokens.controlBorderRadius,
+                    minHeight: fluent_1.extendedTokens.controlMinHeightM,
+                }, input: {
                     style: { minWidth: 0, width: '100%' },
+                }, popupSurface: {
+                    style: {
+                        borderRadius: fluent_1.extendedTokens.paperBorderRadius,
+                    },
                 } }), (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: {
                     flex: 1,
                     minWidth: 0,
                     pointerEvents: isReadonly ? 'none' : 'auto',
+                    borderRadius: fluent_1.extendedTokens.controlBorderRadius,
+                    minHeight: fluent_1.extendedTokens.controlMinHeightM,
                 }, input: {
                     style: { minWidth: 0 },
                 }, readOnly: isReadonly || !value, 
@@ -132,5 +143,9 @@ function DateTimeControl({ value, onChange, id, name, onBlur, onFocus, placehold
                         justifyContent: 'center',
                         marginRight: -4,
                         color: react_components_1.tokens.colorNeutralForeground2,
-                    }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }) })] }));
+                    }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }), listbox: {
+                    style: {
+                        borderRadius: fluent_1.extendedTokens.paperBorderRadius,
+                    },
+                } })] }));
 }

package/form/controls/DecimalControl.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DecimalControl = DecimalControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable unused-imports/no-unused-vars */
-const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
 const SkeletonControl_1 = require("./SkeletonControl");
 function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, disabled, placeholder, borderOnFocusOnly, readOnly, decimalPlaces, skeleton, }) {
     const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
@@ -50,7 +50,7 @@ function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, dis
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), readOnly: readOnly || disabled, style: {
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Input, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), readOnly: readOnly || disabled, style: {
             width: '100%',
         }, input: {
             style: {