visits-style 1.4.2 → 1.4.4

package/README.md

@@ -20,8 +20,8 @@ yarn add react react-dom styled-components visits-style
 ```
 
 ## Dependencies
-- React, React-dom(^18.0.0)
-- styled-components(^5.0.0)
+- React, React-dom(^18.2.0)
+- styled-components(^6.0.2)
 
 ## Example
 
@@ -47,4 +47,4 @@ root.render(<App />);
 
 ## Docs
 
-- [ドキュメント](https://visits-works.github.io/visits-style/storybook)
+- [ドキュメント](https://visits-works.github.io/visits-style)

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/components/Toast/index.d.ts

@@ -1,2 +1,2 @@
 import type { ToastContainerProps } from './types';
-export default function Toast({ toasts, clear, fixed, margin, position }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;
+export default function Toast({ toasts, clear, fixed, margin, position, space }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Toast/types.d.ts

@@ -34,6 +34,11 @@ export interface ToastContainerProps {
      * @default '16px'
      */
     margin?: string;
+    /**
+     * toast間の間隔
+     * @default '16px'
+     */
+    space?: string;
     /** スクロールしても固定として表示する */
     fixed?: boolean;
 }

package/dist/forms/Checkbox/index.d.ts

@@ -1,8 +1,8 @@
 import React, { InputHTMLAttributes } from 'react';
 export interface Props extends InputHTMLAttributes<HTMLInputElement> {
-    children?: any;
+    children?: React.ReactNode;
     checked?: boolean;
     indeterminate?: boolean;
 }
-declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement | null>>;
+declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/dist/forms/HelpMessage.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 interface Props {
-    help?: string;
-    error?: string;
+    help?: ReactNode;
+    error?: ReactNode;
     noErrorMessage?: boolean;
 }
 export default function HelpMessage({ help, error, noErrorMessage }: Props): import("react/jsx-runtime").JSX.Element | null;

package/dist/forms/Radio/index.d.ts

@@ -4,5 +4,5 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
     children?: any;
     checked?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
-export default _default;
+declare const Radio: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export default Radio;

package/dist/forms/Select/index.d.ts

@@ -1,4 +1,4 @@
-import React, { SelectHTMLAttributes } from 'react';
+import React, { SelectHTMLAttributes, ReactNode } from 'react';
 import { SizeType } from '../../types';
 type ItemType = {
     id: string | number;
@@ -11,9 +11,9 @@ export interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
     options: ItemType[];
     outline?: boolean;
     /** エラーの発生時の表示テキスト */
-    error?: string | any;
+    error?: ReactNode;
     /** 捕捉テキスト */
-    help?: string | any;
+    help?: ReactNode;
     /** selectのサイズ */
     inputSize?: SizeType;
     /** optionのカスタムrender */
@@ -23,5 +23,5 @@ export interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
     /** エラーが発生しても、エラーメッセージを出さないようにする */
     noErrorMessage?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
-export default _default;
+declare const Select: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/dist/forms/TextInput/index.d.ts

@@ -6,9 +6,9 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
      */
     type?: 'text' | 'number' | 'password' | 'email' | 'tel' | 'search';
     /** エラーの発生時の表示テキスト */
-    error?: string;
+    error?: React.ReactNode;
     /** 捕捉テキスト */
-    help?: string;
+    help?: React.ReactNode;
     /** ボックス系のデザインでする */
     outline?: boolean;
     /** 左側のアイコン */

package/dist/forms/Textarea/index.d.ts

@@ -1,9 +1,9 @@
 import React, { TextareaHTMLAttributes } from 'react';
 export interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     /** エラーの発生時の表示テキスト */
-    error?: string | any;
+    error?: React.ReactNode;
     /** 捕捉テキスト */
-    help?: string | any;
+    help?: React.ReactNode;
     /** エラーが発生しても、エラーメッセージを出さないようにする */
     noErrorMessage?: boolean;
 }

package/dist/index.cjs.js

@@ -32,10 +32,10 @@ function Field({
   ...rest
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$6, { ...rest, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("i", { children: "*" })
-    ] }),
+    ] }) : null,
     children
   ] });
 }
@@ -151,9 +151,9 @@ const TextInput = React.forwardRef(({
   maxLength = 255,
   noErrorMessage,
   ...rest
-}, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$5, { className, outline, error, style, disabled: rest.disabled, children: [
+}, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$5, { className, outline, error: !!error, style, disabled: rest.disabled, children: [
   leftIcon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: leftIcon2 }),
-  rightIcon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon, { right: true, children: rightIcon2 }),
+  rightIcon2 && /* @__PURE__ */ jsxRuntime.jsx(Icon, { $right: true, children: rightIcon2 }),
   /* @__PURE__ */ jsxRuntime.jsx("input", { type, maxLength, ref, ...rest }),
   /* @__PURE__ */ jsxRuntime.jsx(HelpMessage, { help, error, noErrorMessage })
 ] }));
@@ -167,9 +167,14 @@ const Icon = /* @__PURE__ */ styledComponents.styled.span.withConfig({
 })(["position:absolute;top:0.375em;bottom:0;z-index:1;color:", ";", " svg,img{height:1em;width:1em;}"], ({
   theme
 }) => theme.border, ({
-  right
-}) => right ? rightIcon : leftIcon);
+  $right
+}) => $right ? rightIcon : leftIcon);
+function shouldForwardProp$7(name) {
+  return name !== "outline" && name !== "error" && name !== "disabled";
+}
 const Wrapper$5 = /* @__PURE__ */ styledComponents.styled.span.withConfig({
+  shouldForwardProp: shouldForwardProp$7
+}).withConfig({
   displayName: "TextInput__Wrapper",
   componentId: "sc-1myda3q-1"
 })(["position:relative;display:block;input{max-width:100%;width:100%;height:100%;position:relative;display:block;outline:none;box-shadow:none;appearance:none;text-align:left;color:inherit;padding:", ";border:1px solid ", ";", " ", " transition-property:box-shadow;transition-duration:150ms;transition-timing-function:ease-in-out;&:focus{border-color:", ";box-shadow:", ";}&:disabled,[disabled]{resize:none;}&::placeholder{color:", ";}}&:hover{input:not(:disabled):not(:focus):not(:active){border-color:", ";}", "{color:", ";}}", ""], ({
@@ -276,7 +281,7 @@ const Checkbox = React.forwardRef(({
   React.useImperativeHandle(ref, () => innerRef.current);
   useIsomorphicLayoutEffect(() => {
     if (innerRef.current) {
-      innerRef.current.indeterminate = indeterminate;
+      innerRef.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$4, { className, children: [
@@ -320,7 +325,7 @@ function ChevronDown(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.6 0L6 4.6 1.4 0 0 1.4l6 6 6-6L10.6 0z", fill: "currentColor" }) });
 }
 
-function Select({
+const Select = React.forwardRef(({
   options = [],
   placeholder,
   render,
@@ -331,20 +336,20 @@ function Select({
   outline,
   optional,
   noErrorMessage,
-  innerRef,
   ...rest
-}) {
+}, ref) => {
   const list = React.useMemo(() => options.map((item) => typeof item === "string" ? /* @__PURE__ */ jsxRuntime.jsx("option", { value: item, children: render ? render(item) : item }, item) : /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.id, children: render ? render(item.name) : item.name }, item.id)), [options, render]);
   return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper$1, { className, inputSize, outline, error: !!error, disabled: rest.disabled, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("select", { ...rest, ref: innerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("select", { ...rest, ref, children: [
       placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: !optional, children: placeholder }),
       list
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}),
     /* @__PURE__ */ jsxRuntime.jsx(HelpMessage, { help, error, noErrorMessage })
   ] });
-}
-const index$5 = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Select, { ...props, innerRef: ref }));
+});
+Select.displayName = "Select";
+const Select$1 = Select;
 function shouldForwardProp$5(name) {
   return name !== "error" && name !== "disabled" && name !== "inputSize" && name !== "outline";
 }
@@ -383,13 +388,12 @@ const InputWrapper$1 = /* @__PURE__ */ styledComponents.styled.span.withConfig({
   theme
 }) => disabled ? styledComponents.css(["select{", " border-style:dashed;}svg{display:none;}"], disabledColor(theme)) : void 0);
 
-function Radio({
+const Radio = React.forwardRef(({
   className,
   style,
   children,
-  innerRef,
   ...rest
-}) {
+}, ref) => {
   const id = `radio_${rest.name}_${rest.value}`;
   const innerClass = React.useMemo(() => {
     const arr = [];
@@ -404,10 +408,11 @@ function Radio({
       /* @__PURE__ */ jsxRuntime.jsx(Shape, { className: innerClass, children: /* @__PURE__ */ jsxRuntime.jsx("i", {}) }),
       children
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { id, type: "radio", ...rest, ref: innerRef })
+    /* @__PURE__ */ jsxRuntime.jsx("input", { id, type: "radio", ...rest, ref })
   ] });
-}
-const index$4 = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Radio, { ...props, innerRef: ref }));
+});
+Radio.displayName = "Radio";
+const Radio$1 = Radio;
 const Shape = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "Radio__Shape",
   componentId: "sc-13m0vd4-0"
@@ -848,6 +853,7 @@ function Modal({
   children,
   timeout = 200,
   padding = "0.85rem",
+  verticalAlign = "center",
   closeModal,
   closeOnOverlay,
   closeOnEsc,
@@ -898,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
@@ -907,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({
@@ -979,7 +1001,8 @@ function Toast({
   clear,
   fixed,
   margin = "16px",
-  position = "top-left"
+  position = "top-left",
+  space = "16px"
 }) {
   const style = React.useMemo(() => {
     const base = {
@@ -1003,12 +1026,14 @@ function Toast({
     }
     return base;
   }, [fixed, margin, position]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: /* @__PURE__ */ jsxRuntime.jsx(ToastList, { style, children: toasts.map((props) => /* @__PURE__ */ React.createElement(ToastItem, { ...props, key: props.id, clear })) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: /* @__PURE__ */ jsxRuntime.jsx(ToastList, { style, $space: space, children: toasts.map((props) => /* @__PURE__ */ React.createElement(ToastItem, { ...props, key: props.id, clear })) }) });
 }
 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:1rem;}"]);
+})(["display:flex;flex-direction:column;z-index:9999;overflow:hidden;li + li{margin-top:", ";}"], ({
+  $space
+}) => $space);
 
 function getColor$1({
   theme,
@@ -1483,9 +1508,9 @@ exports.Placeholder = index$2;
 exports.Popover = Popover$1;
 exports.Portal = Portal$1;
 exports.Progress = Progress;
-exports.Radio = index$4;
+exports.Radio = Radio$1;
 exports.Row = Row;
-exports.Select = index$5;
+exports.Select = Select$1;
 exports.Spinner = Spinner$1;
 exports.Switch = Switch$1;
 exports.Table = index$1;

package/dist/index.es.js

@@ -24,10 +24,10 @@ function Field({
   ...rest
 }) {
   return /* @__PURE__ */ jsxs(Wrapper$6, { ...rest, children: [
-    label && /* @__PURE__ */ jsxs(Label, { children: [
+    label ? /* @__PURE__ */ jsxs(Label, { children: [
       label,
       required && /* @__PURE__ */ jsx("i", { children: "*" })
-    ] }),
+    ] }) : null,
     children
   ] });
 }
@@ -143,9 +143,9 @@ const TextInput = forwardRef(({
   maxLength = 255,
   noErrorMessage,
   ...rest
-}, ref) => /* @__PURE__ */ jsxs(Wrapper$5, { className, outline, error, style, disabled: rest.disabled, children: [
+}, ref) => /* @__PURE__ */ jsxs(Wrapper$5, { className, outline, error: !!error, style, disabled: rest.disabled, children: [
   leftIcon2 && /* @__PURE__ */ jsx(Icon, { children: leftIcon2 }),
-  rightIcon2 && /* @__PURE__ */ jsx(Icon, { right: true, children: rightIcon2 }),
+  rightIcon2 && /* @__PURE__ */ jsx(Icon, { $right: true, children: rightIcon2 }),
   /* @__PURE__ */ jsx("input", { type, maxLength, ref, ...rest }),
   /* @__PURE__ */ jsx(HelpMessage, { help, error, noErrorMessage })
 ] }));
@@ -159,9 +159,14 @@ const Icon = /* @__PURE__ */ styled.span.withConfig({
 })(["position:absolute;top:0.375em;bottom:0;z-index:1;color:", ";", " svg,img{height:1em;width:1em;}"], ({
   theme
 }) => theme.border, ({
-  right
-}) => right ? rightIcon : leftIcon);
+  $right
+}) => $right ? rightIcon : leftIcon);
+function shouldForwardProp$7(name) {
+  return name !== "outline" && name !== "error" && name !== "disabled";
+}
 const Wrapper$5 = /* @__PURE__ */ styled.span.withConfig({
+  shouldForwardProp: shouldForwardProp$7
+}).withConfig({
   displayName: "TextInput__Wrapper",
   componentId: "sc-1myda3q-1"
 })(["position:relative;display:block;input{max-width:100%;width:100%;height:100%;position:relative;display:block;outline:none;box-shadow:none;appearance:none;text-align:left;color:inherit;padding:", ";border:1px solid ", ";", " ", " transition-property:box-shadow;transition-duration:150ms;transition-timing-function:ease-in-out;&:focus{border-color:", ";box-shadow:", ";}&:disabled,[disabled]{resize:none;}&::placeholder{color:", ";}}&:hover{input:not(:disabled):not(:focus):not(:active){border-color:", ";}", "{color:", ";}}", ""], ({
@@ -268,7 +273,7 @@ const Checkbox = forwardRef(({
   useImperativeHandle(ref, () => innerRef.current);
   useIsomorphicLayoutEffect(() => {
     if (innerRef.current) {
-      innerRef.current.indeterminate = indeterminate;
+      innerRef.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate]);
   return /* @__PURE__ */ jsxs(Wrapper$4, { className, children: [
@@ -312,7 +317,7 @@ function ChevronDown(props) {
   return /* @__PURE__ */ jsx("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M10.6 0L6 4.6 1.4 0 0 1.4l6 6 6-6L10.6 0z", fill: "currentColor" }) });
 }
 
-function Select({
+const Select = forwardRef(({
   options = [],
   placeholder,
   render,
@@ -323,20 +328,20 @@ function Select({
   outline,
   optional,
   noErrorMessage,
-  innerRef,
   ...rest
-}) {
+}, ref) => {
   const list = useMemo(() => options.map((item) => typeof item === "string" ? /* @__PURE__ */ jsx("option", { value: item, children: render ? render(item) : item }, item) : /* @__PURE__ */ jsx("option", { value: item.id, children: render ? render(item.name) : item.name }, item.id)), [options, render]);
   return /* @__PURE__ */ jsxs(InputWrapper$1, { className, inputSize, outline, error: !!error, disabled: rest.disabled, children: [
-    /* @__PURE__ */ jsxs("select", { ...rest, ref: innerRef, children: [
+    /* @__PURE__ */ jsxs("select", { ...rest, ref, children: [
       placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: !optional, children: placeholder }),
       list
     ] }),
     /* @__PURE__ */ jsx(ChevronDown, {}),
     /* @__PURE__ */ jsx(HelpMessage, { help, error, noErrorMessage })
   ] });
-}
-const index$5 = forwardRef((props, ref) => /* @__PURE__ */ jsx(Select, { ...props, innerRef: ref }));
+});
+Select.displayName = "Select";
+const Select$1 = Select;
 function shouldForwardProp$5(name) {
   return name !== "error" && name !== "disabled" && name !== "inputSize" && name !== "outline";
 }
@@ -375,13 +380,12 @@ const InputWrapper$1 = /* @__PURE__ */ styled.span.withConfig({
   theme
 }) => disabled ? css(["select{", " border-style:dashed;}svg{display:none;}"], disabledColor(theme)) : void 0);
 
-function Radio({
+const Radio = forwardRef(({
   className,
   style,
   children,
-  innerRef,
   ...rest
-}) {
+}, ref) => {
   const id = `radio_${rest.name}_${rest.value}`;
   const innerClass = useMemo(() => {
     const arr = [];
@@ -396,10 +400,11 @@ function Radio({
       /* @__PURE__ */ jsx(Shape, { className: innerClass, children: /* @__PURE__ */ jsx("i", {}) }),
       children
     ] }),
-    /* @__PURE__ */ jsx("input", { id, type: "radio", ...rest, ref: innerRef })
+    /* @__PURE__ */ jsx("input", { id, type: "radio", ...rest, ref })
   ] });
-}
-const index$4 = forwardRef((props, ref) => /* @__PURE__ */ jsx(Radio, { ...props, innerRef: ref }));
+});
+Radio.displayName = "Radio";
+const Radio$1 = Radio;
 const Shape = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Radio__Shape",
   componentId: "sc-13m0vd4-0"
@@ -840,6 +845,7 @@ function Modal({
   children,
   timeout = 200,
   padding = "0.85rem",
+  verticalAlign = "center",
   closeModal,
   closeOnOverlay,
   closeOnEsc,
@@ -890,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
@@ -899,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({
@@ -971,7 +993,8 @@ function Toast({
   clear,
   fixed,
   margin = "16px",
-  position = "top-left"
+  position = "top-left",
+  space = "16px"
 }) {
   const style = useMemo(() => {
     const base = {
@@ -995,12 +1018,14 @@ function Toast({
     }
     return base;
   }, [fixed, margin, position]);
-  return /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(ToastList, { style, children: toasts.map((props) => /* @__PURE__ */ createElement(ToastItem, { ...props, key: props.id, clear })) }) });
+  return /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(ToastList, { style, $space: space, children: toasts.map((props) => /* @__PURE__ */ createElement(ToastItem, { ...props, key: props.id, clear })) }) });
 }
 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:1rem;}"]);
+})(["display:flex;flex-direction:column;z-index:9999;overflow:hidden;li + li{margin-top:", ";}"], ({
+  $space
+}) => $space);
 
 function getColor$1({
   theme,
@@ -1448,4 +1473,4 @@ const normalized = /* @__PURE__ */ css(["*,::after,::before{box-sizing:border-bo
 }) => theme.link);
 const normalized$1 = normalized;
 
-export { Accordion, AppBar, Box, Button, ButtonGroup, Checkbox$1 as Checkbox, Col$1 as Col, Container, index$3 as Content, index as Divider, Field, Approved as IconApproved, ChevronDown as IconArrowDown, ChevronLeftRound as IconChevronLeftRound, ChevronRightRound as IconChevronRightRound, Close as IconClose, FileRound as IconFileRound, Pencil as IconPencil, PencilSimple as IconPencilSimple, Plus as IconPlus, Refresh as IconRefresh, User as IconUser, Modal, index$2 as Placeholder, Popover$1 as Popover, Portal$1 as Portal, Progress, index$4 as Radio, Row, index$5 as Select, Spinner$1 as Spinner, Switch$1 as Switch, index$1 as Table, Tag, TextButton, TextInput$1 as TextInput, Textarea$1 as Textarea, Toast, Tooltip$1 as Tooltip, Arrow as arrow, boxShadow, theme$1 as defaultTheme, findColorInvert, hamburger as hambuger, mediaDesktop, mediaFullHD, mediaMobile, mediaTablet, mediaUntilFullHD, normalized$1 as normalizeStyle, setSize };
+export { Accordion, AppBar, Box, Button, ButtonGroup, Checkbox$1 as Checkbox, Col$1 as Col, Container, index$3 as Content, index as Divider, Field, Approved as IconApproved, ChevronDown as IconArrowDown, ChevronLeftRound as IconChevronLeftRound, ChevronRightRound as IconChevronRightRound, Close as IconClose, FileRound as IconFileRound, Pencil as IconPencil, PencilSimple as IconPencilSimple, Plus as IconPlus, Refresh as IconRefresh, User as IconUser, Modal, index$2 as Placeholder, Popover$1 as Popover, Portal$1 as Portal, Progress, Radio$1 as Radio, Row, Select$1 as Select, Spinner$1 as Spinner, Switch$1 as Switch, index$1 as Table, Tag, TextButton, TextInput$1 as TextInput, Textarea$1 as Textarea, Toast, Tooltip$1 as Tooltip, Arrow as arrow, boxShadow, theme$1 as defaultTheme, findColorInvert, hamburger as hambuger, mediaDesktop, mediaFullHD, mediaMobile, mediaTablet, mediaUntilFullHD, normalized$1 as normalizeStyle, setSize };

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.2",
+  "version": "1.4.4",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -27,7 +27,7 @@
     "styled-components": ">=6.0.2"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.24.3",
+    "@floating-ui/react": "^0.24.5",
     "polished": "^4.2.2"
   }
 }