@moneyforward/mfui-components 3.6.0 → 3.8.0

package/dist/src/MainNavigation/NarrowViewportMainNavigation.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DisclosureBasicCollapsed, DisclosureBasicExpanded, Lock } from '@moneyforward/mfui-icons-react';
-import { forwardRef, useImperativeHandle, useRef, useState, useEffect } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState, useEffect, useId } from 'react';
 import { cx } from '../../styled-system/css';
 import { FocusIndicator } from '../FocusIndicator';
 import { Typography } from '../Typography';
@@ -16,6 +16,7 @@ import { Portal } from '../Portal';
 export const NarrowViewportMainNavigation = forwardRef(({ className, featureShortcut, navigationItems, width = 'normal', customLinkComponent }, ref) => {
     const classes = narrowViewportMainNavigationSlotRecipe({ width });
     const InternalLinkTag = customLinkComponent ?? 'a';
+    const navId = useId();
     const hasCurrentNavigationInChildren = (children) => children?.some((child) => child.isCurrent);
     const dialogRef = useRef(null);
     const [openState, setOpenState] = useState(false);
@@ -47,5 +48,19 @@ export const NarrowViewportMainNavigation = forwardRef(({ className, featureShor
     }
     return (_jsx(Portal, { children: _jsxs("div", { ref: dialogRef, role: "dialog", className: cx(classes.root, 'mfui-NarrowViewportMainNavigation__root', className), tabIndex: -1, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-NarrowViewportMainNavigation__backdrop'), onClick: handleCloseMainNavigation }), _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.container, 'mfui-NarrowViewportMainNavigation__container'), onClick: (event) => {
                         event.stopPropagation();
-                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsx("nav", { className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: _jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: navigation.isOpenByDefault || hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index))) }) })] })] }) }));
+                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => {
+                                        const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
+                                        if (isGroupLabel) {
+                                            return null;
+                                        }
+                                        return (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: ('isOpenByDefault' in navigation && navigation.isOpenByDefault) ||
+                                                    hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index));
+                                    }) }), navigationItems.map((navigation, index) => {
+                                    const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
+                                    if (!isGroupLabel) {
+                                        return null;
+                                    }
+                                    const groupLabelId = `${navId}-group-label-${String(index)}`;
+                                    return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-NarrowViewportMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-NarrowViewportMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-NarrowViewportMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, index));
+                                })] })] })] }) }));
 });

package/dist/src/StatusLabel/StatusLabel.d.ts

@@ -11,6 +11,7 @@
 export declare const StatusLabel: import("react").ForwardRefExoticComponent<{
     label: string;
     icon?: import("react").ReactNode;
+    status?: import("../../styled-system/recipes").StatusLabelSlotRecipeVariant["status"];
     size?: import("../../styled-system/recipes").StatusLabelSlotRecipeVariant["size"];
     className?: string;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/src/StatusLabel/StatusLabel.js

@@ -13,7 +13,7 @@ import { Typography } from '../Typography';
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
  */
-export const StatusLabel = forwardRef(({ label, icon, size = 'medium', className, ...props }, ref) => {
-    const classes = statusLabelSlotRecipe({ size });
+export const StatusLabel = forwardRef(({ label, icon, size = 'medium', status = 'neutral', className, ...props }, ref) => {
+    const classes = statusLabelSlotRecipe({ size, status });
     return (_jsxs("span", { ref: ref, className: cx(classes.root, 'mfui-StatusLabel__root', className), ...props, children: [icon ? _jsx("span", { className: cx(classes.icon, 'mfui-StatusLabel__icon'), children: icon }) : null, _jsx(Typography, { as: "span", className: cx(classes.label, 'mfui-StatusLabel__label'), variant: size === 'medium' ? 'body' : 'condensedBody', children: label })] }));
 });

package/dist/src/StatusLabel/StatusLabel.types.d.ts

@@ -9,6 +9,12 @@ export type StatusLabelProps = {
      * Optional icon to display before the label text.
      */
     icon?: ReactNode;
+    /**
+     * The status variant of the status label.
+     *
+     * @default 'neutral'
+     */
+    status?: StatusLabelSlotRecipeVariant['status'];
     /**
      * The size variant of the status label.
      *

package/dist/src/index.d.ts

@@ -25,6 +25,7 @@ export * from './ToggleSwitch';
 export * from './Pagination';
 export * from './Tag';
 export * from './ProgressIndicator';
+export * from './DataTable';
 export * from './DataGrid';
 export * from './SubNavigation';
 export * from './Tabs';

package/dist/src/index.js

@@ -25,6 +25,7 @@ export * from './ToggleSwitch';
 export * from './Pagination';
 export * from './Tag';
 export * from './ProgressIndicator';
+export * from './DataTable';
 export * from './DataGrid';
 export * from './SubNavigation';
 export * from './Tabs';

package/dist/src/utilities/dom/useFixedColumns.d.ts

@@ -41,7 +41,7 @@ type UseFixedColumnsReturn = {
     };
 };
 /**
- * A hook to calculate the position of fixed columns in the DataGrid component.
+ * A hook to calculate the position of fixed columns in the DataTable component.
  */
 export declare const useFixedColumns: ({ enableRowSelection, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }: UseFixedColumnsProps) => UseFixedColumnsReturn;
 export {};

package/dist/src/utilities/dom/useFixedColumns.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 /**
- * A hook to calculate the position of fixed columns in the DataGrid component.
+ * A hook to calculate the position of fixed columns in the DataTable component.
  */
 export const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }) => {
     const cellRef = useRef(null);

package/dist/src/utilities/react/isComponentOrWrapped.d.ts

@@ -31,24 +31,24 @@
  * // In Children.map
  * Children.map(children, (child) => {
  *   if (!isValidElement(child)) return child;
- *   if (isComponentOrWrapped(child, DataGridCell)) {
+ *   if (isComponentOrWrapped(child, DataTableCell)) {
  *     return cloneElement(child, { ...additionalProps });
  *   }
  *   return child;
  * });
  *
  * // Creating a wrapper component (recommended approach)
- * const WrappedDataGridCell = (props) => {
- *   return <DataGridCell {...props} customProp="value" />;
+ * const WrappedDataTableCell = (props) => {
+ *   return <DataTableCell {...props} customProp="value" />;
  * };
- * WrappedDataGridCell.displayName = 'DataGridCell'; // Recommended for detection
+ * WrappedDataTableCell.displayName = 'DataTableCell'; // Recommended for detection
  *
  * // Wrapper with hooks (displayName is required)
- * const WrappedDataGridCellWithHooks = (props) => {
+ * const WrappedDataTableCellWithHooks = (props) => {
  *   const [state, setState] = useState(initialState);
- *   return <DataGridCell {...props} state={state} />;
+ *   return <DataTableCell {...props} state={state} />;
  * };
- * WrappedDataGridCellWithHooks.displayName = 'DataGridCell'; // Required to avoid hooks error
+ * WrappedDataTableCellWithHooks.displayName = 'DataTableCell'; // Required to avoid hooks error
  * ```
  */
 export declare function isComponentOrWrapped<P = unknown>(element: React.ReactElement, targetComponent: React.ComponentType<P>): boolean;

package/dist/src/utilities/react/isComponentOrWrapped.js

@@ -32,24 +32,24 @@ import { isValidElement } from 'react';
  * // In Children.map
  * Children.map(children, (child) => {
  *   if (!isValidElement(child)) return child;
- *   if (isComponentOrWrapped(child, DataGridCell)) {
+ *   if (isComponentOrWrapped(child, DataTableCell)) {
  *     return cloneElement(child, { ...additionalProps });
  *   }
  *   return child;
  * });
  *
  * // Creating a wrapper component (recommended approach)
- * const WrappedDataGridCell = (props) => {
- *   return <DataGridCell {...props} customProp="value" />;
+ * const WrappedDataTableCell = (props) => {
+ *   return <DataTableCell {...props} customProp="value" />;
  * };
- * WrappedDataGridCell.displayName = 'DataGridCell'; // Recommended for detection
+ * WrappedDataTableCell.displayName = 'DataTableCell'; // Recommended for detection
  *
  * // Wrapper with hooks (displayName is required)
- * const WrappedDataGridCellWithHooks = (props) => {
+ * const WrappedDataTableCellWithHooks = (props) => {
  *   const [state, setState] = useState(initialState);
- *   return <DataGridCell {...props} state={state} />;
+ *   return <DataTableCell {...props} state={state} />;
  * };
- * WrappedDataGridCellWithHooks.displayName = 'DataGridCell'; // Required to avoid hooks error
+ * WrappedDataTableCellWithHooks.displayName = 'DataTableCell'; // Required to avoid hooks error
  * ```
  */
 export function isComponentOrWrapped(element, targetComponent) {

package/dist/styled-system/jsx/is-valid-prop.js

@@ -3,7 +3,7 @@ import { memo } from '../helpers.js';
 // src/index.ts
 var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_notDisabled,_notFocused,_focusable,_focusInputInside,_hasCheckboxInside,_hasDisabledCheckboxInside,_hasFocusedCheckboxInside,_hasFocusedCheckedCheckboxInside,_hasCheckedCheckboxInside,_hasRadioButtonInside,_hasFocusedRadioButtonInside,_hasFocusedCheckedRadioButtonInside,_hasDisabledRadioButtonInside,_hasCheckedRadioButtonInside,_hasToggleSwitchInside,_hasFocusedToggleSwitchInside,_hasFocusedCheckedToggleSwitchInside,_hasDisabledToggleSwitchInside,_hasCheckedToggleSwitchInside,sm,smOnly,smDown,lg,lgOnly,lgDown,smToLg";
 var userGenerated = userGeneratedStr.split(",");
-var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical";
+var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,cornerShape,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical";
 var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);
 var properties = new Map(allCssProperties.map((prop) => [prop, true]));
 var cssPropertySelectorRegex = /&|@/;

package/dist/styled-system/patterns/divider.d.ts

@@ -6,7 +6,7 @@ import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface DividerProperties {
-   orientation?: "horizontal" | "vertical"
+   orientation?: ConditionalValue<"horizontal" | "vertical">
 	thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>
 	color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
 }

package/dist/styled-system/patterns/float.d.ts

@@ -9,7 +9,7 @@ export interface FloatProperties {
    offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
 	offsetY?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
 	offset?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
-	placement?: "bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start"
+	placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start">
 }
 
 interface FloatStyles extends FloatProperties, DistributiveOmit<SystemStyleObject, keyof FloatProperties > {}

package/dist/styled-system/recipes/base-main-navigation-slot-recipe.d.ts

@@ -11,7 +11,7 @@ type BaseMainNavigationSlotRecipeVariantMap = {
   [key in keyof BaseMainNavigationSlotRecipeVariant]: Array<BaseMainNavigationSlotRecipeVariant[key]>
 }
 
-type BaseMainNavigationSlotRecipeSlot = "root" | "nav" | "list" | "featureShortcut" | "featureShortcutAnchor" | "labelGroup" | "iconAndLabel" | "lockIcon" | "listItem" | "listItemTooltip" | "listItemAnchor" | "listItemAnchorIcon" | "parentDetails" | "parentSummary" | "parentSummaryIcon" | "childrenList" | "childrenListItem" | "childrenListItemAnchor" | "popoverChildrenList" | "footer" | "toggleButton" | "toggleButtonIcon"
+type BaseMainNavigationSlotRecipeSlot = "root" | "nav" | "list" | "featureShortcut" | "featureShortcutAnchor" | "labelGroup" | "iconAndLabel" | "lockIcon" | "listItem" | "listItemTooltip" | "listItemAnchor" | "listItemAnchorIcon" | "parentDetails" | "parentSummary" | "parentSummaryIcon" | "groupLabelSection" | "groupLabel" | "groupLabelText" | "childrenList" | "childrenListItem" | "childrenListItemAnchor" | "popoverChildrenList" | "footer" | "toggleButton" | "toggleButtonIcon"
 
 export type BaseMainNavigationSlotRecipeVariantProps = {
   [key in keyof BaseMainNavigationSlotRecipeVariant]?: ConditionalValue<BaseMainNavigationSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/base-main-navigation-slot-recipe.js

@@ -63,6 +63,18 @@ const baseMainNavigationSlotRecipeSlotNames = [
         "parentSummaryIcon",
         "BaseMainNavigation__parentSummaryIcon"
     ],
+    [
+        "groupLabelSection",
+        "BaseMainNavigation__groupLabelSection"
+    ],
+    [
+        "groupLabel",
+        "BaseMainNavigation__groupLabel"
+    ],
+    [
+        "groupLabelText",
+        "BaseMainNavigation__groupLabelText"
+    ],
     [
         "childrenList",
         "BaseMainNavigation__childrenList"

package/dist/styled-system/recipes/data-table-body-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DataTableBodySlotRecipeVariant {
+  
+}
+
+type DataTableBodySlotRecipeVariantMap = {
+  [key in keyof DataTableBodySlotRecipeVariant]: Array<DataTableBodySlotRecipeVariant[key]>
+}
+
+type DataTableBodySlotRecipeSlot = "root"
+
+export type DataTableBodySlotRecipeVariantProps = {
+  [key in keyof DataTableBodySlotRecipeVariant]?: ConditionalValue<DataTableBodySlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableBodySlotRecipeRecipe {
+  __slot: DataTableBodySlotRecipeSlot
+  __type: DataTableBodySlotRecipeVariantProps
+  (props?: DataTableBodySlotRecipeVariantProps): Pretty<Record<DataTableBodySlotRecipeSlot, string>>
+  raw: (props?: DataTableBodySlotRecipeVariantProps) => DataTableBodySlotRecipeVariantProps
+  variantMap: DataTableBodySlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableBodySlotRecipeVariant>
+  splitVariantProps<Props extends DataTableBodySlotRecipeVariantProps>(props: Props): [DataTableBodySlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableBodySlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableBodySlotRecipeVariantProps) => DataTableBodySlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTableBody component.
+ */
+export declare const dataTableBodySlotRecipe: DataTableBodySlotRecipeRecipe

package/dist/styled-system/recipes/data-table-body-slot-recipe.js

@@ -0,0 +1,28 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableBodySlotRecipeDefaultVariants = {};
+const dataTableBodySlotRecipeCompoundVariants = [];
+const dataTableBodySlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableBody__root"
+    ]
+];
+const dataTableBodySlotRecipeSlotFns = /* @__PURE__ */ dataTableBodySlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableBodySlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableBodySlotRecipeCompoundVariants, slotName))]);
+const dataTableBodySlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableBodySlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableBodySlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...dataTableBodySlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableBodySlotRecipe = /* @__PURE__ */ Object.assign(dataTableBodySlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableBodySlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableBodySlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, dataTableBodySlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/data-table-cell-slot-recipe.d.ts

@@ -0,0 +1,38 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DataTableCellSlotRecipeVariant {
+  size: "small" | "medium"
+isCheckboxCell: boolean
+rowHighlighted: boolean
+fixedColumn: boolean
+edgeFixedColumn: "left" | "right"
+type: "text" | "amount"
+}
+
+type DataTableCellSlotRecipeVariantMap = {
+  [key in keyof DataTableCellSlotRecipeVariant]: Array<DataTableCellSlotRecipeVariant[key]>
+}
+
+type DataTableCellSlotRecipeSlot = "root" | "defaultCell" | "interactiveCell" | "disclosureIconWrapper" | "disclosureSpacing" | "skeletonCell"
+
+export type DataTableCellSlotRecipeVariantProps = {
+  [key in keyof DataTableCellSlotRecipeVariant]?: ConditionalValue<DataTableCellSlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableCellSlotRecipeRecipe {
+  __slot: DataTableCellSlotRecipeSlot
+  __type: DataTableCellSlotRecipeVariantProps
+  (props?: DataTableCellSlotRecipeVariantProps): Pretty<Record<DataTableCellSlotRecipeSlot, string>>
+  raw: (props?: DataTableCellSlotRecipeVariantProps) => DataTableCellSlotRecipeVariantProps
+  variantMap: DataTableCellSlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableCellSlotRecipeVariant>
+  splitVariantProps<Props extends DataTableCellSlotRecipeVariantProps>(props: Props): [DataTableCellSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableCellSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableCellSlotRecipeVariantProps) => DataTableCellSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTableCell component.
+ */
+export declare const dataTableCellSlotRecipe: DataTableCellSlotRecipeRecipe

package/dist/styled-system/recipes/data-table-cell-slot-recipe.js

@@ -0,0 +1,77 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableCellSlotRecipeDefaultVariants = {};
+const dataTableCellSlotRecipeCompoundVariants = [];
+const dataTableCellSlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableCell__root"
+    ],
+    [
+        "defaultCell",
+        "DataTableCell__defaultCell"
+    ],
+    [
+        "interactiveCell",
+        "DataTableCell__interactiveCell"
+    ],
+    [
+        "disclosureIconWrapper",
+        "DataTableCell__disclosureIconWrapper"
+    ],
+    [
+        "disclosureSpacing",
+        "DataTableCell__disclosureSpacing"
+    ],
+    [
+        "skeletonCell",
+        "DataTableCell__skeletonCell"
+    ]
+];
+const dataTableCellSlotRecipeSlotFns = /* @__PURE__ */ dataTableCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableCellSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableCellSlotRecipeCompoundVariants, slotName))]);
+const dataTableCellSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableCellSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableCellSlotRecipeVariantKeys = [
+    "size",
+    "isCheckboxCell",
+    "rowHighlighted",
+    "fixedColumn",
+    "edgeFixedColumn",
+    "type"
+];
+const getVariantProps = (variants) => ({ ...dataTableCellSlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableCellSlotRecipe = /* @__PURE__ */ Object.assign(dataTableCellSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableCellSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableCellSlotRecipeVariantKeys,
+    variantMap: {
+        "size": [
+            "small",
+            "medium"
+        ],
+        "isCheckboxCell": [
+            "true"
+        ],
+        "rowHighlighted": [
+            "true"
+        ],
+        "fixedColumn": [
+            "true"
+        ],
+        "edgeFixedColumn": [
+            "left",
+            "right"
+        ],
+        "type": [
+            "text",
+            "amount"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, dataTableCellSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/data-table-header-cell-slot-recipe.d.ts

@@ -0,0 +1,37 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DataTableHeaderCellSlotRecipeVariant {
+  size: "small" | "medium"
+fixedColumn: boolean
+edgeFixedColumn: "left" | "right"
+isCheckboxCell: boolean
+type: "text" | "amount"
+}
+
+type DataTableHeaderCellSlotRecipeVariantMap = {
+  [key in keyof DataTableHeaderCellSlotRecipeVariant]: Array<DataTableHeaderCellSlotRecipeVariant[key]>
+}
+
+type DataTableHeaderCellSlotRecipeSlot = "root" | "headerCell" | "sortButton" | "sortIconContainer" | "sortIcon" | "unsortedIcon"
+
+export type DataTableHeaderCellSlotRecipeVariantProps = {
+  [key in keyof DataTableHeaderCellSlotRecipeVariant]?: ConditionalValue<DataTableHeaderCellSlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableHeaderCellSlotRecipeRecipe {
+  __slot: DataTableHeaderCellSlotRecipeSlot
+  __type: DataTableHeaderCellSlotRecipeVariantProps
+  (props?: DataTableHeaderCellSlotRecipeVariantProps): Pretty<Record<DataTableHeaderCellSlotRecipeSlot, string>>
+  raw: (props?: DataTableHeaderCellSlotRecipeVariantProps) => DataTableHeaderCellSlotRecipeVariantProps
+  variantMap: DataTableHeaderCellSlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableHeaderCellSlotRecipeVariant>
+  splitVariantProps<Props extends DataTableHeaderCellSlotRecipeVariantProps>(props: Props): [DataTableHeaderCellSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableHeaderCellSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableHeaderCellSlotRecipeVariantProps) => DataTableHeaderCellSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTableHeaderCell component.
+ */
+export declare const dataTableHeaderCellSlotRecipe: DataTableHeaderCellSlotRecipeRecipe

package/dist/styled-system/recipes/data-table-header-cell-slot-recipe.js

@@ -0,0 +1,73 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const dataTableHeaderCellSlotRecipeDefaultVariants = {};
+const dataTableHeaderCellSlotRecipeCompoundVariants = [];
+const dataTableHeaderCellSlotRecipeSlotNames = [
+    [
+        "root",
+        "DataTableHeaderCell__root"
+    ],
+    [
+        "headerCell",
+        "DataTableHeaderCell__headerCell"
+    ],
+    [
+        "sortButton",
+        "DataTableHeaderCell__sortButton"
+    ],
+    [
+        "sortIconContainer",
+        "DataTableHeaderCell__sortIconContainer"
+    ],
+    [
+        "sortIcon",
+        "DataTableHeaderCell__sortIcon"
+    ],
+    [
+        "unsortedIcon",
+        "DataTableHeaderCell__unsortedIcon"
+    ]
+];
+const dataTableHeaderCellSlotRecipeSlotFns = /* @__PURE__ */ dataTableHeaderCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableHeaderCellSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableHeaderCellSlotRecipeCompoundVariants, slotName))]);
+const dataTableHeaderCellSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(dataTableHeaderCellSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const dataTableHeaderCellSlotRecipeVariantKeys = [
+    "size",
+    "fixedColumn",
+    "edgeFixedColumn",
+    "isCheckboxCell",
+    "type"
+];
+const getVariantProps = (variants) => ({ ...dataTableHeaderCellSlotRecipeDefaultVariants, ...compact(variants) });
+export const dataTableHeaderCellSlotRecipe = /* @__PURE__ */ Object.assign(dataTableHeaderCellSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'dataTableHeaderCellSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: dataTableHeaderCellSlotRecipeVariantKeys,
+    variantMap: {
+        "size": [
+            "small",
+            "medium"
+        ],
+        "fixedColumn": [
+            "true"
+        ],
+        "edgeFixedColumn": [
+            "left",
+            "right"
+        ],
+        "isCheckboxCell": [
+            "true"
+        ],
+        "type": [
+            "text",
+            "amount"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, dataTableHeaderCellSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/data-table-header-row-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DataTableHeaderRowSlotRecipeVariant {
+  
+}
+
+type DataTableHeaderRowSlotRecipeVariantMap = {
+  [key in keyof DataTableHeaderRowSlotRecipeVariant]: Array<DataTableHeaderRowSlotRecipeVariant[key]>
+}
+
+type DataTableHeaderRowSlotRecipeSlot = "root"
+
+export type DataTableHeaderRowSlotRecipeVariantProps = {
+  [key in keyof DataTableHeaderRowSlotRecipeVariant]?: ConditionalValue<DataTableHeaderRowSlotRecipeVariant[key]> | undefined
+}
+
+export interface DataTableHeaderRowSlotRecipeRecipe {
+  __slot: DataTableHeaderRowSlotRecipeSlot
+  __type: DataTableHeaderRowSlotRecipeVariantProps
+  (props?: DataTableHeaderRowSlotRecipeVariantProps): Pretty<Record<DataTableHeaderRowSlotRecipeSlot, string>>
+  raw: (props?: DataTableHeaderRowSlotRecipeVariantProps) => DataTableHeaderRowSlotRecipeVariantProps
+  variantMap: DataTableHeaderRowSlotRecipeVariantMap
+  variantKeys: Array<keyof DataTableHeaderRowSlotRecipeVariant>
+  splitVariantProps<Props extends DataTableHeaderRowSlotRecipeVariantProps>(props: Props): [DataTableHeaderRowSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DataTableHeaderRowSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DataTableHeaderRowSlotRecipeVariantProps) => DataTableHeaderRowSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI DataTableHeaderRow component.
+ */
+export declare const dataTableHeaderRowSlotRecipe: DataTableHeaderRowSlotRecipeRecipe