@rovula/ui 0.0.33 → 0.0.35

package/dist/esm/types/components/Dialog/Dialog.d.ts

@@ -5,7 +5,10 @@ declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.Dia
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showCloseButton?: boolean | undefined;
+    closeButtonClassName?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/esm/types/icons/material-icon/outline/AlignVerticalBottom.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const AlignVerticalBottom: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default AlignVerticalBottom;

package/dist/esm/types/icons/material-icon/outline/AlignVerticalTop.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const AlignVerticalTop: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default AlignVerticalTop;

package/dist/esm/types/icons/material-icon/outline/VerticalDistribute.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const VerticalDistribute: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default VerticalDistribute;

package/dist/esm/types/icons/material-icon/outline/index.d.ts

@@ -20,3 +20,6 @@ export { default as FormatAlignJustifyIcon } from "./FormatAlignJustifyIcon";
 export { default as FormatListBulletedIcon } from "./FormatListBulletedIcon";
 export { default as FormatListNumberedIcon } from "./FormatListNumberedIcon";
 export { default as AllOutIcon } from "./AllOutIcon";
+export { default as AlignVerticalTop } from "./AlignVerticalTop";
+export { default as VerticalDistribute } from "./VerticalDistribute";
+export { default as AlignVerticalBottom } from "./AlignVerticalBottom";

package/dist/esm/types/icons/material-icon/solid/AlignVerticalBottom.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const AlignVerticalBottom: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default AlignVerticalBottom;

package/dist/esm/types/icons/material-icon/solid/AlignVerticalTop.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const AlignVerticalTop: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default AlignVerticalTop;

package/dist/esm/types/icons/material-icon/solid/VerticalDistribute.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const VerticalDistribute: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default VerticalDistribute;

package/dist/esm/types/icons/material-icon/solid/index.d.ts

@@ -20,3 +20,6 @@ export { default as FormatAlignJustifyIcon } from "./FormatAlignJustifyIcon";
 export { default as FormatListBulletedIcon } from "./FormatListBulletedIcon";
 export { default as FormatListNumberedIcon } from "./FormatListNumberedIcon";
 export { default as AllOutIcon } from "./AllOutIcon";
+export { default as AlignVerticalTop } from "./AlignVerticalTop";
+export { default as VerticalDistribute } from "./VerticalDistribute";
+export { default as AlignVerticalBottom } from "./AlignVerticalBottom";

package/dist/icons/material-icon/outline/AlignVerticalBottom.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const AlignVerticalBottom = (props) => (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none" }, props, { children: _jsx("path", { fill: "#5F6368", d: "M4.436 19.995a.627.627 0 0 1-.462-.186.627.627 0 0 1-.186-.462c0-.184.062-.338.186-.462a.627.627 0 0 1 .462-.186h15.128c.184 0 .338.062.462.186a.627.627 0 0 1 .186.462.627.627 0 0 1-.186.462.627.627 0 0 1-.462.186H4.436Zm4.63-3.275c-.3 0-.556-.106-.769-.32a1.048 1.048 0 0 1-.32-.768V5.084c0-.3.107-.555.32-.769.213-.213.47-.32.769-.32.3 0 .556.107.769.32.213.214.32.47.32.769v10.548c0 .299-.107.555-.32.768-.213.214-.47.32-.769.32Zm5.868 0c-.3 0-.555-.106-.769-.32a1.049 1.049 0 0 1-.32-.768V10.27c0-.3.107-.556.32-.77.214-.213.47-.32.77-.32.298 0 .555.107.768.32.213.214.32.47.32.77v5.36c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32Z" }) })));
+export default AlignVerticalBottom;

package/dist/icons/material-icon/outline/AlignVerticalTop.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const AlignVerticalTop = (props) => (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props, { children: _jsx("path", { fill: "#5F6368", d: "M9.066 19.995c-.3 0-.556-.106-.769-.32a1.049 1.049 0 0 1-.32-.769V8.36c0-.3.107-.556.32-.77.213-.212.47-.319.769-.319.3 0 .556.107.769.32.213.213.32.47.32.769v10.547c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32Zm5.868-5.186c-.3 0-.555-.107-.769-.32a1.049 1.049 0 0 1-.32-.77V8.36c0-.3.107-.556.32-.77.214-.212.47-.319.77-.319.298 0 .555.107.768.32.213.213.32.47.32.769v5.36c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32ZM4.436 5.292a.627.627 0 0 1-.462-.186.627.627 0 0 1-.186-.462c0-.184.062-.339.186-.463a.627.627 0 0 1 .462-.186h15.128c.184 0 .338.062.462.186a.628.628 0 0 1 .186.463.627.627 0 0 1-.186.462.627.627 0 0 1-.462.186H4.436Z" }) })));
+export default AlignVerticalTop;

package/dist/icons/material-icon/outline/VerticalDistribute.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const VerticalDistribute = (props) => (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props, { children: _jsx("path", { fill: "#5F6368", d: "M4.632 20a.61.61 0 0 1-.45-.182.611.611 0 0 1-.182-.45c0-.179.06-.329.182-.45a.61.61 0 0 1 .45-.181h14.736a.61.61 0 0 1 .45.182.611.611 0 0 1 .182.45c0 .179-.06.329-.182.45a.61.61 0 0 1-.45.181H4.632Zm4.42-6.947c-.292 0-.54-.103-.745-.307A1.014 1.014 0 0 1 8 12c0-.292.102-.54.307-.746.205-.205.453-.308.746-.308h5.894c.293 0 .541.103.746.307.205.205.307.453.307.745s-.102.54-.307.746a1.014 1.014 0 0 1-.746.308H9.053Zm-4.42-7.79a.61.61 0 0 1-.45-.182.611.611 0 0 1-.182-.45c0-.179.06-.329.182-.45A.611.611 0 0 1 4.632 4h14.736a.61.61 0 0 1 .45.182.611.611 0 0 1 .182.45c0 .179-.06.329-.182.45a.61.61 0 0 1-.45.181H4.632Z" }) })));
+export default VerticalDistribute;

package/dist/icons/material-icon/outline/index.js

@@ -20,3 +20,6 @@ export { default as FormatAlignJustifyIcon } from "./FormatAlignJustifyIcon";
 export { default as FormatListBulletedIcon } from "./FormatListBulletedIcon";
 export { default as FormatListNumberedIcon } from "./FormatListNumberedIcon";
 export { default as AllOutIcon } from "./AllOutIcon";
+export { default as AlignVerticalTop } from "./AlignVerticalTop";
+export { default as VerticalDistribute } from "./VerticalDistribute";
+export { default as AlignVerticalBottom } from "./AlignVerticalBottom";

package/dist/icons/material-icon/solid/AlignVerticalBottom.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const AlignVerticalBottom = (props) => (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none" }, props, { children: _jsx("path", { fill: "#5F6368", d: "M4.436 19.995a.627.627 0 0 1-.462-.186.627.627 0 0 1-.186-.462c0-.184.062-.338.186-.462a.627.627 0 0 1 .462-.186h15.128c.184 0 .338.062.462.186a.627.627 0 0 1 .186.462.627.627 0 0 1-.186.462.627.627 0 0 1-.462.186H4.436Zm4.63-3.275c-.3 0-.556-.106-.769-.32a1.048 1.048 0 0 1-.32-.768V5.084c0-.3.107-.555.32-.769.213-.213.47-.32.769-.32.3 0 .556.107.769.32.213.214.32.47.32.769v10.548c0 .299-.107.555-.32.768-.213.214-.47.32-.769.32Zm5.868 0c-.3 0-.555-.106-.769-.32a1.049 1.049 0 0 1-.32-.768V10.27c0-.3.107-.556.32-.77.214-.213.47-.32.77-.32.298 0 .555.107.768.32.213.214.32.47.32.77v5.36c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32Z" }) })));
+export default AlignVerticalBottom;

package/dist/icons/material-icon/solid/AlignVerticalTop.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const AlignVerticalTop = (props) => (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props, { children: _jsx("path", { fill: "#5F6368", d: "M9.066 19.995c-.3 0-.556-.106-.769-.32a1.049 1.049 0 0 1-.32-.769V8.36c0-.3.107-.556.32-.77.213-.212.47-.319.769-.319.3 0 .556.107.769.32.213.213.32.47.32.769v10.547c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32Zm5.868-5.186c-.3 0-.555-.107-.769-.32a1.049 1.049 0 0 1-.32-.77V8.36c0-.3.107-.556.32-.77.214-.212.47-.319.77-.319.298 0 .555.107.768.32.213.213.32.47.32.769v5.36c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32ZM4.436 5.292a.627.627 0 0 1-.462-.186.627.627 0 0 1-.186-.462c0-.184.062-.339.186-.463a.627.627 0 0 1 .462-.186h15.128c.184 0 .338.062.462.186a.628.628 0 0 1 .186.463.627.627 0 0 1-.186.462.627.627 0 0 1-.462.186H4.436Z" }) })));
+export default AlignVerticalTop;

package/dist/icons/material-icon/solid/VerticalDistribute.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const VerticalDistribute = (props) => (_jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props, { children: _jsx("path", { fill: "#5F6368", d: "M4.632 20a.61.61 0 0 1-.45-.182.611.611 0 0 1-.182-.45c0-.179.06-.329.182-.45a.61.61 0 0 1 .45-.181h14.736a.61.61 0 0 1 .45.182.611.611 0 0 1 .182.45c0 .179-.06.329-.182.45a.61.61 0 0 1-.45.181H4.632Zm4.42-6.947c-.292 0-.54-.103-.745-.307A1.014 1.014 0 0 1 8 12c0-.292.102-.54.307-.746.205-.205.453-.308.746-.308h5.894c.293 0 .541.103.746.307.205.205.307.453.307.745s-.102.54-.307.746a1.014 1.014 0 0 1-.746.308H9.053Zm-4.42-7.79a.61.61 0 0 1-.45-.182.611.611 0 0 1-.182-.45c0-.179.06-.329.182-.45A.611.611 0 0 1 4.632 4h14.736a.61.61 0 0 1 .45.182.611.611 0 0 1 .182.45c0 .179-.06.329-.182.45a.61.61 0 0 1-.45.181H4.632Z" }) })));
+export default VerticalDistribute;

package/dist/icons/material-icon/solid/index.js

@@ -20,3 +20,6 @@ export { default as FormatAlignJustifyIcon } from "./FormatAlignJustifyIcon";
 export { default as FormatListBulletedIcon } from "./FormatListBulletedIcon";
 export { default as FormatListNumberedIcon } from "./FormatListNumberedIcon";
 export { default as AllOutIcon } from "./AllOutIcon";
+export { default as AlignVerticalTop } from "./AlignVerticalTop";
+export { default as VerticalDistribute } from "./VerticalDistribute";
+export { default as AlignVerticalBottom } from "./AlignVerticalBottom";

package/dist/index.d.ts

@@ -370,7 +370,10 @@ declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.Dia
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showCloseButton?: boolean | undefined;
+    closeButtonClassName?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
     displayName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -16,7 +16,8 @@
     "storybook:serve-css": "npx tailwindcss -i ./src/theme/global.css -o ./dist/src/theme/global.css",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_cee098dd3b9b3ee"
+    "chromatic": "npx chromatic --project-token=chpt_cee098dd3b9b3ee",
+    "deploy-storybook": "npx wrangler pages deploy storybook-static --project-name=rovula-ui --branch=main"
   },
   "files": [
     "dist/**/*",

package/src/components/Dialog/Dialog.tsx

@@ -31,26 +31,47 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base-popup bg-base-popup p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-primary-foreground">
-        <XMarkIcon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    closeButtonClassName?: string;
+  }
+>(
+  (
+    {
+      className,
+      children,
+      showCloseButton = false,
+      closeButtonClassName,
+      ...props
+    },
+    ref
+  ) => (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base-popup bg-base-popup p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            className={cn(
+              "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-primary-foreground",
+              closeButtonClassName
+            )}
+          >
+            <XMarkIcon className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({

package/src/components/Icon/Icon.stories.tsx

@@ -400,6 +400,9 @@ export const PreviewMaterialIcon = {
       "format-list-bulleted",
       "format-list-numbered",
       "all-out",
+      "align-vertical-top",
+      "vertical-distribute",
+      "align-vertical-bottom",
     ];
 
     return (

package/src/icons/material-icon/outline/AlignVerticalBottom.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AlignVerticalBottom = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#5F6368"
+      d="M4.436 19.995a.627.627 0 0 1-.462-.186.627.627 0 0 1-.186-.462c0-.184.062-.338.186-.462a.627.627 0 0 1 .462-.186h15.128c.184 0 .338.062.462.186a.627.627 0 0 1 .186.462.627.627 0 0 1-.186.462.627.627 0 0 1-.462.186H4.436Zm4.63-3.275c-.3 0-.556-.106-.769-.32a1.048 1.048 0 0 1-.32-.768V5.084c0-.3.107-.555.32-.769.213-.213.47-.32.769-.32.3 0 .556.107.769.32.213.214.32.47.32.769v10.548c0 .299-.107.555-.32.768-.213.214-.47.32-.769.32Zm5.868 0c-.3 0-.555-.106-.769-.32a1.049 1.049 0 0 1-.32-.768V10.27c0-.3.107-.556.32-.77.214-.213.47-.32.77-.32.298 0 .555.107.768.32.213.214.32.47.32.77v5.36c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32Z"
+    />
+  </svg>
+);
+
+export default AlignVerticalBottom;

package/src/icons/material-icon/outline/AlignVerticalTop.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AlignVerticalTop = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#5F6368"
+      d="M9.066 19.995c-.3 0-.556-.106-.769-.32a1.049 1.049 0 0 1-.32-.769V8.36c0-.3.107-.556.32-.77.213-.212.47-.319.769-.319.3 0 .556.107.769.32.213.213.32.47.32.769v10.547c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32Zm5.868-5.186c-.3 0-.555-.107-.769-.32a1.049 1.049 0 0 1-.32-.77V8.36c0-.3.107-.556.32-.77.214-.212.47-.319.77-.319.298 0 .555.107.768.32.213.213.32.47.32.769v5.36c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32ZM4.436 5.292a.627.627 0 0 1-.462-.186.627.627 0 0 1-.186-.462c0-.184.062-.339.186-.463a.627.627 0 0 1 .462-.186h15.128c.184 0 .338.062.462.186a.628.628 0 0 1 .186.463.627.627 0 0 1-.186.462.627.627 0 0 1-.462.186H4.436Z"
+    />
+  </svg>
+);
+
+export default AlignVerticalTop;

package/src/icons/material-icon/outline/VerticalDistribute.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const VerticalDistribute = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#5F6368"
+      d="M4.632 20a.61.61 0 0 1-.45-.182.611.611 0 0 1-.182-.45c0-.179.06-.329.182-.45a.61.61 0 0 1 .45-.181h14.736a.61.61 0 0 1 .45.182.611.611 0 0 1 .182.45c0 .179-.06.329-.182.45a.61.61 0 0 1-.45.181H4.632Zm4.42-6.947c-.292 0-.54-.103-.745-.307A1.014 1.014 0 0 1 8 12c0-.292.102-.54.307-.746.205-.205.453-.308.746-.308h5.894c.293 0 .541.103.746.307.205.205.307.453.307.745s-.102.54-.307.746a1.014 1.014 0 0 1-.746.308H9.053Zm-4.42-7.79a.61.61 0 0 1-.45-.182.611.611 0 0 1-.182-.45c0-.179.06-.329.182-.45A.611.611 0 0 1 4.632 4h14.736a.61.61 0 0 1 .45.182.611.611 0 0 1 .182.45c0 .179-.06.329-.182.45a.61.61 0 0 1-.45.181H4.632Z"
+    />
+  </svg>
+);
+export default VerticalDistribute;

package/src/icons/material-icon/outline/index.ts

@@ -20,3 +20,6 @@ export { default as FormatAlignJustifyIcon } from "./FormatAlignJustifyIcon";
 export { default as FormatListBulletedIcon } from "./FormatListBulletedIcon";
 export { default as FormatListNumberedIcon } from "./FormatListNumberedIcon";
 export { default as AllOutIcon } from "./AllOutIcon";
+export { default as AlignVerticalTop } from "./AlignVerticalTop";
+export { default as VerticalDistribute } from "./VerticalDistribute";
+export { default as AlignVerticalBottom } from "./AlignVerticalBottom";

package/src/icons/material-icon/solid/AlignVerticalBottom.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AlignVerticalBottom = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#5F6368"
+      d="M4.436 19.995a.627.627 0 0 1-.462-.186.627.627 0 0 1-.186-.462c0-.184.062-.338.186-.462a.627.627 0 0 1 .462-.186h15.128c.184 0 .338.062.462.186a.627.627 0 0 1 .186.462.627.627 0 0 1-.186.462.627.627 0 0 1-.462.186H4.436Zm4.63-3.275c-.3 0-.556-.106-.769-.32a1.048 1.048 0 0 1-.32-.768V5.084c0-.3.107-.555.32-.769.213-.213.47-.32.769-.32.3 0 .556.107.769.32.213.214.32.47.32.769v10.548c0 .299-.107.555-.32.768-.213.214-.47.32-.769.32Zm5.868 0c-.3 0-.555-.106-.769-.32a1.049 1.049 0 0 1-.32-.768V10.27c0-.3.107-.556.32-.77.214-.213.47-.32.77-.32.298 0 .555.107.768.32.213.214.32.47.32.77v5.36c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32Z"
+    />
+  </svg>
+);
+
+export default AlignVerticalBottom;

package/src/icons/material-icon/solid/AlignVerticalTop.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AlignVerticalTop = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#5F6368"
+      d="M9.066 19.995c-.3 0-.556-.106-.769-.32a1.049 1.049 0 0 1-.32-.769V8.36c0-.3.107-.556.32-.77.213-.212.47-.319.769-.319.3 0 .556.107.769.32.213.213.32.47.32.769v10.547c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32Zm5.868-5.186c-.3 0-.555-.107-.769-.32a1.049 1.049 0 0 1-.32-.77V8.36c0-.3.107-.556.32-.77.214-.212.47-.319.77-.319.298 0 .555.107.768.32.213.213.32.47.32.769v5.36c0 .3-.107.556-.32.77-.213.213-.47.32-.769.32ZM4.436 5.292a.627.627 0 0 1-.462-.186.627.627 0 0 1-.186-.462c0-.184.062-.339.186-.463a.627.627 0 0 1 .462-.186h15.128c.184 0 .338.062.462.186a.628.628 0 0 1 .186.463.627.627 0 0 1-.186.462.627.627 0 0 1-.462.186H4.436Z"
+    />
+  </svg>
+);
+
+export default AlignVerticalTop;

package/src/icons/material-icon/solid/VerticalDistribute.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const VerticalDistribute = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#5F6368"
+      d="M4.632 20a.61.61 0 0 1-.45-.182.611.611 0 0 1-.182-.45c0-.179.06-.329.182-.45a.61.61 0 0 1 .45-.181h14.736a.61.61 0 0 1 .45.182.611.611 0 0 1 .182.45c0 .179-.06.329-.182.45a.61.61 0 0 1-.45.181H4.632Zm4.42-6.947c-.292 0-.54-.103-.745-.307A1.014 1.014 0 0 1 8 12c0-.292.102-.54.307-.746.205-.205.453-.308.746-.308h5.894c.293 0 .541.103.746.307.205.205.307.453.307.745s-.102.54-.307.746a1.014 1.014 0 0 1-.746.308H9.053Zm-4.42-7.79a.61.61 0 0 1-.45-.182.611.611 0 0 1-.182-.45c0-.179.06-.329.182-.45A.611.611 0 0 1 4.632 4h14.736a.61.61 0 0 1 .45.182.611.611 0 0 1 .182.45c0 .179-.06.329-.182.45a.61.61 0 0 1-.45.181H4.632Z"
+    />
+  </svg>
+);
+export default VerticalDistribute;

package/src/icons/material-icon/solid/index.ts

@@ -20,3 +20,6 @@ export { default as FormatAlignJustifyIcon } from "./FormatAlignJustifyIcon";
 export { default as FormatListBulletedIcon } from "./FormatListBulletedIcon";
 export { default as FormatListNumberedIcon } from "./FormatListNumberedIcon";
 export { default as AllOutIcon } from "./AllOutIcon";
+export { default as AlignVerticalTop } from "./AlignVerticalTop";
+export { default as VerticalDistribute } from "./VerticalDistribute";
+export { default as AlignVerticalBottom } from "./AlignVerticalBottom";