@headless-adminapp/fluent 1.4.24 → 1.4.26

package/PageBoard/BoardColumnCard.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
 const DndProvider_1 = require("../components/DndProvider");
+const fluent_1 = require("../components/fluent");
 function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema, }) {
     const ref = (0, react_1.useRef)(null);
     const { useDrag } = (0, DndProvider_1.useDndContext)();
@@ -22,7 +23,7 @@ function BoardColumnCard({ record, canDrag, columnId, PreviewComponent, schema,
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
             display: 'flex',
             background: react_components_1.tokens.colorNeutralBackground1,
-            borderRadius: react_components_1.tokens.borderRadiusLarge,
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
             boxShadow: react_components_1.tokens.shadow4,
             opacity: isDragging ? 0.5 : 1,
         }, children: (0, jsx_runtime_1.jsx)(PreviewComponent, { record: record }) }));

package/PageBoard/BoardColumnUI.js

@@ -11,6 +11,7 @@ const context_2 = require("@headless-adminapp/app/mutable/context");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const DndProvider_1 = require("../components/DndProvider");
+const fluent_1 = require("../components/fluent");
 const BoardColumnCard_1 = require("./BoardColumnCard");
 const BoardingColumnCardLoading_1 = require("./BoardingColumnCardLoading");
 const BoardColumnUI = () => {
@@ -53,7 +54,7 @@ const BoardColumnUI = () => {
             display: 'flex',
             flexDirection: 'column',
             flex: 1,
-            borderRadius: react_components_1.tokens.borderRadiusXLarge,
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
             outline: over
                 ? `2px dashed ${react_components_1.tokens.colorBrandBackground}`
                 : canDrop
@@ -76,7 +77,7 @@ const BoardColumnUI = () => {
                         gap: react_components_1.tokens.spacingVerticalM,
                         color: react_components_1.tokens.colorNeutralForeground3,
                         padding: react_components_1.tokens.spacingVerticalXXXL,
-                        borderRadius: react_components_1.tokens.borderRadiusLarge,
+                        borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                         backgroundColor: react_components_1.tokens.colorNeutralBackground1,
                     }, children: [(0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 56, opacity: 0.8 }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { textAlign: 'center' }, children: emptyMessage })] }) })), !isEmpty && ((0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data?.records, hasMore: dataState?.hasNextPage, onRequestMore: () => {
                     fetchNextPage();

package/PageBoard/BoardingColumnCardLoading.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BoardingColumnCardLoading = BoardingColumnCardLoading;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../components/fluent");
 function BoardingColumnCardLoading() {
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Skeleton, { style: {
             backgroundColor: react_components_1.tokens.colorNeutralBackground1,
-            borderRadius: react_components_1.tokens.borderRadiusLarge,
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
             padding: react_components_1.tokens.spacingHorizontalM,
             display: 'flex',
             flexDirection: 'column',

package/PageBoard/Header.js

@@ -8,6 +8,7 @@ const hooks_2 = require("@headless-adminapp/app/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_query_1 = require("@tanstack/react-query");
 const AppStringContext_1 = require("../App/AppStringContext");
+const fluent_1 = require("../components/fluent");
 const HeaderQuickFilter_1 = require("./HeaderQuickFilter");
 const Header = ({ title, subtitle }) => {
     const client = (0, react_query_1.useQueryClient)();
@@ -33,6 +34,6 @@ const Header = ({ title, subtitle }) => {
                             display: 'flex',
                             alignItems: 'center',
                             gap: react_components_1.tokens.spacingHorizontalS,
-                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { appearance: "filled-darker", placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e, data) => setSearchText(data.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, { size: 20 }), onClick: refresh })] })] }), (0, jsx_runtime_1.jsx)(HeaderQuickFilter_1.HeaderQuickFilter, {})] }));
+                        }, children: [(0, jsx_runtime_1.jsx)(fluent_1.SearchBox, { appearance: "filled-darker", placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e, data) => setSearchText(data.value) }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, { size: 20 }), onClick: refresh })] })] }), (0, jsx_runtime_1.jsx)(HeaderQuickFilter_1.HeaderQuickFilter, {})] }));
 };
 exports.Header = Header;

package/PageBoard/PageBoard.js

@@ -8,6 +8,7 @@ const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
 const context_2 = require("@headless-adminapp/app/mutable/context");
 const react_1 = require("react");
 const DndProvider_1 = require("../components/DndProvider");
+const fluent_1 = require("../components/fluent");
 const BoardColumn_1 = require("./BoardColumn");
 const Header_1 = require("./Header");
 function PageBoard(props) {
@@ -34,7 +35,7 @@ function PageBoard(props) {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 background: react_components_1.tokens.colorNeutralBackground1,
-                                borderRadius: react_components_1.tokens.borderRadiusLarge,
+                                borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                                 paddingBlock: react_components_1.tokens.spacingVerticalM,
                                 paddingInline: react_components_1.tokens.spacingHorizontalM,
                                 gap: react_components_1.tokens.spacingVerticalM,

package/PageCalendar/CalendarSection.js

@@ -20,6 +20,7 @@ const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
 const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const react_2 = require("react");
 const BodyLoading_1 = require("../components/BodyLoading");
+const fluent_1 = require("../components/fluent");
 const renderEventContent_1 = require("./renderEventContent");
 const TitleSelector_1 = require("./TitleSelector");
 const types_1 = require("./types");
@@ -99,14 +100,14 @@ const CalendarSection = ({ startDate, endDate, viewType, onRangeChange, events,
             position: 'relative',
             background: react_components_1.tokens.colorNeutralBackground1,
             padding: react_components_1.tokens.spacingHorizontalL,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
             boxShadow: react_components_1.tokens.shadow2,
             gap: react_components_1.tokens.spacingVerticalM,
         }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     gap: react_components_1.tokens.spacingHorizontalS,
                     flexDirection: isMobile ? 'column' : 'row',
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "outline", style: { fontWeight: react_components_1.tokens.fontWeightMedium }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, {}), onClick: () => calendarRef.current?.getApi().today(), disabled: isToday, children: "Today" }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronLeft, {}), onClick: () => calendarRef.current?.getApi().prev() }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronRight, {}), onClick: () => calendarRef.current?.getApi().next() }), isMobile && ((0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(TitleSelector_1.TitleSelector, { start: startDate, end: endDate, onChange: (start) => {
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: [(0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "outline", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Calendar, {}), onClick: () => calendarRef.current?.getApi().today(), disabled: isToday, children: "Today" }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronLeft, {}), onClick: () => calendarRef.current?.getApi().prev() }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronRight, {}), onClick: () => calendarRef.current?.getApi().next() }), isMobile && ((0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(TitleSelector_1.TitleSelector, { start: startDate, end: endDate, onChange: (start) => {
                                         const api = calendarRef.current?.getApi();
                                         if (!api) {
                                             return;

package/PageCalendar/EventDialog/EventDialog.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const baseEventAttributes_1 = require("@headless-adminapp/app/calendar/baseEventAttributes");
 const utils_1 = require("@headless-adminapp/core/schema/utils");
+const fluent_1 = require("../../components/fluent");
 const EventFormBody_1 = require("./EventFormBody");
 function defineEventAttributes(beforeDescriptionAttributes, afterDescriptionAttributes) {
     return (0, utils_1.defineSchemaAttributes)({
@@ -17,5 +18,5 @@ function defineEventAttributes(beforeDescriptionAttributes, afterDescriptionAttr
 function EventDialog(props) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.isOpen, onOpenChange: () => {
             props.onDismiss?.();
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsx)(EventFormBody_1.EventFormBody, { values: props.values, config: props.config, onCancel: props.onCancel, onSubmit: props.onSubmit }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(fluent_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsx)(EventFormBody_1.EventFormBody, { values: props.values, config: props.config, onCancel: props.onCancel, onSubmit: props.onSubmit }) }) }));
 }

package/PageCalendar/EventDialog/EventFormBody.js

@@ -12,6 +12,7 @@ const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const BodyLoading_1 = require("../../components/BodyLoading");
+const fluent_1 = require("../../components/fluent");
 const EventFormContent_1 = require("./EventFormContent");
 function EventFormBody(props) {
     const { language, region } = (0, locale_1.useLocale)();
@@ -58,7 +59,7 @@ function EventFormBody(props) {
     if (props.values.id) {
         title = props.config.eventLabel;
     }
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: title }), (0, jsx_runtime_1.jsx)(EventFormContent_1.EventFormContent, { form: form, afterDescriptionAttributes: props.config.afterDescriptionAttributes, beforeDescriptionAttributes: props.config.beforeDescriptionAttributes, config: props.config }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: async () => {
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: title }), (0, jsx_runtime_1.jsx)(EventFormContent_1.EventFormContent, { form: form, afterDescriptionAttributes: props.config.afterDescriptionAttributes, beforeDescriptionAttributes: props.config.beforeDescriptionAttributes, config: props.config }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: async () => {
                             await form.handleSubmit(async (values) => {
                                 await props.onSubmit?.({
                                     modifiedValues: values.id
@@ -67,7 +68,7 @@ function EventFormBody(props) {
                                     values,
                                 });
                             })();
-                        }, children: props.values.id ? 'Save' : 'Create' }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
+                        }, children: props.values.id ? 'Save' : 'Create' }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "secondary", type: "button", onClick: () => {
                             props.onCancel?.();
                         }, children: props.values.id ? 'Close' : 'Cancel' })] }), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isPending })] }));
 }

package/PageCalendar/Header.js

@@ -8,6 +8,8 @@ const icons_1 = require("@headless-adminapp/icons");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
+const fluent_1 = require("../components/fluent");
+const Button_1 = require("../components/fluent/Button");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 function Header({ filterForm, onCreateButtonClick, }) {
     const config = (0, useConfig_1.useConfig)();
@@ -16,7 +18,7 @@ function Header({ filterForm, onCreateButtonClick, }) {
             display: 'flex',
             flexDirection: 'column',
             background: react_components_1.tokens.colorNeutralBackground1,
-            borderRadius: react_components_1.tokens.borderRadiusLarge,
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
             paddingBlock: react_components_1.tokens.spacingVerticalS,
             paddingInline: react_components_1.tokens.spacingHorizontalM,
             gap: react_components_1.tokens.spacingVerticalS,
@@ -29,7 +31,7 @@ function Header({ filterForm, onCreateButtonClick, }) {
                             display: 'flex',
                             alignItems: 'center',
                             gap: react_components_1.tokens.spacingHorizontalS,
-                        }, children: [!!config.createOptions && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { style: { fontWeight: react_components_1.tokens.fontWeightMedium }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), appearance: "primary", onClick: onCreateButtonClick, children: "Create" })), (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, {}), appearance: "subtle", style: { fontWeight: react_components_1.tokens.fontWeightRegular }, onClick: async () => {
+                        }, children: [!!config.createOptions && ((0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), appearance: "primary", onClick: onCreateButtonClick, children: "Create" })), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, {}), appearance: "subtle", onClick: async () => {
                                     await queryClient.invalidateQueries({
                                         queryKey: ['calendar-events', 'list'],
                                     });

package/PageCalendar/TitleSelector.js

@@ -15,6 +15,7 @@ const isoWeek_1 = __importDefault(require("dayjs/plugin/isoWeek"));
 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 types_1 = require("./types");
 dayjs_1.default.extend(utc_1.default);
 dayjs_1.default.extend(timezone_1.default);
@@ -52,10 +53,10 @@ const TitleSelector = ({ start, end, onChange, viewType, }) => {
     if (!start || !end) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { positioning: "below", children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", style: {
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { positioning: "below", children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "subtle", style: {
                         fontWeight: react_components_1.tokens.fontWeightMedium,
                         fontSize: react_components_1.tokens.fontSizeBase400,
-                    }, icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.ChevronDown, { size: 16 }), iconPosition: "after", children: label }) }), (0, jsx_runtime_1.jsxs)(react_components_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [viewType === types_1.ViewType.Month && ((0, jsx_runtime_1.jsx)(react_calendar_compat_1.Calendar, { dateRangeType: react_calendar_compat_1.DateRangeType.Month, highlightSelectedMonth: true, isDayPickerVisible: false, value: start ? (0, dayjs_1.default)(start).toDate() : new Date(), onSelectDate: (date) => {
+                    }, icon: (0, jsx_runtime_1.jsx)(icons_fluent_1.iconSet.ChevronDown, { size: 16 }), iconPosition: "after", children: label }) }), (0, jsx_runtime_1.jsxs)(fluent_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [viewType === types_1.ViewType.Month && ((0, jsx_runtime_1.jsx)(react_calendar_compat_1.Calendar, { dateRangeType: react_calendar_compat_1.DateRangeType.Month, highlightSelectedMonth: true, isDayPickerVisible: false, value: start ? (0, dayjs_1.default)(start).toDate() : new Date(), onSelectDate: (date) => {
                             const start = (0, dayjs_1.default)(date)
                                 .tz(timezone, true)
                                 .startOf('month')

package/PageCalendar/ViewSelector.js

@@ -4,6 +4,7 @@ exports.ViewSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const fluent_1 = require("../components/fluent");
 const types_1 = require("./types");
 const viewItems = [
     {
@@ -44,7 +45,7 @@ const ViewSelector = ({ viewType, onChange }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'inline-flex',
             overflow: 'hidden',
-        }, className: styles.root, children: viewItems.map((item) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { className: (0, react_components_1.mergeClasses)(styles.button, item.value === viewType && styles.active), appearance: item.value === viewType ? 'primary' : 'secondary', onClick: () => onChange(item.value), style: {
+        }, className: styles.root, children: viewItems.map((item) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { className: (0, react_components_1.mergeClasses)(styles.button, item.value === viewType && styles.active), appearance: item.value === viewType ? 'primary' : 'secondary', onClick: () => onChange(item.value), style: {
                     fontWeight: react_components_1.tokens.fontWeightRegular,
                     minWidth: 60,
                 }, children: item.label }, item.value) }, item.value))) }));

package/PageCalendar/renderEventContent.js

@@ -17,6 +17,7 @@ const dayjs_1 = __importDefault(require("dayjs"));
 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 EventDialog_1 = require("./EventDialog/EventDialog");
 dayjs_1.default.extend(utc_1.default);
 dayjs_1.default.extend(timezone_1.default);
@@ -28,7 +29,7 @@ const EventItemPreviewComponent = ({ eventInfo, }) => {
             display: 'flex',
             backgroundColor: react_components_1.tokens.colorBrandBackground2,
             color: react_components_1.tokens.colorNeutralForeground1,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            borderRadius: fluent_1.extendedTokens.controlBorderRadius,
             paddingBlock: react_components_1.tokens.spacingVerticalXXS,
             paddingInline: react_components_1.tokens.spacingHorizontalS,
             border: `1px solid ${react_components_1.tokens.colorBrandStroke2}`,
@@ -48,7 +49,7 @@ const EventContent = ({ eventInfo }) => {
             // coverTarget: true,
             position: 'after',
             shiftToCoverTarget: true,
-        }, withArrow: true, open: open, onOpenChange: (e, data) => setOpen(data.open), children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: '100%' }, children: (0, jsx_runtime_1.jsx)(EventItemPreview, { eventInfo: eventInfo }) }) }), (0, jsx_runtime_1.jsx)(react_components_1.PopoverSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsx)(PopoverContent, { eventInfo: eventInfo, onClose: () => setOpen(false) }) })] }));
+        }, withArrow: true, open: open, onOpenChange: (e, data) => setOpen(data.open), children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: '100%' }, children: (0, jsx_runtime_1.jsx)(EventItemPreview, { eventInfo: eventInfo }) }) }), (0, jsx_runtime_1.jsx)(fluent_1.PopoverSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsx)(PopoverContent, { eventInfo: eventInfo, onClose: () => setOpen(false) }) })] }));
 };
 const PopoverContent = ({ eventInfo, onClose }) => {
     const config = (0, useConfig_1.useConfig)();
@@ -97,10 +98,10 @@ const PopoverContent = ({ eventInfo, onClose }) => {
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: react_components_1.tokens.spacingHorizontalS,
-                        }, children: [!!config.deleteEvent && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "subtle", onClick: async () => {
+                        }, children: [!!config.deleteEvent && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "subtle", onClick: async () => {
                                     onClose();
                                     await deleteEvent(eventInfo.event.id);
-                                } })), !!config.editOptions && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, { size: 16 }), appearance: "subtle", onClick: handleEdit })), (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }), appearance: "subtle", onClick: onClose })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                } })), !!config.editOptions && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, { size: 16 }), appearance: "subtle", onClick: handleEdit })), (0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }), appearance: "subtle", onClick: onClose })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                     paddingTop: react_components_1.tokens.spacingVerticalM,
                     display: 'flex',
                     flexDirection: 'column',

package/PageEntityForm/EditableGridControl/CardUi.js

@@ -9,6 +9,7 @@ const hooks_1 = require("@headless-adminapp/app/hooks");
 const useCalculatedAttributeStore_1 = require("@headless-adminapp/app/metadata/hooks/useCalculatedAttributeStore");
 const icons_1 = require("@headless-adminapp/icons");
 const react_hook_form_1 = require("react-hook-form");
+const fluent_1 = require("../../components/fluent");
 const SectionControl_1 = require("../../DataForm/SectionControl");
 const StandardControl_1 = require("../StandardControl");
 const CardUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, alias, readOnly, }) => {
@@ -32,7 +33,7 @@ const CardUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, ali
             gap: react_components_1.tokens.spacingVerticalM,
         }, children: [rows.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
                     boxShadow: react_components_1.tokens.shadow4,
-                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                     padding: react_components_1.tokens.spacingVerticalM,
                     position: 'relative',
                     display: 'flex',
@@ -67,12 +68,11 @@ const CardUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, ali
                                                     eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, field.name, value, previousValue);
                                                 }, onBlur: field.onBlur, placeholder: "" }) }));
                                     } }) }, attributeName));
-                        }) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "primary", onClick: () => onRemoveRow?.(index), style: {
-                            fontWeight: react_components_1.tokens.fontWeightRegular,
+                        }) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), !readOnly && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "primary", onClick: () => onRemoveRow?.(index), style: {
                             alignSelf: 'flex-start',
                             color: react_components_1.tokens.colorStatusDangerForeground1,
                             backgroundColor: react_components_1.tokens.colorStatusDangerBackground1,
                             minWidth: 0,
-                        }, size: "small", children: "Remove" }))] }, item.__key))), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "primary", onClick: onAddRow, style: { alignSelf: 'flex-start', minWidth: 0 }, size: "small", children: "Add" }))] }));
+                        }, size: "small", children: "Remove" }))] }, item.__key))), !readOnly && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "primary", onClick: onAddRow, style: { alignSelf: 'flex-start', minWidth: 0 }, size: "small", children: "Add" }))] }));
 };
 exports.CardUi = CardUi;

package/PageEntityForm/EditableGridControl/EditableGridControl.js

@@ -17,6 +17,7 @@ const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const BodyLoading_1 = require("../../components/BodyLoading");
+const fluent_1 = require("../../components/fluent");
 const CardUi_1 = require("./CardUi");
 const TableUi_1 = require("./TableUi");
 function EditableGridControl({ readOnly, control, }) {
@@ -131,7 +132,7 @@ function EditableGridControl({ readOnly, control, }) {
                     paddingBlock: 8,
                     height: 40,
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: control.label }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)("div", { style: { marginRight: -12 }, children: !control.alias && !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Save, {}), appearance: "subtle", style: { minWidth: 0 }, disabled: localFormInstance.formState.isSubmitting ||
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: control.label }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)("div", { style: { marginRight: -12 }, children: !control.alias && !readOnly && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Save, {}), appearance: "subtle", style: { minWidth: 0 }, disabled: localFormInstance.formState.isSubmitting ||
                                     !localFormInstance.formState.isValid ||
                                     !localFormInstance.formState.isDirty, onClick: handleSave, children: "Save" })) })] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 16, position: 'relative' }, children: !isMobile &&
                     control.format === 'grid' &&

package/PageEntityForm/EditableGridControl/TableUi.js

@@ -8,6 +8,7 @@ const constants_1 = require("@headless-adminapp/app/dataform/constants");
 const useCalculatedAttributeStore_1 = require("@headless-adminapp/app/metadata/hooks/useCalculatedAttributeStore");
 const icons_1 = require("@headless-adminapp/icons");
 const react_hook_form_1 = require("react-hook-form");
+const fluent_1 = require("../../components/fluent");
 const SectionControl_1 = require("../../DataForm/SectionControl");
 const StandardControl_1 = require("../StandardControl");
 const useStyles = (0, react_components_1.makeStyles)({
@@ -53,7 +54,7 @@ const TableUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, al
                                 return null;
                             }
                             return ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { children: attribute.label ?? attribute.label }, attributeName));
-                        }), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "subtle", onClick: onAddRow }) }))] }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: rows.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_components_1.TableRow, { children: [control.controls.map((control) => {
+                        }), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "subtle", onClick: onAddRow }) }))] }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: rows.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_components_1.TableRow, { children: [control.controls.map((control) => {
                             const attributeName = typeof control === 'string' ? control : control.attributeName;
                             const attribute = schema.attributes[attributeName];
                             if (!attribute) {
@@ -71,6 +72,6 @@ const TableUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, al
                                                     eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, field.name, value, previousValue);
                                                 }, onBlur: field.onBlur, placeholder: "" }) }));
                                     } }) }, attributeName));
-                        }), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "subtle", onClick: () => onRemoveRow?.(index) }) }))] }, item.__key))) })] }));
+                        }), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "subtle", onClick: () => onRemoveRow?.(index) }) }))] }, item.__key))) })] }));
 };
 exports.TableUi = TableUi;

package/PageEntityForm/FormTabRelated.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const historystate_1 = require("@headless-adminapp/app/historystate");
+const fluent_1 = require("../components/fluent");
 const FormTab_1 = require("../form/layout/FormTab");
 const SubgridControl_1 = require("./SubgridControl");
 function FormTabRelated({ selectedRelatedItem, }) {
@@ -22,7 +23,7 @@ function FormTabRelated({ selectedRelatedItem, }) {
                         display: 'flex',
                         flexDirection: 'column',
                         boxShadow: react_components_1.tokens.shadow2,
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                         background: react_components_1.tokens.colorNeutralBackground1,
                         flex: 1,
                     }, children: (0, jsx_runtime_1.jsx)("div", { style: {

package/PageEntityForm/PageCustomEntityForm.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageCustomEntityForm = PageCustomEntityForm;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const header_1 = require("@headless-adminapp/app/header");
 const historystate_1 = require("@headless-adminapp/app/historystate");
 const PageEntityFormProvider_1 = require("@headless-adminapp/app/providers/PageEntityFormProvider");
 const recordset_1 = require("@headless-adminapp/app/recordset");
 const PageEntityFormDesktopContainer_1 = require("./PageEntityFormDesktopContainer");
 const RecordSetNavigatorContainer_1 = require("./RecordSetNavigatorContainer");
 function PageCustomEntityForm({ recordId, commands, form, schema, retriveRecordFn, saveRecordFn, }) {
+    (0, header_1.useMobileHeader)(true);
     return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: 'page-entity-form.' + schema.logicalName, children: (0, jsx_runtime_1.jsx)(recordset_1.RecordSetProvider, { children: (0, jsx_runtime_1.jsx)(PageEntityFormProvider_1.PageEntityFormProvider, { schema: schema, form: form, recordId: recordId, commands: commands, retriveRecordFn: retriveRecordFn, saveRecordFn: saveRecordFn, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flex: 1,

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -15,6 +15,8 @@ const mutable_1 = require("@headless-adminapp/app/mutable");
 const utils_2 = require("@headless-adminapp/app/utils");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
+const fluent_1 = require("../components/fluent");
+const FluentProvider_1 = require("../components/fluent/FluentProvider");
 const PageBroken_1 = require("../components/PageBroken");
 const FormBody_1 = require("../form/layout/FormBody");
 const FormTab_1 = require("../form/layout/FormTab");
@@ -68,7 +70,7 @@ const PageEntityFormDesktopContainer = () => {
                     }, children: [!isMobile && ((0, jsx_runtime_1.jsx)("div", { style: {
                                 // padding: 4,
                                 boxShadow: react_components_1.tokens.shadow2,
-                                borderRadius: react_components_1.tokens.borderRadiusMedium,
+                                borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                                 background: react_components_1.tokens.colorNeutralBackground1,
                                 display: 'flex',
                                 // overflow: 'hidden',
@@ -76,7 +78,7 @@ const PageEntityFormDesktopContainer = () => {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 boxShadow: react_components_1.tokens.shadow4,
-                                borderRadius: react_components_1.tokens.borderRadiusMedium,
+                                borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                                 background: react_components_1.tokens.colorNeutralBackground1,
                                 overflow: 'hidden',
                                 zIndex: 2,
@@ -123,12 +125,14 @@ exports.PageEntityFormDesktopContainer = PageEntityFormDesktopContainer;
 const Wrapper = ({ children, formHeaderDivRef, }) => {
     const isMobile = (0, hooks_2.useIsMobile)();
     const rect = (0, hooks_2.useElementSize)(formHeaderDivRef, isMobile ? 100 : 5000);
-    const headerHeight = 50;
+    const { density } = (0, FluentProvider_1.useExtendedThemeContext)();
+    const headerHeight = density === 'compact' ? 48 : 64;
     const tabContainerHeight = 36;
     const visible = !!rect && rect.bottom < headerHeight + tabContainerHeight;
     if (isMobile) {
         return ((0, jsx_runtime_1.jsxs)(ScrollView_1.ScrollView, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                        background: react_components_1.tokens.colorNeutralBackground1,
+                        background: react_components_1.tokens.colorNeutralBackgroundAlpha,
+                        backdropFilter: 'blur(15px)',
                         position: 'fixed',
                         transition: 'all 0.2s',
                         top: visible ? headerHeight : -headerHeight,

package/PageEntityForm/RecordSetNavigatorContainer.js

@@ -9,6 +9,7 @@ const locale_1 = require("@headless-adminapp/app/locale");
 const navigation_1 = require("@headless-adminapp/app/navigation");
 const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
 const react_1 = require("react");
+const fluent_1 = require("../components/fluent");
 const RecordCard_1 = require("./RecordCard");
 const useStyles = (0, react_components_1.makeStyles)({
     item: {
@@ -48,7 +49,7 @@ const RecordSetNavigatorContainer = () => {
             // display: 'none',
         }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 boxShadow: react_components_1.tokens.shadow2,
-                borderRadius: react_components_1.tokens.borderRadiusMedium,
+                borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                 background: react_components_1.tokens.colorNeutralBackground1,
                 display: 'flex',
                 minWidth: 320,

package/PageEntityForm/RelatedViewSelector.js

@@ -9,6 +9,7 @@ const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
 const utils_1 = require("@headless-adminapp/core/attributes/utils");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
+const fluent_1 = require("../components/fluent");
 const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
 function getRelatedItems(currentSchema, schemas, relatedItems) {
     if (relatedItems === null) {
@@ -84,7 +85,6 @@ function RelatedViewSelector(props) {
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsxs)("button", { style: {
                         border: 'none',
                         overflow: 'hidden',
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
                         padding: `${react_components_1.tokens.spacingVerticalM} ${react_components_1.tokens.spacingHorizontalMNudge}`,
                         fontFamily: react_components_1.tokens.fontFamilyBase,
                         lineHeight: react_components_1.tokens.lineHeightBase300,
@@ -100,5 +100,5 @@ function RelatedViewSelector(props) {
                         textTransform: 'none',
                         columnGap: react_components_1.tokens.spacingHorizontalSNudge,
                         color: react_components_1.tokens.colorNeutralForeground2,
-                    }, children: [strings.related, (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, { size: 16 })] }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: data.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => props.onSelect(item), children: item.localizedPluralLabels?.[language] ?? item.pluralLabel }, item.key))) }) })] }));
+                    }, children: [strings.related, (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, { size: 16 })] }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: data.map((item) => ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { onClick: () => props.onSelect(item), children: item.localizedPluralLabels?.[language] ?? item.pluralLabel }, item.key))) }) })] }));
 }

package/PageEntityForm/TabContainer.js

@@ -24,7 +24,11 @@ const TabContainer = () => {
             selectedRelatedItem: item,
         }));
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            paddingBottom: react_components_1.tokens.spacingVerticalS,
+            overflowY: 'auto',
+        }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => {
                     setActiveTab(value.value);
                 }, children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, utils_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: selectedRelatedItem.localizedPluralLabels?.[language] ??
                             selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {

package/PageEntityForm/UploadImageDialog.js

@@ -10,6 +10,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 avatar_1 = require("../utils/avatar");
 const UploadImageDialog = ({ currentImage, recordTitle, recordId, onChange, open, onOpenChange, }) => {
     const schema = (0, hooks_1.useDataFormSchema)();
@@ -80,7 +81,7 @@ const UploadImageDialog = ({ currentImage, recordTitle, recordId, onChange, open
     const showChangeImage = !!isFileChanged;
     const showResetImage = !isFileChanged && !!fileUrl;
     const showCancel = isFileChanged;
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: open, onOpenChange: (e, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { action: (0, jsx_runtime_1.jsx)(react_components_1.DialogTrigger, { action: "close", children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "close", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, {}) }) }), children: "Choose Image" }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: "Upload an image from your device, or use the default image" }), (0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: open, onOpenChange: (e, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(fluent_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { action: (0, jsx_runtime_1.jsx)(react_components_1.DialogTrigger, { action: "close", children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "subtle", "aria-label": "close", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, {}) }) }), children: "Choose Image" }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: "Upload an image from your device, or use the default image" }), (0, jsx_runtime_1.jsx)("div", { style: {
                                         marginTop: react_components_1.tokens.spacingVerticalM,
                                         marginBottom: react_components_1.tokens.spacingVerticalM,
                                         display: 'flex',
@@ -88,21 +89,21 @@ const UploadImageDialog = ({ currentImage, recordTitle, recordId, onChange, open
                                         justifyContent: 'center',
                                     }, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { shape: "square", style: { width: 120, height: 120 }, name: recordTitle, color: (0, avatar_1.getAvatarColor)(recordTitle), image: {
                                             src: fileUrl ?? undefined,
-                                        } }) })] }) }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [showChangeImage && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: () => handleApply(), style: {
+                                        } }) })] }) }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [showChangeImage && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "primary", onClick: () => handleApply(), style: {
                                     whiteSpace: 'nowrap',
                                     fontWeight: 'normal',
-                                }, disabled: isPending, children: isPending ? 'Changing...' : 'Change' })), showUploadImage && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: handleSelectFile, style: {
+                                }, disabled: isPending, children: isPending ? 'Changing...' : 'Change' })), showUploadImage && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "primary", onClick: handleSelectFile, style: {
                                     whiteSpace: 'nowrap',
                                     // minWidth: 0,
                                     fontWeight: 'normal',
-                                }, children: "Upload Image" })), showResetImage && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { style: {
+                                }, children: "Upload Image" })), showResetImage && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { style: {
                                     whiteSpace: 'nowrap',
                                     // minWidth: 0,
                                     fontWeight: 'normal',
                                 }, onClick: () => {
                                     setFileUrl(null);
                                     setFile(null);
-                                }, children: "Reset to Default" })), showCancel && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", style: {
+                                }, children: "Reset to Default" })), showCancel && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "secondary", style: {
                                     whiteSpace: 'nowrap',
                                     // minWidth: 0,
                                     fontWeight: 'normal',

package/PageEntityView/FormSubgridContainer.js

@@ -7,6 +7,7 @@ const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const hooks_2 = require("@headless-adminapp/app/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const AppStringContext_1 = require("../App/AppStringContext");
+const fluent_1 = require("../components/fluent");
 const FormSubgridCommandContainer_1 = require("../DataGrid/FormSubgridCommandContainer");
 const FormSubgridViewSelector_1 = require("../DataGrid/FormSubgridViewSelector");
 const GridListContainer_1 = require("../DataGrid/GridListContainer");
@@ -60,7 +61,7 @@ const FormSubgridDesktopContainer = ({ hideCommandBar, hideSearch, }) => {
                                 justifyContent: 'end',
                                 flexShrink: 0,
                                 paddingInline: 8,
-                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, appearance: "filled-darker", value: searchText, onChange: (e) => setSearchText(e.target.value) }) }))] })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            }, children: (0, jsx_runtime_1.jsx)(fluent_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, appearance: "filled-darker", value: searchText, onChange: (e) => setSearchText(e.target.value) }) }))] })), (0, jsx_runtime_1.jsxs)("div", { style: {
                         flex: 1,
                         display: 'flex',
                         flexDirection: 'column',
@@ -112,7 +113,7 @@ const FormSubgridMobileContainer = ({ hideCommandBar, hideSearch, }) => {
                                 justifyContent: 'end',
                                 flexShrink: 0,
                                 paddingInline: 8,
-                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, appearance: "filled-darker", value: searchText, onChange: (e) => setSearchText(e.target.value) }) }))] })), (0, jsx_runtime_1.jsx)("div", { style: {
+                            }, children: (0, jsx_runtime_1.jsx)(fluent_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, appearance: "filled-darker", value: searchText, onChange: (e) => setSearchText(e.target.value) }) }))] })), (0, jsx_runtime_1.jsx)("div", { style: {
                         flex: 1,
                         display: 'flex',
                         flexDirection: 'column',

package/PageEntityView/PageEntityViewDesktopFrame.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityViewDesktopFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../components/fluent");
 const PageEntityViewDesktopFrame = ({ commandBar, header, content, footer }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
@@ -21,7 +22,7 @@ const PageEntityViewDesktopFrame = ({ commandBar, header, content, footer }) =>
             }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                         // padding: 4,
                         boxShadow: react_components_1.tokens.shadow2,
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                         background: react_components_1.tokens.colorNeutralBackground1,
                         display: 'flex',
                         // overflow: 'hidden',
@@ -31,7 +32,7 @@ const PageEntityViewDesktopFrame = ({ commandBar, header, content, footer }) =>
                         display: 'flex',
                         flexDirection: 'column',
                         boxShadow: react_components_1.tokens.shadow2,
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                         background: react_components_1.tokens.colorNeutralBackground1,
                         paddingBlock: 8,
                     }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {