@nextui-org/react 1.0.1-alpha.50 → 1.0.1-alpha.54

package/esm/collapse/collapse.js

@@ -0,0 +1,150 @@
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useMemo } from 'react';
+import CollapseIcon from './collapse-icon';
+import useTheme from '../use-theme';
+import Expand from '../utils/expand';
+import { useCollapseContext } from './collapse-context';
+import useCurrentState from '../use-current-state';
+import useWarning from '../use-warning';
+import { getNormalWeight } from '../utils/dimensions';
+import { getId } from '../utils/collections';
+import clsx from '../utils/clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultProps = {
+  className: '',
+  shadow: false,
+  divider: true,
+  bordered: false,
+  showArrow: true,
+  animated: true,
+  disabled: false,
+  borderWeight: 'light',
+  initialExpanded: false
+};
+
+const Collapse = ({
+  children,
+  title,
+  subtitle,
+  initialExpanded,
+  shadow,
+  className,
+  divider,
+  arrowIcon,
+  showArrow,
+  disabled,
+  onChange,
+  bordered,
+  contentLeft,
+  animated: animatedProp,
+  borderWeight: borderWeightProp,
+  index,
+  ...props
+}) => {
+  const theme = useTheme();
+  const [visible, setVisible, visibleRef] = useCurrentState(initialExpanded);
+  const {
+    values,
+    divider: groupDivider,
+    animated: groupAnimated,
+    updateValues
+  } = useCollapseContext();
+
+  if (!title) {
+    useWarning('"title" is required.', 'Collapse');
+  }
+
+  useEffect(() => {
+    if (!values.length) return;
+    const isActive = !!values.find(item => item === index);
+    setVisible(isActive);
+  }, [values.join(',')]);
+  const arrowComponent = useMemo(() => {
+    if (!showArrow) return null;
+    return arrowIcon ? arrowIcon : /*#__PURE__*/_jsx(CollapseIcon, {});
+  }, [arrowIcon, showArrow]);
+  const borderWeight = useMemo(() => {
+    const withDivider = groupDivider === undefined ? divider : groupDivider;
+    return withDivider ? getNormalWeight(borderWeightProp) : '0px';
+  }, [divider, groupDivider, borderWeightProp]);
+  const animated = useMemo(() => {
+    return groupAnimated === undefined ? animatedProp : groupAnimated;
+  }, [groupAnimated, animatedProp]);
+  const bgColor = useMemo(() => theme.type === 'dark' ? theme.palette.accents_1 : theme.palette.background, [theme.type]);
+  const {
+    ariaLabelledById,
+    ariaControlId
+  } = useMemo(() => {
+    const nextuiId = getId();
+    return {
+      ariaLabelledById: `collapse-button-next-ui-${nextuiId}`,
+      ariaControlId: `collapse-next-ui-${nextuiId}`
+    };
+  }, []);
+
+  const clickHandler = event => {
+    if (disabled) return;
+    const next = !visibleRef.current;
+    setVisible(next);
+    updateValues && updateValues(index, next);
+    onChange && onChange(event, index, next);
+  };
+
+  return /*#__PURE__*/_jsxs("div", { ...props,
+    className: _JSXStyle.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || clsx('collapse', {
+      shadow,
+      bordered
+    }, className) || ""),
+    children: [/*#__PURE__*/_jsx("div", {
+      role: "button",
+      id: ariaLabelledById,
+      "aria-disabled": disabled,
+      "aria-expanded": visible,
+      "aria-controls": ariaControlId,
+      onClick: clickHandler,
+      className: _JSXStyle.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + (clsx('view', {
+        disabled
+      }) || ""),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: _JSXStyle.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + (clsx('title', {
+          animated
+        }) || ""),
+        children: [contentLeft && /*#__PURE__*/_jsx("div", {
+          className: _JSXStyle.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + "title-content-left",
+          children: contentLeft
+        }), /*#__PURE__*/_jsxs("div", {
+          className: _JSXStyle.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + "title-content",
+          children: [/*#__PURE__*/React.isValidElement(title) ? title : /*#__PURE__*/_jsx("h3", {
+            className: _JSXStyle.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]),
+            children: title
+          }), subtitle && /*#__PURE__*/_jsx("div", {
+            className: _JSXStyle.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + "subtitle",
+            children: subtitle
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: _JSXStyle.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + "title-content-right",
+          children: arrowComponent
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Expand, {
+      isExpanded: visible,
+      animated: animated,
+      children: /*#__PURE__*/_jsx("div", {
+        role: "region",
+        tabIndex: -1,
+        id: ariaControlId,
+        "aria-labelledby": ariaLabelledById,
+        className: _JSXStyle.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + "content",
+        children: children
+      })
+    }), /*#__PURE__*/_jsx(_JSXStyle, {
+      id: "1757461102",
+      dynamic: [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap],
+      children: `.collapse.__jsx-style-dynamic-selector{border-top:${borderWeight} solid ${theme.palette.border};border-bottom:${borderWeight} solid ${theme.palette.border};}.shadow.__jsx-style-dynamic-selector{border:none;background:${bgColor};box-shadow:${theme.expressiveness.shadowMedium};border-radius:${theme.layout.radius};padding:0 ${theme.layout.gap};}.bordered.__jsx-style-dynamic-selector{padding:0 ${theme.layout.gap};border-radius:${theme.layout.radius};border:${borderWeight} solid ${theme.palette.border};}.view.__jsx-style-dynamic-selector{cursor:pointer;outline:none;padding:${theme.layout.gap} 0;}.view.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.view.disabled.__jsx-style-dynamic-selector .title.__jsx-style-dynamic-selector,.view.disabled.__jsx-style-dynamic-selector .subtitle.__jsx-style-dynamic-selector{opacity:0.5;}.title-content-left.__jsx-style-dynamic-selector,.title-content-right.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.title-content-left.__jsx-style-dynamic-selector{margin-right:${theme.layout.gapHalf};}.title-content.__jsx-style-dynamic-selector{width:100%;}.title.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${theme.palette.foreground};}.title-content-right.__jsx-style-dynamic-selector svg{-webkit-transform:rotateZ(${visible ? '-90deg' : '0'});-ms-transform:rotateZ(${visible ? '-90deg' : '0'});transform:rotateZ(${visible ? '-90deg' : '0'});}.animated.__jsx-style-dynamic-selector .title-content-right.__jsx-style-dynamic-selector svg{-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;}.title-content.__jsx-style-dynamic-selector h1,.title-content.__jsx-style-dynamic-selector h2,.title-content.__jsx-style-dynamic-selector h3,.title-content.__jsx-style-dynamic-selector h4,.title-content.__jsx-style-dynamic-selector h5,.title-content.__jsx-style-dynamic-selector h6,.title-content.__jsx-style-dynamic-selector p,.title-content.__jsx-style-dynamic-selector span,.title-content.__jsx-style-dynamic-selector b{margin:0 !important;}.subtitle.__jsx-style-dynamic-selector{color:${theme.palette.accents_5};margin:0;}.subtitle.__jsx-style-dynamic-selector>*{margin:0;}.content.__jsx-style-dynamic-selector{font-size:1rem;line-height:1.625rem;padding-bottom:${theme.layout.gap};}.content.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}`
+    })]
+  });
+};
+
+Collapse.defaultProps = defaultProps;
+export default Collapse;

package/esm/collapse/index.d.ts

@@ -0,0 +1,2 @@
+import Collapse from './collapse';
+export default Collapse;

package/esm/collapse/index.js

@@ -0,0 +1,4 @@
+import Collapse from './collapse';
+import CollapseGroup from './collapse-group';
+Collapse.Group = CollapseGroup;
+export default Collapse;

package/esm/css-baseline/css-baseline.js

@@ -12,9 +12,9 @@ const CssBaseline = ({
   const theme = useTheme();
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [children, /*#__PURE__*/_jsx(_JSXStyle, {
-      id: "1075366528",
-      dynamic: [theme.palette.background, theme.palette.text, theme.palette.background, theme.font.sans, theme.font.sans, theme.palette.link, theme.expressiveness.linkStyle, theme.expressiveness.linkHoverStyle, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gap, theme.palette.foreground, theme.palette.code, theme.layout.gapQuarter, theme.layout.gapQuarter, addColorAlpha(theme.palette.code, 0.2), theme.font.mono, addColorAlpha(theme.palette.code, 0.3), theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.font.mono, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_1, theme.layout.gap, theme.layout.gap, theme.palette.accents_5, theme.palette.accents_1, theme.layout.radius, theme.palette.selection, theme.palette.foreground],
-      children: `html,body{background-color:${theme.palette.background};color:${theme.palette.text};}html{font-size:16px;--nextui-icons-background:${theme.palette.background};}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:${theme.font.sans};}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625rem;-moz-letter-spacing:-0.005625rem;-ms-letter-spacing:-0.005625rem;letter-spacing:-0.005625rem;font-family:${theme.font.sans};}p{margin:1rem 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875rem;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${theme.palette.link};-webkit-text-decoration:${theme.expressiveness.linkStyle};text-decoration:${theme.expressiveness.linkStyle};}a:hover{-webkit-text-decoration:${theme.expressiveness.linkHoverStyle};text-decoration:${theme.expressiveness.linkHoverStyle};}ul,ol{padding:0;list-style-type:none;margin:${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gap};color:${theme.palette.foreground};}ol{list-style-type:decimal;}li{margin-bottom:0.625rem;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.625rem 0;}h1{font-size:3rem;-webkit-letter-spacing:-0.066875rem;-moz-letter-spacing:-0.066875rem;-ms-letter-spacing:-0.066875rem;letter-spacing:-0.066875rem;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.020625rem;-moz-letter-spacing:-0.020625rem;-ms-letter-spacing:-0.020625rem;letter-spacing:-0.020625rem;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.029375rem;-moz-letter-spacing:-0.029375rem;-ms-letter-spacing:-0.029375rem;letter-spacing:-0.029375rem;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.020625rem;-moz-letter-spacing:-0.020625rem;-ms-letter-spacing:-0.020625rem;letter-spacing:-0.020625rem;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01125rem;-moz-letter-spacing:-0.01125rem;-ms-letter-spacing:-0.01125rem;letter-spacing:-0.01125rem;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005625rem;-moz-letter-spacing:-0.005625rem;-ms-letter-spacing:-0.005625rem;letter-spacing:-0.005625rem;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:${theme.palette.code};padding:calc(${theme.layout.gapQuarter} * 0.5) ${theme.layout.gapQuarter};border-radius:0.375rem;background-color:${addColorAlpha(theme.palette.code, 0.2)};font-family:${theme.font.mono};font-size:0.8rem;white-space:pre-wrap;-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;}code:hover{background-color:${addColorAlpha(theme.palette.code, 0.3)};}pre{border-radius:${theme.layout.radius};padding:calc(${theme.layout.gap} * 0.75) ${theme.layout.gap};margin:${theme.layout.gap} 0;font-family:${theme.font.mono};white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:0.875rem;-webkit-overflow-scrolling:touch;}pre code{color:${theme.palette.foreground};font-size:0.8125rem;line-height:1.25rem;white-space:pre;}pre code:before,pre code:after{display:none;}pre p{margin:0;}pre::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;}hr{border-color:${theme.palette.accents_2};}details{background-color:${theme.palette.accents_1};border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::-webkit-details-marker,summary::before{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ${theme.layout.gap}) ${theme.layout.gap};color:${theme.palette.accents_5};background-color:${theme.palette.accents_1};border-radius:${theme.layout.radius};margin:1.5rem 0;}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:${theme.palette.selection};color:${theme.palette.foreground};}`
+      id: "2908832453",
+      dynamic: [theme.palette.background, theme.palette.text, theme.palette.background, theme.font.sans, theme.font.sans, theme.palette.link, theme.expressiveness.linkStyle, theme.expressiveness.linkHoverStyle, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gap, theme.palette.foreground, theme.palette.code, theme.layout.gapQuarter, theme.layout.gapQuarter, addColorAlpha(theme.palette.code, 0.2), theme.font.mono, addColorAlpha(theme.palette.code, 0.3), theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.font.mono, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_1, theme.layout.gap, theme.layout.gap, theme.palette.accents_5, theme.palette.accents_1, theme.layout.radius, theme.palette.selection, theme.palette.background],
+      children: `html,body{background-color:${theme.palette.background};color:${theme.palette.text};}html{font-size:16px;--nextui-icons-background:${theme.palette.background};}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:${theme.font.sans};}*,*:before,*:after{box-sizing:border-box;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625rem;-moz-letter-spacing:-0.005625rem;-ms-letter-spacing:-0.005625rem;letter-spacing:-0.005625rem;font-family:${theme.font.sans};}p{margin:1rem 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875rem;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${theme.palette.link};-webkit-text-decoration:${theme.expressiveness.linkStyle};text-decoration:${theme.expressiveness.linkStyle};}a:hover{-webkit-text-decoration:${theme.expressiveness.linkHoverStyle};text-decoration:${theme.expressiveness.linkHoverStyle};}ul,ol{padding:0;list-style-type:none;margin:${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gap};color:${theme.palette.foreground};}ol{list-style-type:decimal;}li{margin-bottom:0.625rem;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.625rem 0;}h1{font-size:3rem;-webkit-letter-spacing:-0.066875rem;-moz-letter-spacing:-0.066875rem;-ms-letter-spacing:-0.066875rem;letter-spacing:-0.066875rem;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.020625rem;-moz-letter-spacing:-0.020625rem;-ms-letter-spacing:-0.020625rem;letter-spacing:-0.020625rem;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.029375rem;-moz-letter-spacing:-0.029375rem;-ms-letter-spacing:-0.029375rem;letter-spacing:-0.029375rem;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.020625rem;-moz-letter-spacing:-0.020625rem;-ms-letter-spacing:-0.020625rem;letter-spacing:-0.020625rem;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01125rem;-moz-letter-spacing:-0.01125rem;-ms-letter-spacing:-0.01125rem;letter-spacing:-0.01125rem;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005625rem;-moz-letter-spacing:-0.005625rem;-ms-letter-spacing:-0.005625rem;letter-spacing:-0.005625rem;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:${theme.palette.code};padding:calc(${theme.layout.gapQuarter} * 0.5) ${theme.layout.gapQuarter};border-radius:0.375rem;background-color:${addColorAlpha(theme.palette.code, 0.2)};font-family:${theme.font.mono};font-size:0.8rem;white-space:pre-wrap;-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;}code:hover{background-color:${addColorAlpha(theme.palette.code, 0.3)};}pre{border-radius:${theme.layout.radius};padding:calc(${theme.layout.gap} * 0.75) ${theme.layout.gap};margin:${theme.layout.gap} 0;font-family:${theme.font.mono};white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:0.875rem;-webkit-overflow-scrolling:touch;}pre code{color:${theme.palette.foreground};font-size:0.8125rem;line-height:1.25rem;white-space:pre;}pre code:before,pre code:after{display:none;}pre p{margin:0;}pre::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;}hr{border-color:${theme.palette.accents_2};}details{background-color:${theme.palette.accents_1};border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::-webkit-details-marker,summary::before{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ${theme.layout.gap}) ${theme.layout.gap};color:${theme.palette.accents_5};background-color:${theme.palette.accents_1};border-radius:${theme.layout.radius};margin:1.5rem 0;}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:${theme.palette.selection};color:${theme.palette.background};}`
     })]
   });
 };

package/esm/divider/divider.d.ts

@@ -1,20 +1,19 @@
 import React from 'react';
-import { DividerAlign, SnippetTypes } from '../utils/prop-types';
-export declare type DividerTypes = SnippetTypes;
+import { DividerAlign, SimpleColors } from '../utils/prop-types';
 interface Props {
     x?: number;
     y?: number;
-    volume?: number;
-    color?: DividerTypes | string;
+    height?: number;
+    color?: SimpleColors | string;
     align?: DividerAlign;
     className?: string;
 }
 declare const defaultProps: {
     x: number;
     y: number;
-    volume: number;
+    height: number;
     align: "left" | "right" | "start" | "center" | "end";
-    color: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | "invert";
+    color: string;
     className: string;
 };
 declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -22,9 +21,9 @@ export declare type DividerProps = Props & typeof defaultProps & NativeAttrs;
 declare const _default: React.ComponentType<Partial<{
     x: number;
     y: number;
-    volume: number;
+    height: number;
     align: "left" | "right" | "start" | "center" | "end";
-    color: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | "invert";
+    color: string;
     className: string;
-}> & Omit<DividerProps, "className" | "color" | "x" | "y" | "align" | "volume">>;
+}> & Omit<DividerProps, "height" | "className" | "color" | "x" | "y" | "align">>;
 export default _default;

package/esm/divider/divider.js

@@ -9,14 +9,14 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const defaultProps = {
   x: 0,
   y: 2,
-  volume: 1,
+  height: 1,
   align: 'center',
   color: 'default',
   className: ''
 };
 
 const Divider = ({
-  volume,
+  height,
   color,
   x,
   y,
@@ -26,26 +26,26 @@ const Divider = ({
   ...props
 }) => {
   const theme = useTheme();
-  const bgColor = useMemo(() => getNormalColor(color, theme.palette), [color, theme.palette]);
+  const bgColor = useMemo(() => getNormalColor(color, theme.palette, theme.palette.border), [color, theme.palette]);
   const alignClassName = useMemo(() => {
     if (!align || align === 'center') return '';
     if (align === 'left' || align === 'start') return 'start';
     return 'end';
   }, [align]);
-  const textColor = color === 'default' || color === 'gradient' ? theme.palette.foreground : color;
+  const textColor = color === 'default' ? theme.palette.foreground : color;
   const top = y ? getMargin(y / 2) : 0;
   const left = x ? getMargin(x / 2) : 0;
   return /*#__PURE__*/_jsxs("div", {
     role: "separator",
     ...props,
-    className: _JSXStyle.dynamic([["839888228", [volume, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || `divider ${className}`),
+    className: _JSXStyle.dynamic([["3028347750", [height, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || `divider ${className}`),
     children: [children && /*#__PURE__*/_jsx("span", {
-      className: _JSXStyle.dynamic([["839888228", [volume, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor]]]) + " " + `text ${alignClassName}`,
+      className: _JSXStyle.dynamic([["3028347750", [height, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor]]]) + " " + `text ${alignClassName}`,
       children: children
     }), /*#__PURE__*/_jsx(_JSXStyle, {
-      id: "839888228",
-      dynamic: [volume, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor],
-      children: `.divider.__jsx-style-dynamic-selector{width:auto;max-width:100%;height:calc(${volume} * 1px);background:${bgColor};margin:${top} ${left};position:relative;}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 ${theme.layout.gap};font-size:1rem;font-weight:bold;text-transform:capitalize;background-color:${theme.palette.background};color:${textColor};z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}`
+      id: "3028347750",
+      dynamic: [height, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor],
+      children: `.divider.__jsx-style-dynamic-selector{width:auto;width:100%;max-width:100%;height:calc(${height} * 1px);background:${bgColor};margin:${top} ${left};position:relative;}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 ${theme.layout.gap};font-size:1rem;font-weight:bold;text-transform:capitalize;background-color:${theme.palette.background};color:${textColor};z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}`
     })]
   });
 };

package/esm/image/image.d.ts

@@ -1,20 +1,21 @@
 import React from 'react';
+import { ObjectFit } from '../utils/prop-types';
 import ImageBrowser from './image-browser';
 interface Props {
     src: string;
-    disableAutoResize?: boolean;
-    disableSkeleton?: boolean;
-    width?: number;
-    height?: number;
+    autoResize?: boolean;
+    showSkeleton?: boolean;
+    width?: number | string;
+    height?: number | string;
     className?: string;
-    scale?: string;
     maxDelay?: number;
+    objectFit?: ObjectFit;
 }
 declare const defaultProps: {
-    disableSkeleton: boolean;
-    disableAutoResize: boolean;
+    showSkeleton: boolean;
+    autoResize: boolean;
+    objectFit: "inherit" | "initial" | "revert" | "unset" | "none" | "contain" | "cover" | "fill" | "scale-down";
     className: string;
-    scale: string;
     maxDelay: number;
 };
 declare type NativeAttrs = Omit<React.ImgHTMLAttributes<unknown>, keyof Props>;

package/esm/image/image.js

@@ -1,17 +1,18 @@
 import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useMemo, useState } from 'react';
 import useTheme from '../use-theme';
 import ImageSkeleton from './image.skeleton';
 import useRealShape from '../use-real-shape';
 import useCurrentState from '../use-current-state';
 import useResize from '../use-resize';
+import cslx from '../utils/clsx';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const defaultProps = {
-  disableSkeleton: false,
-  disableAutoResize: false,
+  showSkeleton: true,
+  autoResize: true,
+  objectFit: 'scale-down',
   className: '',
-  scale: '100%',
   maxDelay: 3000
 };
 
@@ -19,25 +20,31 @@ const Image = ({
   src,
   width,
   height,
-  disableSkeleton,
+  showSkeleton: showSkeletonProp,
   className,
-  scale,
   maxDelay,
-  disableAutoResize,
+  autoResize,
+  objectFit,
   ...props
 }) => {
-  const showAnimation = !disableSkeleton && width && height;
-  const w = width ? `${width}px` : 'auto';
-  const h = height ? `${height}px` : 'auto';
   const theme = useTheme();
   const [loading, setLoading] = useState(true);
   const [showSkeleton, setShowSkeleton] = useState(true);
+  const {
+    w,
+    h
+  } = useMemo(() => {
+    return {
+      w: width ? typeof width === 'number' ? `${width}px` : width : 'auto',
+      h: height ? typeof height === 'number' ? `${height}px` : height : 'auto'
+    };
+  }, [width, height]);
   const [zoomHeight, setZoomHeight, zoomHeightRef] = useCurrentState(h);
   const imageRef = useRef(null);
   const [shape, updateShape] = useRealShape(imageRef);
+  const showAnimation = showSkeletonProp && width && height;
 
   const imageLoaded = () => {
-    if (!showAnimation) return;
     setLoading(false);
   };
 
@@ -69,7 +76,7 @@ const Image = ({
    */
 
   useEffect(() => {
-    if (disableAutoResize) return;
+    if (!autoResize) return;
     const notLoaded = shape.width === 0;
     const isAutoZoom = zoomHeightRef.current === 'auto';
     if (notLoaded || !width || !height) return;
@@ -81,11 +88,13 @@ const Image = ({
     }
   }, [shape, width]);
   useResize(() => {
-    if (disableAutoResize) return;
+    if (!autoResize) return;
     updateShape();
   });
   return /*#__PURE__*/_jsxs("div", {
-    className: _JSXStyle.dynamic([["3152964456", [w, zoomHeight, theme.layout.radius, scale, scale]]]) + " " + `image ${className}`,
+    className: _JSXStyle.dynamic([["2293692961", [w, zoomHeight, theme.layout.radius, objectFit]]]) + " " + (cslx('image', {
+      'image-ready': !loading
+    }, className) || ""),
     children: [showSkeleton && showAnimation && /*#__PURE__*/_jsx(ImageSkeleton, {
       opacity: loading ? 0.5 : 0
     }), /*#__PURE__*/_jsx("img", {
@@ -95,11 +104,11 @@ const Image = ({
       onLoad: imageLoaded,
       src: src,
       ...props,
-      className: _JSXStyle.dynamic([["3152964456", [w, zoomHeight, theme.layout.radius, scale, scale]]]) + " " + (props && props.className != null && props.className || "")
+      className: _JSXStyle.dynamic([["2293692961", [w, zoomHeight, theme.layout.radius, objectFit]]]) + " " + (props && props.className != null && props.className || "")
     }), /*#__PURE__*/_jsx(_JSXStyle, {
-      id: "3152964456",
-      dynamic: [w, zoomHeight, theme.layout.radius, scale, scale],
-      children: `.image.__jsx-style-dynamic-selector{width:${w};height:${zoomHeight};margin:0 auto;position:relative;border-radius:${theme.layout.radius};overflow:hidden;max-width:100%;}img.__jsx-style-dynamic-selector{width:${scale};height:${scale};object-fit:scale-down;display:block;}`
+      id: "2293692961",
+      dynamic: [w, zoomHeight, theme.layout.radius, objectFit],
+      children: `.image.__jsx-style-dynamic-selector{width:${w};opacity:0;height:${zoomHeight};margin:0 auto;position:relative;border-radius:${theme.layout.radius};overflow:hidden;max-width:100%;-webkit-transition:-webkit-transform 250ms ease 0ms,opacity 200ms ease-in 0ms;-webkit-transition:transform 250ms ease 0ms,opacity 200ms ease-in 0ms;transition:transform 250ms ease 0ms,opacity 200ms ease-in 0ms;}.image-ready.__jsx-style-dynamic-selector{opacity:1;}img.__jsx-style-dynamic-selector{width:100%;height:100%;object-fit:${objectFit};display:block;}`
     })]
   });
 };

package/esm/index.d.ts

@@ -7,9 +7,15 @@ export { default as useTheme } from './use-theme';
 export { default as usePortal } from './use-portal';
 export { default as useSSR } from './use-ssr';
 export { default as useBodyScroll } from './use-body-scroll';
+export type { BodyScrollOptions } from './use-body-scroll';
 export { default as useClickAway } from './use-click-away';
+export { default as useClipboard } from './use-clipboard';
+export type { UseClipboardOptions, UseClipboardResult } from './use-clipboard';
 export { default as useClickAnywhere } from './use-click-anywhere';
 export { default as useInput } from './use-input';
+export { default as useKeyboard } from './use-keyboard';
+export type { UseKeyboardHandler, KeyboardOptions, KeyboardResult, UseKeyboard } from './use-keyboard';
+export { KeyMod, KeyCode } from './use-keyboard/codes';
 export { default as Avatar } from './avatar';
 export { default as CssBaseline } from './css-baseline';
 export { default as Checkbox } from './checkbox';
@@ -41,3 +47,5 @@ export { default as Input } from './input';
 export { default as Textarea } from './textarea';
 export { default as Modal } from './modal';
 export { default as useModal } from './modal/use-modal';
+export { default as Backdrop } from './backdrop';
+export { default as Collapse } from './collapse';

package/esm/index.js

@@ -9,8 +9,11 @@ export { default as usePortal } from './use-portal';
 export { default as useSSR } from './use-ssr';
 export { default as useBodyScroll } from './use-body-scroll';
 export { default as useClickAway } from './use-click-away';
+export { default as useClipboard } from './use-clipboard';
 export { default as useClickAnywhere } from './use-click-anywhere';
 export { default as useInput } from './use-input';
+export { default as useKeyboard } from './use-keyboard';
+export { KeyMod, KeyCode } from './use-keyboard/codes';
 export { default as Avatar } from './avatar';
 export { default as CssBaseline } from './css-baseline';
 export { default as Checkbox } from './checkbox';
@@ -41,4 +44,6 @@ export { default as Tooltip } from './tooltip';
 export { default as Input } from './input';
 export { default as Textarea } from './textarea';
 export { default as Modal } from './modal';
-export { default as useModal } from './modal/use-modal';
+export { default as useModal } from './modal/use-modal';
+export { default as Backdrop } from './backdrop';
+export { default as Collapse } from './collapse';

package/esm/input/input-icon-clear.js

@@ -2,7 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import clsx from '../utils/clsx';
 import useTheme from '../use-theme';
-import ClearIcon from '../shared/clear-icon';
+import ClearIcon from '../utils/clear-icon';
 import { getNormalColor } from '../utils/color';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/esm/input/input-password.d.ts

@@ -89,5 +89,5 @@ declare const _default: React.ComponentType<Partial<{
     className: string;
     placeholder: string;
     initialValue: string;
-} & NativeAttrs & React.RefAttributes<HTMLInputElement>, "clearable" | "rounded" | "contentClickable" | "contentLeftStyling" | "contentRightStyling" | "width" | "className" | "animated" | "placeholder" | "color" | "status" | "bordered" | "size" | "disabled" | "autoComplete" | "readOnly" | "required" | "initialValue" | "shadow" | "borderWeight" | "underlined" | "fullWidth" | "helperColor" | "hideToggle" | "visibleIcon" | "hiddenIcon">>;
+} & NativeAttrs & React.RefAttributes<HTMLInputElement>, "clearable" | "rounded" | "contentClickable" | "contentLeftStyling" | "contentRightStyling" | "width" | "className" | "animated" | "placeholder" | "color" | "status" | "bordered" | "size" | "borderWeight" | "disabled" | "autoComplete" | "readOnly" | "required" | "initialValue" | "shadow" | "underlined" | "fullWidth" | "helperColor" | "hideToggle" | "visibleIcon" | "hiddenIcon">>;
 export default _default;

package/esm/modal/modal-close-button.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
-import ClearIcon from '../shared/clear-icon';
+import ClearIcon from '../utils/clear-icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 

package/esm/modal/modal-wrapper.d.ts

@@ -4,6 +4,7 @@ interface Props {
     visible?: boolean;
     scroll?: boolean;
     rebound?: boolean;
+    animated?: boolean;
     onCloseButtonClick?: () => void;
     fullScreen?: boolean;
     closeButton?: boolean;

package/esm/modal/modal-wrapper.js

@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo, useState } from 'react';
 import withDefaults from '../utils/with-defaults';
 import useTheme from '../use-theme';
 import CSSTransition from '../utils/css-transition';
@@ -8,6 +8,7 @@ import ModalCloseButton from './modal-close-button';
 import cslx from '../utils/clsx';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const defaultProps = {
   className: '',
   visible: false,
@@ -21,6 +22,7 @@ const ModalWrapper = ({
   fullScreen,
   closeButton,
   rebound,
+  animated,
   onCloseButtonClick,
   scroll,
   ...props
@@ -29,6 +31,12 @@ const ModalWrapper = ({
   const modalContent = useRef(null);
   const tabStart = useRef(null);
   const tabEnd = useRef(null);
+  const [rendered, setRendered] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setRendered(true);
+    }, 300);
+  }, []);
   useEffect(() => {
     if (!visible) return;
     const activeElement = document.activeElement;
@@ -57,42 +65,48 @@ const ModalWrapper = ({
     onCloseButtonClick && onCloseButtonClick();
   };
 
-  return /*#__PURE__*/_jsx(CSSTransition, {
-    name: "modal-wrapper",
-    visible: visible,
-    enterTime: 20,
-    leaveTime: 20,
-    clearTime: 300,
-    children: /*#__PURE__*/_jsxs("div", {
+  const renderChildren = useMemo(() => {
+    return /*#__PURE__*/_jsxs("div", {
       role: "dialog",
       "aria-modal": visible,
       tabIndex: -1,
       onKeyDown: onKeyDown,
       ref: modalContent,
       ...props,
-      className: _JSXStyle.dynamic([["799561454", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || cslx('modal-wrapper', {
+      className: _JSXStyle.dynamic([["1270377280", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || cslx('modal-wrapper', {
         fullscreen: fullScreen,
         'with-close-button': closeButton,
-        'modal-rebound': rebound
+        'modal-rebound': rebound,
+        rendered
       }, className) || ""),
       children: [/*#__PURE__*/_jsx("div", {
         tabIndex: 0,
         "aria-hidden": "true",
         ref: tabStart,
-        className: _JSXStyle.dynamic([["799561454", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + "hide-tab"
+        className: _JSXStyle.dynamic([["1270377280", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + "hide-tab"
       }), closeButton && /*#__PURE__*/_jsx(ModalCloseButton, {
         onClick: handleClose
       }), children, /*#__PURE__*/_jsx("div", {
         tabIndex: 0,
         "aria-hidden": "true",
         ref: tabEnd,
-        className: _JSXStyle.dynamic([["799561454", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + "hide-tab"
+        className: _JSXStyle.dynamic([["1270377280", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + "hide-tab"
       }), /*#__PURE__*/_jsx(_JSXStyle, {
-        id: "799561454",
-        dynamic: [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap],
-        children: `.modal-wrapper.__jsx-style-dynamic-selector{max-width:100%;vertical-align:middle;overflow:hidden;height:-webkit-fit-content(20em);height:-moz-fit-content(20em);height:fit-content(20em);max-height:${scroll ? 'calc(100vh - 200px)' : 'inherit'};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;box-sizing:border-box;background-color:${theme.palette.background};color:${theme.palette.foreground};border-radius:${theme.layout.radius};box-shadow:${theme.expressiveness.shadowLarge};opacity:0;outline:none;-webkit-transform:translate3d(0px,20px,0px) scale(1.02);-ms-transform:translate3d(0px,20px,0px) scale(1.02);transform:translate3d(0px,20px,0px) scale(1.02);-webkit-transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1) 0s, -webkit-transform 0.25s cubic-bezier(0.4,0,0.2,1) 0s;-webkit-transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1) 0s, transform 0.25s cubic-bezier(0.4,0,0.2,1) 0s;transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1) 0s, transform 0.25s cubic-bezier(0.4,0,0.2,1) 0s;}.modal-rebound.__jsx-style-dynamic-selector:not(.fullscreen){-webkit-animation:rebound-__jsx-style-dynamic-selector 0.25s ease;animation:rebound-__jsx-style-dynamic-selector 0.25s ease;}.modal-wrapper-enter.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translate3d(0px,20px,0px) scale(1.02);-ms-transform:translate3d(0px,20px,0px) scale(1.02);transform:translate3d(0px,20px,0px) scale(1.02);}.modal-wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate3d(0px,0px,0px) scale(1);-ms-transform:translate3d(0px,0px,0px) scale(1);transform:translate3d(0px,0px,0px) scale(1);}.modal-wrapper-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate3d(0px,0px,0px) scale(1);-ms-transform:translate3d(0px,0px,0px) scale(1);transform:translate3d(0px,0px,0px) scale(1);}.modal-wrapper-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translate3d(0px,20px,0px) scale(1.02);-ms-transform:translate3d(0px,20px,0px) scale(1.02);transform:translate3d(0px,20px,0px) scale(1.02);}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}.fullscreen.__jsx-style-dynamic-selector{width:100%;height:100%;max-height:100%;}.with-close-button.__jsx-style-dynamic-selector{padding-top:${theme.layout.gap};}.fullscreen.__jsx-style-dynamic-selector .close-icon{top:${theme.layout.gap};right:calc(${theme.layout.gap} * 0.5);}.fullscreen.__jsx-style-dynamic-selector .close-icon svg{width:24px;height:24px;}@-webkit-keyframes rebound-__jsx-style-dynamic-selector{0%{-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}40%{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}80%{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes rebound-__jsx-style-dynamic-selector{0%{-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}40%{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}80%{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}`
+        id: "1270377280",
+        dynamic: [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap],
+        children: `.modal-wrapper.__jsx-style-dynamic-selector{max-width:100%;vertical-align:middle;overflow:hidden;height:-webkit-fit-content(20em);height:-moz-fit-content(20em);height:fit-content(20em);max-height:${scroll ? 'calc(100vh - 200px)' : 'inherit'};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;box-sizing:border-box;background-color:${theme.type === 'light' ? theme.palette.background : theme.palette.accents_1};color:${theme.palette.foreground};border-radius:${theme.layout.radius};box-shadow:${theme.expressiveness.shadowLarge};outline:none;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}.fullscreen.__jsx-style-dynamic-selector{width:100%;height:100%;max-height:100%;}.modal-rebound.__jsx-style-dynamic-selector:not(.fullscreen){-webkit-animation-duration:250ms;animation-duration:250ms;-webkit-animation-name:rebound-__jsx-style-dynamic-selector;animation-name:rebound-__jsx-style-dynamic-selector;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}.modal-wrapper-enter.__jsx-style-dynamic-selector:not(.rendered){-webkit-animation-name:appearance-in-__jsx-style-dynamic-selector;animation-name:appearance-in-__jsx-style-dynamic-selector;-webkit-animation-duration:200ms;animation-duration:200ms;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-direction:normal;animation-direction:normal;}.modal-wrapper-leave.__jsx-style-dynamic-selector{-webkit-animation-name:appearance-out-__jsx-style-dynamic-selector;animation-name:appearance-out-__jsx-style-dynamic-selector;-webkit-animation-duration:50ms;animation-duration:50ms;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;}.with-close-button.__jsx-style-dynamic-selector{padding-top:${theme.layout.gap};}.fullscreen.__jsx-style-dynamic-selector .close-icon{top:${theme.layout.gap};right:calc(${theme.layout.gap} * 0.5);}.fullscreen.__jsx-style-dynamic-selector .close-icon svg{width:24px;height:24px;}@-webkit-keyframes appearance-in-__jsx-style-dynamic-selector{0%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}60%{opacity:0.75;-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes appearance-in-__jsx-style-dynamic-selector{0%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}60%{opacity:0.75;-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@-webkit-keyframes appearance-out-__jsx-style-dynamic-selector{0%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}100%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}}@keyframes appearance-out-__jsx-style-dynamic-selector{0%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}100%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}}@-webkit-keyframes rebound-__jsx-style-dynamic-selector{0%{-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}40%{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}80%{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes rebound-__jsx-style-dynamic-selector{0%{-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}40%{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}80%{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}`
       })]
-    })
+    });
+  }, [rebound, children]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: animated ? /*#__PURE__*/_jsx(CSSTransition, {
+      name: "modal-wrapper",
+      visible: visible,
+      enterTime: 20,
+      leaveTime: 20,
+      clearTime: 300,
+      children: renderChildren
+    }) : visible ? renderChildren : null
   });
 };