visits-style 1.4.3 → 1.4.4

package/dist/components/Modal/index.d.ts

@@ -22,6 +22,11 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
      * @default '0.85rem'
      */
     padding?: string;
+    /**
+     * モーダルの縦並びを設定します。
+     * @default 'center'
+     */
+    verticalAlign?: 'start' | 'center' | 'end';
 }
-export default function Modal({ show, children, timeout, padding, closeModal, closeOnOverlay, closeOnEsc, onExited, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Modal({ show, children, timeout, padding, verticalAlign, closeModal, closeOnOverlay, closeOnEsc, onExited, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export declare const ModalContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("../../elements/Box").Props>>;

package/dist/index.cjs.js

@@ -853,6 +853,7 @@ function Modal({
   children,
   timeout = 200,
   padding = "0.85rem",
+  verticalAlign = "center",
   closeModal,
   closeOnOverlay,
   closeOnEsc,
@@ -903,7 +904,7 @@ function Modal({
   exitRef.current = onExited;
   return /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: isMounted ? /* @__PURE__ */ jsxRuntime.jsx(Overlay, { lockScroll: true, "data-testid": "vs-modal-overlay", onClick: handleOverlayClose, style: {
     padding
-  }, children: /* @__PURE__ */ jsxRuntime.jsx(Wrapper$2, { ref: refs.setFloating, role: "dialog", ...getFloatingProps({
+  }, $verticalAlign: verticalAlign, children: /* @__PURE__ */ jsxRuntime.jsx(Wrapper$2, { ref: refs.setFloating, role: "dialog", ...getFloatingProps({
     ...rest,
     style: styles,
     onClick: stopPropagation
@@ -912,7 +913,23 @@ function Modal({
 const Overlay = /* @__PURE__ */ styledComponents.styled(react.FloatingOverlay).withConfig({
   displayName: "Modal__Overlay",
   componentId: "sc-pb7lhx-0"
-})(["   display:flex;display:grid;place-items:center;align-items:center;justify-content:center;background:", ";z-index:9997;"], ({
+})(["   display:flex;display:grid;place-items:", ";align-items:", ";justify-content:center;background:", ";z-index:9997;"], ({
+  $verticalAlign
+}) => {
+  if ($verticalAlign === "start")
+    return "flex-start";
+  if ($verticalAlign === "end")
+    return "flex-end";
+  return "center";
+}, ({
+  $verticalAlign
+}) => {
+  if ($verticalAlign === "start")
+    return "flex-start";
+  if ($verticalAlign === "end")
+    return "flex-end";
+  return "center";
+}, ({
   theme
 }) => theme.backdrop);
 const Wrapper$2 = /* @__PURE__ */ styledComponents.styled.div.withConfig({
@@ -1014,7 +1031,7 @@ function Toast({
 const ToastList = /* @__PURE__ */ styledComponents.styled.ul.withConfig({
   displayName: "Toast__ToastList",
   componentId: "sc-8192b2-0"
-})(["display:flex;flex-direction:column;z-index:9999;pointer-events:none;overflow:hidden;li + li{margin-top:", ";}"], ({
+})(["display:flex;flex-direction:column;z-index:9999;overflow:hidden;li + li{margin-top:", ";}"], ({
   $space
 }) => $space);
 

package/dist/index.es.js

@@ -845,6 +845,7 @@ function Modal({
   children,
   timeout = 200,
   padding = "0.85rem",
+  verticalAlign = "center",
   closeModal,
   closeOnOverlay,
   closeOnEsc,
@@ -895,7 +896,7 @@ function Modal({
   exitRef.current = onExited;
   return /* @__PURE__ */ jsx(Portal$1, { children: isMounted ? /* @__PURE__ */ jsx(Overlay, { lockScroll: true, "data-testid": "vs-modal-overlay", onClick: handleOverlayClose, style: {
     padding
-  }, children: /* @__PURE__ */ jsx(Wrapper$2, { ref: refs.setFloating, role: "dialog", ...getFloatingProps({
+  }, $verticalAlign: verticalAlign, children: /* @__PURE__ */ jsx(Wrapper$2, { ref: refs.setFloating, role: "dialog", ...getFloatingProps({
     ...rest,
     style: styles,
     onClick: stopPropagation
@@ -904,7 +905,23 @@ function Modal({
 const Overlay = /* @__PURE__ */ styled(FloatingOverlay).withConfig({
   displayName: "Modal__Overlay",
   componentId: "sc-pb7lhx-0"
-})(["   display:flex;display:grid;place-items:center;align-items:center;justify-content:center;background:", ";z-index:9997;"], ({
+})(["   display:flex;display:grid;place-items:", ";align-items:", ";justify-content:center;background:", ";z-index:9997;"], ({
+  $verticalAlign
+}) => {
+  if ($verticalAlign === "start")
+    return "flex-start";
+  if ($verticalAlign === "end")
+    return "flex-end";
+  return "center";
+}, ({
+  $verticalAlign
+}) => {
+  if ($verticalAlign === "start")
+    return "flex-start";
+  if ($verticalAlign === "end")
+    return "flex-end";
+  return "center";
+}, ({
   theme
 }) => theme.backdrop);
 const Wrapper$2 = /* @__PURE__ */ styled.div.withConfig({
@@ -1006,7 +1023,7 @@ function Toast({
 const ToastList = /* @__PURE__ */ styled.ul.withConfig({
   displayName: "Toast__ToastList",
   componentId: "sc-8192b2-0"
-})(["display:flex;flex-direction:column;z-index:9999;pointer-events:none;overflow:hidden;li + li{margin-top:", ";}"], ({
+})(["display:flex;flex-direction:column;z-index:9999;overflow:hidden;li + li{margin-top:", ";}"], ({
   $space
 }) => $space);
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "visits-style",
   "repository": "https://github.com/visits-works/visits-style",
   "homepage": "https://github.com/visits-works/visits-style",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",