@seed-design/react 2.5.1 → 3.0.0

package/src/components/ContentDialog/ContentDialog.tsx

@@ -1,224 +0,0 @@
-import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
-import {
-  contentDialog,
-  type ContentDialogVariantProps,
-} from "@seed-design/css/recipes/content-dialog";
-import { dataAttr } from "@seed-design/dom-utils";
-import { Dialog as DialogPrimitive } from "@seed-design/react-dialog";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import clsx from "clsx";
-import * as React from "react";
-import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
-import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { useScaleFeedback } from "@seed-design/react-scale-feedback";
-import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
-
-const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(contentDialog);
-
-const closeButtonTracker = createRenderTrackingContext("ContentDialogCloseButton");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogRootProps
-  extends ContentDialogVariantProps,
-    Omit<DialogPrimitive.RootProps, "role"> {
-  /**
-   * @default true
-   */
-  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
-  /**
-   * @default true
-   */
-  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
-}
-
-export function ContentDialogRoot(props: ContentDialogRootProps) {
-  const [variantProps, otherProps] = contentDialog.splitVariantProps({
-    lazyMount: true,
-    unmountOnExit: true,
-    ...props,
-  });
-  const classNames = contentDialog(variantProps);
-
-  return (
-    <ClassNamesProvider value={classNames}>
-      <closeButtonTracker.Provider>
-        <DialogPrimitive.Root {...otherProps} />
-      </closeButtonTracker.Provider>
-    </ClassNamesProvider>
-  );
-}
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogTriggerProps extends DialogPrimitive.TriggerProps {}
-
-export const ContentDialogTrigger = DialogPrimitive.Trigger;
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogPositionerProps extends DialogPrimitive.PositionerProps {}
-
-export const ContentDialogPositioner = withContext<HTMLDivElement, ContentDialogPositionerProps>(
-  DialogPrimitive.Positioner,
-  "positioner",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogBackdropProps extends DialogPrimitive.BackdropProps {}
-
-export const ContentDialogBackdrop = withContext<HTMLDivElement, ContentDialogBackdropProps>(
-  DialogPrimitive.Backdrop,
-  "backdrop",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogContentProps
-  extends DialogPrimitive.ContentProps,
-    Pick<StyleProps, "width" | "maxWidth"> {}
-
-export const ContentDialogContent = withContext<HTMLDivElement, ContentDialogContentProps>(
-  withStyleProps(DialogPrimitive.Content),
-  "content",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogHeaderProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const ContentDialogHeader = React.forwardRef<HTMLDivElement, ContentDialogHeaderProps>(
-  ({ className, ...props }, ref) => {
-    const classNames = useClassNames();
-    const { isRendered } = closeButtonTracker.useRenderTracking();
-
-    return (
-      <Primitive.div
-        ref={ref}
-        data-show-close-button={dataAttr(isRendered)}
-        className={clsx(classNames.header, className)}
-        {...props}
-      />
-    );
-  },
-);
-
-ContentDialogHeader.displayName = "ContentDialogHeader";
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogTitleProps extends DialogPrimitive.TitleProps {}
-
-export const ContentDialogTitle = withContext<HTMLHeadingElement, ContentDialogTitleProps>(
-  DialogPrimitive.Title,
-  "title",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogDescriptionProps extends DialogPrimitive.DescriptionProps {}
-
-export const ContentDialogDescription = withContext<
-  HTMLParagraphElement,
-  ContentDialogDescriptionProps
->(DialogPrimitive.Description, "description");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogBodyProps
-  extends PrimitiveProps,
-    Pick<StyleProps, "paddingX" | "minHeight" | "maxHeight" | "justifyContent" | "alignItems">,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const ContentDialogBody = React.forwardRef<HTMLDivElement, ContentDialogBodyProps>(
-  (props, forwardedRef) => {
-    const classNames = useClassNames();
-    const { style, restProps } = useStyleProps(props);
-    const { className, ...otherProps } = restProps;
-
-    const ref = React.useRef<HTMLDivElement>(null);
-    const [scrolled, setScrolled] = React.useState(false);
-    const [overflowing, setOverflowing] = React.useState(false);
-
-    React.useEffect(() => {
-      const element = ref.current;
-      if (!element) return;
-
-      const check = () => {
-        setScrolled(element.scrollTop > 0);
-        // Subtract the current bottom padding so overflow detection stays independent
-        // of the padding we conditionally apply — otherwise that padding would count as
-        // overflow and the state would never settle (padding -> overflow -> padding...).
-        const paddingBottom = Number.parseFloat(getComputedStyle(element).paddingBottom) || 0;
-        setOverflowing(element.scrollHeight - paddingBottom > element.clientHeight);
-      };
-      check();
-
-      element.addEventListener("scroll", check);
-
-      const observer = new ResizeObserver(check);
-      observer.observe(element);
-
-      return () => {
-        element.removeEventListener("scroll", check);
-        observer.disconnect();
-      };
-    }, []);
-
-    return (
-      <Primitive.div
-        ref={composeRefs(ref, forwardedRef)}
-        data-scrolled={dataAttr(scrolled)}
-        data-overflow={dataAttr(overflowing)}
-        className={clsx(classNames.body, className)}
-        style={style}
-        {...otherProps}
-      />
-    );
-  },
-);
-
-ContentDialogBody.displayName = "ContentDialogBody";
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogFooterProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const ContentDialogFooter = withContext<HTMLDivElement, ContentDialogFooterProps>(
-  Primitive.div,
-  "footer",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogActionProps extends DialogPrimitive.CloseButtonProps {}
-
-export const ContentDialogAction = DialogPrimitive.CloseButton;
-
-////////////////////////////////////////////////////////////////////////////////////
-
-export interface ContentDialogCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
-
-export const ContentDialogCloseButton = React.forwardRef<
-  HTMLButtonElement,
-  ContentDialogCloseButtonProps
->(({ className, ...props }, ref) => {
-  const classNames = useClassNames();
-  const { trackRef } = closeButtonTracker.useRenderTracking();
-  const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
-
-  return (
-    <DialogPrimitive.CloseButton
-      ref={useComposedRefs(scaleFeedbackRef, ref, trackRef)}
-      className={clsx(classNames.closeButton, scaleFeedbackClassName, className)}
-      {...props}
-    />
-  );
-});
-
-ContentDialogCloseButton.displayName = "ContentDialogCloseButton";

package/src/components/ContentDialog/index.ts

@@ -1,33 +0,0 @@
-// NOTE: dialog naming is mid-rename; rootage/vars already use the new names, recipes and react components still use the old ones.
-// Semantically (= snippet naming), this component is the Dialog:
-//   snippet AlertDialog → react Dialog        → recipe "dialog"         → vars alertDialog
-//   snippet Dialog      → react ContentDialog → recipe "content-dialog" → vars dialog
-
-export {
-  ContentDialogBackdrop,
-  ContentDialogPositioner,
-  ContentDialogContent,
-  ContentDialogBody,
-  ContentDialogDescription,
-  ContentDialogFooter,
-  ContentDialogHeader,
-  ContentDialogRoot,
-  ContentDialogTitle,
-  ContentDialogTrigger,
-  ContentDialogAction,
-  ContentDialogCloseButton,
-  type ContentDialogBackdropProps,
-  type ContentDialogPositionerProps,
-  type ContentDialogContentProps,
-  type ContentDialogBodyProps,
-  type ContentDialogDescriptionProps,
-  type ContentDialogFooterProps,
-  type ContentDialogHeaderProps,
-  type ContentDialogRootProps,
-  type ContentDialogTitleProps,
-  type ContentDialogTriggerProps,
-  type ContentDialogActionProps,
-  type ContentDialogCloseButtonProps,
-} from "./ContentDialog";
-
-export * as ContentDialog from "./ContentDialog.namespace";

package/src/components/ControlChip/ControlChip.tsx

@@ -1,38 +0,0 @@
-import { controlChip, type ControlChipVariantProps } from "@seed-design/css/recipes/control-chip";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import type * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-import { withIconRequired } from "../Icon/Icon";
-
-const { withContext } = createRecipeContext(controlChip);
-
-/**
- * @deprecated ControlChipBaseProps is deprecated. Use ChipBaseProps from Chip instead.
- */
-export interface ControlChipBaseProps extends PrimitiveProps, ControlChipVariantProps {}
-
-/**
- * @deprecated ControlChipProps is deprecated. Use Chip.Toggle or Chip.Button instead.
- *
- * Migration guide:
- * ```tsx
- * // Before
- * <ControlChip size="medium">Label</ControlChip>
- *
- * // After
- * import { Chip } from "@seed-design/react";
- * <Chip.Toggle size="medium" variant="outlineStrong">Label</Chip.Toggle>
- * ```
- */
-export interface ControlChipProps
-  extends ControlChipBaseProps,
-    React.HTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated ControlChip is deprecated. Use Chip.Toggle or Chip.Button instead.
- */
-export const ControlChip = withIconRequired(
-  withContext<HTMLButtonElement, ControlChipProps>(Primitive.button),
-  (props: ControlChipProps) => props.layout === "iconOnly",
-);
-ControlChip.displayName = "ControlChip";

package/src/components/ControlChip/index.ts

@@ -1,5 +0,0 @@
-export {
-  ControlChip,
-  type ControlChipBaseProps,
-  type ControlChipProps,
-} from "./ControlChip";

package/src/components/ExtendedActionSheet/ExtendedActionSheet.namespace.ts

@@ -1,26 +0,0 @@
-export {
-  ExtendedActionSheetBackdrop as Backdrop,
-  ExtendedActionSheetPositioner as Positioner,
-  ExtendedActionSheetContent as Content,
-  ExtendedActionSheetFooter as Footer,
-  ExtendedActionSheetHeader as Header,
-  ExtendedActionSheetRoot as Root,
-  ExtendedActionSheetTitle as Title,
-  ExtendedActionSheetTrigger as Trigger,
-  ExtendedActionSheetList as List,
-  ExtendedActionSheetGroup as Group,
-  ExtendedActionSheetItem as Item,
-  ExtendedActionSheetCloseButton as CloseButton,
-  type ExtendedActionSheetBackdropProps as BackdropProps,
-  type ExtendedActionSheetPositionerProps as PositionerProps,
-  type ExtendedActionSheetContentProps as ContentProps,
-  type ExtendedActionSheetFooterProps as FooterProps,
-  type ExtendedActionSheetHeaderProps as HeaderProps,
-  type ExtendedActionSheetRootProps as RootProps,
-  type ExtendedActionSheetTitleProps as TitleProps,
-  type ExtendedActionSheetTriggerProps as TriggerProps,
-  type ExtendedActionSheetListProps as ListProps,
-  type ExtendedActionSheetGroupProps as GroupProps,
-  type ExtendedActionSheetItemProps as ItemProps,
-  type ExtendedActionSheetCloseButtonProps as CloseButtonProps,
-} from "./ExtendedActionSheet";

package/src/components/ExtendedActionSheet/ExtendedActionSheet.tsx

@@ -1,220 +0,0 @@
-import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import {
-  extendedActionSheet,
-  type ExtendedActionSheetVariantProps,
-} from "@seed-design/css/recipes/extended-action-sheet";
-import {
-  extendedActionSheetItem,
-  type ExtendedActionSheetItemVariantProps,
-} from "@seed-design/css/recipes/extended-action-sheet-item";
-import type * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { createWithStateProps } from "../../utils/createWithStateProps";
-
-const { withRootProvider, withContext } = createSlotRecipeContext(extendedActionSheet);
-const { withContext: withItemContext } = createRecipeContext(extendedActionSheetItem);
-const withStateProps = createWithStateProps([useDialogContext]);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetRootProps
-  extends ExtendedActionSheetVariantProps,
-    DialogPrimitive.RootProps {
-  /**
-   * @default true
-   */
-  lazyMount?: DialogPrimitive.RootProps["lazyMount"];
-  /**
-   * @default true
-   */
-  unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
-}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetRoot = withRootProvider<ExtendedActionSheetRootProps>(
-  DialogPrimitive.Root,
-  {
-    defaultProps: {
-      lazyMount: true,
-      unmountOnExit: true,
-    },
-  },
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetTrigger = DialogPrimitive.Trigger;
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetPositioner = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetPositionerProps
->(DialogPrimitive.Positioner, "positioner");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetBackdrop = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetBackdropProps
->(DialogPrimitive.Backdrop, "backdrop");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetContentProps extends DialogPrimitive.ContentProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetContent = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetContentProps
->(DialogPrimitive.Content, "content");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetHeaderProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetHeader = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetHeaderProps
->(withStateProps(Primitive.div), "header");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetTitleProps extends DialogPrimitive.TitleProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetTitle = withContext<
-  HTMLHeadingElement,
-  ExtendedActionSheetTitleProps
->(withStateProps(Primitive.h2), "title");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetListProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetList = withContext<HTMLDivElement, ExtendedActionSheetListProps>(
-  withStateProps(Primitive.div),
-  "list",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetGroup = withContext<HTMLDivElement, ExtendedActionSheetGroupProps>(
-  withStateProps(Primitive.div),
-  "group",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetItemProps
-  extends PrimitiveProps,
-    ExtendedActionSheetItemVariantProps,
-    React.HTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetItem = withItemContext<
-  HTMLButtonElement,
-  ExtendedActionSheetItemProps
->(withStateProps(Primitive.button));
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetFooterProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetFooter = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetFooterProps
->(withStateProps(Primitive.div), "footer");
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export interface ExtendedActionSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
-
-/**
- * @deprecated Use `SwipeableMenuSheet` instead.
- */
-export const ExtendedActionSheetCloseButton = withContext<
-  HTMLDivElement,
-  ExtendedActionSheetCloseButtonProps
->(DialogPrimitive.CloseButton, "closeButton");

package/src/components/ExtendedActionSheet/index.ts

@@ -1,28 +0,0 @@
-export {
-  ExtendedActionSheetBackdrop,
-  ExtendedActionSheetPositioner,
-  ExtendedActionSheetContent,
-  ExtendedActionSheetFooter,
-  ExtendedActionSheetHeader,
-  ExtendedActionSheetRoot,
-  ExtendedActionSheetTitle,
-  ExtendedActionSheetTrigger,
-  ExtendedActionSheetList,
-  ExtendedActionSheetGroup,
-  ExtendedActionSheetItem,
-  ExtendedActionSheetCloseButton,
-  type ExtendedActionSheetBackdropProps,
-  type ExtendedActionSheetPositionerProps,
-  type ExtendedActionSheetContentProps,
-  type ExtendedActionSheetFooterProps,
-  type ExtendedActionSheetHeaderProps,
-  type ExtendedActionSheetRootProps,
-  type ExtendedActionSheetTitleProps,
-  type ExtendedActionSheetTriggerProps,
-  type ExtendedActionSheetListProps,
-  type ExtendedActionSheetGroupProps,
-  type ExtendedActionSheetItemProps,
-  type ExtendedActionSheetCloseButtonProps,
-} from "./ExtendedActionSheet";
-
-export * as ExtendedActionSheet from "./ExtendedActionSheet.namespace";

package/src/components/ExtendedFab/ExtendedFab.tsx

@@ -1,25 +0,0 @@
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { extendedFab, type ExtendedFabVariantProps } from "@seed-design/css/recipes/extended-fab";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-
-const { withContext } = createRecipeContext(extendedFab);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `ContextualFloatingButton` instead.
- */
-export interface ExtendedFabProps
-  extends ExtendedFabVariantProps,
-    PrimitiveProps,
-    React.ButtonHTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated Use `ContextualFloatingButton` instead.
- */
-export const ExtendedFab = withContext<HTMLButtonElement, ExtendedFabProps>(Primitive.button, {
-  defaultProps: {
-    variant: "neutralSolid",
-    size: "medium",
-  },
-});

package/src/components/ExtendedFab/index.ts

@@ -1,4 +0,0 @@
-export {
-  ExtendedFab,
-  type ExtendedFabProps,
-} from "./ExtendedFab";

package/src/components/Fab/Fab.tsx

@@ -1,21 +0,0 @@
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { fab, type FabVariantProps } from "@seed-design/css/recipes/fab";
-import type * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-
-const { withContext } = createRecipeContext(fab);
-
-////////////////////////////////////////////////////////////////////////////////////
-
-/**
- * @deprecated Use `ContextualFloatingButton` instead.
- */
-export interface FabProps
-  extends FabVariantProps,
-    PrimitiveProps,
-    React.ButtonHTMLAttributes<HTMLButtonElement> {}
-
-/**
- * @deprecated Use `ContextualFloatingButton` instead.
- */
-export const Fab = withContext<HTMLButtonElement, FabProps>(Primitive.button);

package/src/components/Fab/index.ts

@@ -1,4 +0,0 @@
-export {
-  Fab,
-  type FabProps,
-} from "./Fab";

package/src/components/Inline/Inline.tsx

@@ -1,25 +0,0 @@
-import * as React from "react";
-import type { DistributiveOmit } from "../../utils/styled";
-import { Box, type BoxProps } from "../Box/Box";
-
-/**
- * @deprecated Use `HStack` instead.
- */
-export type InlineProps = DistributiveOmit<BoxProps, "display" | "direction" | "flexWrap">;
-
-/**
- * @deprecated Use `HStack` instead.
- */
-export const Inline = React.forwardRef<HTMLDivElement, InlineProps>((props, ref) => {
-  return (
-    <Box
-      ref={ref}
-      display="flex"
-      flexDirection="row"
-      flexWrap="wrap"
-      alignItems="flex-start"
-      justifyContent="flex-start"
-      {...props}
-    />
-  );
-});