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

package/cjs/avatar/avatar-group.js

@@ -13,6 +13,8 @@ var _useTheme = _interopRequireDefault(require("../use-theme"));
 
 var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
 
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const defaultProps = {
@@ -28,15 +30,18 @@ const AvatarGroup = ({
   ...props
 }) => {
   const theme = (0, _useTheme.default)();
+  const isDark = theme.type === 'dark';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
-    className: _style.default.dynamic([["1646920449", [animated ? 'translate(-0.625rem)' : '', theme.layout.gapQuarter, theme.palette.accents_7]]]) + " " + (props && props.className != null && props.className || `avatar-group ${className}`),
+    className: _style.default.dynamic([["1480508104", [animated ? 'translate(-0.625rem)' : '', theme.layout.gapQuarter, theme.palette.accents_7]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('avatar-group', {
+      'is-dark': isDark
+    }, className) || ""),
     children: [children, count && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: _style.default.dynamic([["1646920449", [animated ? 'translate(-0.625rem)' : '', theme.layout.gapQuarter, theme.palette.accents_7]]]) + " " + "count",
+      className: _style.default.dynamic([["1480508104", [animated ? 'translate(-0.625rem)' : '', theme.layout.gapQuarter, theme.palette.accents_7]]]) + " " + "count",
       children: ["+", count]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "1646920449",
+      id: "1480508104",
       dynamic: [animated ? 'translate(-0.625rem)' : '', theme.layout.gapQuarter, theme.palette.accents_7],
-      children: `.avatar-group.__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;height:auto;width:-webkit-max-content;width:-moz-max-content;width:max-content;}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-0.625rem;-webkit-transition:-webkit-transform 0.25s ease;-webkit-transition:transform 0.25s ease;transition:transform 0.25s ease;}.avatar-group.__jsx-style-dynamic-selector .avatar:hover{-webkit-transform:${animated ? 'translate(-0.625rem)' : ''};-ms-transform:${animated ? 'translate(-0.625rem)' : ''};transform:${animated ? 'translate(-0.625rem)' : ''};}.count.__jsx-style-dynamic-selector{font-size:0.875rem;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:${theme.layout.gapQuarter};color:${theme.palette.accents_7};}`
+      children: `.avatar-group.__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;height:auto;width:-webkit-max-content;width:-moz-max-content;width:max-content;}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-0.625rem;-webkit-transition:-webkit-transform 0.25s ease;-webkit-transition:transform 0.25s ease;transition:transform 0.25s ease;}.avatar-group.__jsx-style-dynamic-selector .only-text-avatar{box-shadow:-4px 0 4px rgb(0 0 0 / 5%);}.is-dark.__jsx-style-dynamic-selector .only-text-avatar{box-shadow:-4px 0 15px rgb(0 0 0 / 50%);}.avatar-group.__jsx-style-dynamic-selector .avatar:hover{-webkit-transform:${animated ? 'translate(-0.625rem)' : ''};-ms-transform:${animated ? 'translate(-0.625rem)' : ''};transform:${animated ? 'translate(-0.625rem)' : ''};}.count.__jsx-style-dynamic-selector{font-size:0.875rem;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:${theme.layout.gapQuarter};color:${theme.palette.accents_7};}`
     })]
   });
 };

package/cjs/avatar/avatar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NormalSizes, NormalColors, SimpleColors } from '../utils/prop-types';
+import { NormalSizes, NormalColors, SimpleColors, NormalWeights } from '../utils/prop-types';
 import AvatarGroup from './avatar-group';
 interface Props {
     src?: string;
@@ -13,6 +13,7 @@ interface Props {
     alt?: string;
     text?: string;
     size?: NormalSizes | number;
+    borderWeight?: NormalWeights;
     squared?: boolean;
     className?: string;
 }
@@ -20,6 +21,7 @@ declare const defaultProps: {
     text: string;
     stacked: boolean;
     size: number | "mini" | "small" | "medium" | "large" | "xlarge";
+    borderWeight: "light" | "normal" | "bold";
     textColor: "default" | "primary" | "secondary" | "success" | "warning" | "error";
     squared: boolean;
     zoomed: boolean;

package/cjs/avatar/avatar.js

@@ -11,11 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _useTheme = _interopRequireDefault(require("../use-theme"));
 
-var _useWarning = _interopRequireDefault(require("../use-warning"));
+var _color = require("../utils/color");
 
-var _assertion = require("../utils/assertion");
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
 
-var _color = require("../utils/color");
+var _dimensions = require("../utils/dimensions");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -27,6 +27,7 @@ const defaultProps = {
   text: '',
   stacked: false,
   size: 'medium',
+  borderWeight: 'normal',
   textColor: 'default',
   squared: false,
   zoomed: false,
@@ -45,18 +46,6 @@ const getSize = size => {
   return sizes[size];
 };
 
-const getBorder = size => {
-  const sizes = {
-    mini: '1px',
-    small: '1px',
-    medium: '1.5px',
-    large: '2px',
-    xlarge: '2.5px'
-  };
-  if (typeof size === 'number') return `1.5px`;
-  return sizes[size];
-};
-
 const safeText = text => {
   if (text.length <= 4) return text;
   return text.slice(0, 3);
@@ -67,6 +56,7 @@ const Avatar = ({
   stacked,
   text,
   size,
+  borderWeight,
   squared,
   zoomed,
   bordered,
@@ -84,7 +74,7 @@ const Avatar = ({
   const marginLeft = stacked ? '-.625rem' : 0;
   const [ready, setReady] = (0, _react.useState)(false);
   const width = (0, _react.useMemo)(() => getSize(size), [size]);
-  const border = (0, _react.useMemo)(() => getBorder(size), [size]);
+  const border = (0, _react.useMemo)(() => (0, _dimensions.getNormalWeight)(borderWeight), [borderWeight]);
   const imgRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     var _imgRef$current;
@@ -93,32 +83,32 @@ const Avatar = ({
   }, []);
   const avatarColor = (0, _react.useMemo)(() => (0, _color.getNormalColor)(color, theme.palette, theme.palette.accents_2), [color, theme.palette]);
   const avatarTextColor = (0, _react.useMemo)(() => (0, _color.getNormalColor)(textColor, theme.palette, theme.palette.text), [textColor, theme.palette]);
-  const hoverBackground = (0, _react.useMemo)(() => color === 'gradient' || !bordered ? avatarColor : (0, _color.addColorAlpha)(avatarColor, 0.8), [color, avatarColor, bordered]);
-
-  if (_assertion.__DEV__ && color && !(0, _color.isNormalColor)(color) && !(0, _color.isColor)(color)) {
-    (0, _useWarning.default)(`Props "color" ${color} is not a valid color.`, 'Avatar');
-  }
-
+  const hoverBackground = (0, _react.useMemo)(() => color === 'gradient' || !bordered ? avatarColor : (0, _color.addColorAlpha)(avatarColor, 0.6), [color, avatarColor, bordered]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", { ...props,
-    className: _style.default.dynamic([["556121610", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)']]]) + " " + (props && props.className != null && props.className || `avatar ${bordered ? 'bordered' : ''} ${className}`),
+    className: _style.default.dynamic([["3734005641", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)']]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('avatar', {
+      bordered,
+      'only-text-avatar': showText
+    }, className) || ""),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: _style.default.dynamic([["556121610", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "avatar-bg"
+      className: _style.default.dynamic([["3734005641", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "avatar-bg"
     }), !showText && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       ref: imgRef,
       src: src,
       alt: alt,
       onLoad: () => setReady(true),
-      className: _style.default.dynamic([["556121610", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)']]]) + " " + `avatar-img ${ready ? 'avatar-ready' : ''}`
+      className: _style.default.dynamic([["3734005641", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)']]]) + " " + ((0, _clsx.default)('avatar-img', {
+        'avatar-ready': ready
+      }) || "")
     }), showText && !icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: _style.default.dynamic([["556121610", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "avatar-text",
+      className: _style.default.dynamic([["3734005641", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "avatar-text",
       children: safeText(text)
     }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: _style.default.dynamic([["556121610", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "icon",
+      className: _style.default.dynamic([["3734005641", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "icon",
       children: icon
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "556121610",
-      dynamic: [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)'],
-      children: `.avatar.__jsx-style-dynamic-selector{position:relative;z-index:1;min-width:${width};min-height:${width};width:${width};height:${width};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;box-sizing:border-box;position:relative;overflow:hidden;border-radius:${radius};vertical-align:top;cursor:${pointer ? 'pointer' : 'auto'};margin:0 0 0 ${marginLeft};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;}.avatar-bg.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:${width};height:${width};background:${avatarColor};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;}.avatar.bordered.__jsx-style-dynamic-selector{padding:${border};}.avatar.__jsx-style-dynamic-selector:first-child{margin:0;}.avatar-img.__jsx-style-dynamic-selector{z-index:99;opacity:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-radius:50%;background:${theme.palette.background};border-radius:${radius};-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;}.avatar-ready.__jsx-style-dynamic-selector{opacity:1;}.bordered.__jsx-style-dynamic-selector .avatar-img.__jsx-style-dynamic-selector{border:${border} solid ${theme.palette.background};}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:calc(0.8em + ${width} * 0.1);text-align:center;color:${avatarTextColor};-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;left:50%;top:50%;text-align:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.bordered.__jsx-style-dynamic-selector:hover .avatar-bg.__jsx-style-dynamic-selector{background:${hoverBackground};-webkit-filter:${color === 'gradient' ? 'hue-rotate(40deg)' : 'none'};filter:${color === 'gradient' ? 'hue-rotate(40deg)' : 'none'};}.avatar.__jsx-style-dynamic-selector:hover .avatar-img.__jsx-style-dynamic-selector{-webkit-transform:${zoomed && 'scale(1.125)'};-ms-transform:${zoomed && 'scale(1.125)'};transform:${zoomed && 'scale(1.125)'};}.avatar.__jsx-style-dynamic-selector:hover .avatar-bg.__jsx-style-dynamic-selector{box-shadow:inset 0 0 40px 0 rgb(0 0 0 / 14%);}`
+      id: "3734005641",
+      dynamic: [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)'],
+      children: `.avatar.__jsx-style-dynamic-selector{position:relative;z-index:1;min-width:${width};min-height:${width};width:${width};height:${width};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: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;box-sizing:border-box;position:relative;overflow:hidden;border-radius:${radius};vertical-align:top;cursor:${pointer ? 'pointer' : 'auto'};margin:0 0 0 ${marginLeft};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;}.avatar-bg.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:${width};height:${width};background:${avatarColor};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;}.avatar.bordered.__jsx-style-dynamic-selector{padding:${border};}.avatar.__jsx-style-dynamic-selector:first-child{margin:0;}.avatar-img.__jsx-style-dynamic-selector{z-index:99;opacity:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-radius:50%;background:${theme.palette.background};border-radius:${radius};-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;}.avatar-ready.__jsx-style-dynamic-selector{opacity:1;}.bordered.__jsx-style-dynamic-selector .avatar-img.__jsx-style-dynamic-selector{border:${border} solid ${theme.palette.background};}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:calc(0.8em + ${width} * 0.1);text-align:center;color:${avatarTextColor};-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;left:50%;top:50%;text-align:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.bordered.__jsx-style-dynamic-selector:hover .avatar-bg.__jsx-style-dynamic-selector{background:${hoverBackground};-webkit-filter:${color === 'gradient' ? 'opacity(0.6)' : 'none'};filter:${color === 'gradient' ? 'opacity(0.6)' : 'none'};}.avatar.__jsx-style-dynamic-selector:hover .avatar-img.__jsx-style-dynamic-selector{-webkit-transform:${zoomed && 'scale(1.125)'};-ms-transform:${zoomed && 'scale(1.125)'};transform:${zoomed && 'scale(1.125)'};}.avatar.__jsx-style-dynamic-selector:hover .avatar-bg.__jsx-style-dynamic-selector{box-shadow:inset 0 0 40px 0 rgb(0 0 0 / 14%);}`
     })]
   });
 };

package/cjs/backdrop/index.d.ts

@@ -4,12 +4,14 @@ interface Props {
     visible?: boolean;
     fullScreenContent?: boolean;
     width?: string;
+    animated?: boolean;
     blur?: boolean;
 }
 declare const defaultProps: {
     onClick: () => void;
     visible: boolean;
     blur: boolean;
+    animated: boolean;
     fullScreenContent: boolean;
 };
 declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -18,6 +20,7 @@ declare const _default: React.ComponentType<Partial<{
     onClick: () => void;
     visible: boolean;
     blur: boolean;
+    animated: boolean;
     fullScreenContent: boolean;
-}> & Omit<React.PropsWithChildren<BackdropProps>, "blur" | "onClick" | "visible" | "fullScreenContent">>;
+}> & Omit<React.PropsWithChildren<BackdropProps>, "blur" | "animated" | "onClick" | "visible" | "fullScreenContent">>;
 export default _default;

package/cjs/backdrop/index.js

@@ -31,6 +31,7 @@ const defaultProps = {
   onClick: () => {},
   visible: false,
   blur: false,
+  animated: true,
   fullScreenContent: false
 };
 
@@ -40,6 +41,7 @@ const Backdrop = /*#__PURE__*/_react.default.memo(({
   visible,
   width,
   blur,
+  animated,
   fullScreenContent,
   ...props
 }) => {
@@ -63,13 +65,8 @@ const Backdrop = /*#__PURE__*/_react.default.memo(({
     }, 0);
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssTransition.default, {
-    name: "backdrop-wrapper",
-    visible: visible,
-    enterTime: 20,
-    leaveTime: 20,
-    clearTime: 150,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  const renderChildren = (0, _react.useMemo)(() => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       onClick: clickHandler,
       onMouseUp: mouseUpHandler,
       ...props,
@@ -88,7 +85,17 @@ const Backdrop = /*#__PURE__*/_react.default.memo(({
         dynamic: [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.breakpoints.sm.max],
         children: `.backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:99999;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.content.__jsx-style-dynamic-selector{position:relative;z-index:999999;outline:none;width:100%;max-width:${width};margin:20px auto;vertical-align:middle;display:inline-block;}.fullscreen.__jsx-style-dynamic-selector .content.__jsx-style-dynamic-selector{width:100vw;max-width:100vw;height:100vh;margin:0;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none;z-index:99999;}.layer-default.__jsx-style-dynamic-selector{background-color:black;opacity:${theme.expressiveness.portalOpacity};-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);}.layer-blur.__jsx-style-dynamic-selector{opacity:1;-webkit-transition:background 0.35s cubic-bezier(0.4,0,0.2,1);transition:background 0.35s cubic-bezier(0.4,0,0.2,1);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,0.1);}.fullscreen.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{display:none;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:${theme.expressiveness.portalOpacity};}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:${theme.expressiveness.portalOpacity};}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.1);}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.4);}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.4);}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.1);}@media only screen and (max-width:${theme.breakpoints.sm.max}){.content.__jsx-style-dynamic-selector{width:90%;}}`
       })]
-    })
+    });
+  }, [children]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: animated ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssTransition.default, {
+      name: "backdrop-wrapper",
+      visible: visible,
+      enterTime: 20,
+      leaveTime: 20,
+      clearTime: 150,
+      children: renderChildren
+    }) : visible ? renderChildren : null
   });
 });
 

package/cjs/button/button-group.d.ts

@@ -49,5 +49,5 @@ declare const _default: React.ComponentType<Partial<{
     size: "mini" | "small" | "medium" | "large" | "xlarge";
     color: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient";
     className: string;
-}> & Omit<ButtonGroupProps, "light" | "rounded" | "className" | "animated" | "color" | "vertical" | "bordered" | "size" | "auto" | "flat" | "disabled" | "shadow" | "ghost" | "borderWeight">>;
+}> & Omit<ButtonGroupProps, "light" | "rounded" | "className" | "animated" | "color" | "vertical" | "bordered" | "size" | "borderWeight" | "auto" | "flat" | "disabled" | "shadow" | "ghost">>;
 export default _default;

package/cjs/button/button.js

@@ -13,7 +13,7 @@ var _useWarning = _interopRequireDefault(require("../use-warning"));
 
 var _useTheme = _interopRequireDefault(require("../use-theme"));
 
-var _button = _interopRequireDefault(require("./button.drip"));
+var _drip = _interopRequireDefault(require("../utils/drip"));
 
 var _buttonLoading = _interopRequireDefault(require("./button-loading"));
 
@@ -29,6 +29,8 @@ var _dimensions = require("../utils/dimensions");
 
 var _assertion = require("../utils/assertion");
 
+var _useDrip = _interopRequireDefault(require("../use-drip"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -61,9 +63,6 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({ ...btnProps
   const theme = (0, _useTheme.default)();
   const buttonRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => buttonRef.current);
-  const [dripShow, setDripShow] = (0, _react.useState)(false);
-  const [dripX, setDripX] = (0, _react.useState)(0);
-  const [dripY, setDripY] = (0, _react.useState)(0);
   const groupConfig = (0, _buttonGroupContext.useButtonGroupContext)();
   const filteredProps = (0, _utils.filterPropsWithGroup)(btnProps, groupConfig);
   /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -121,24 +120,19 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({ ...btnProps
     loaderSize
   } = (0, _react.useMemo)(() => (0, _styles.getButtonSize)(size, auto), [size, auto]);
   const dripColor = (0, _react.useMemo)(() => (0, _styles.getButtonDripColor)(theme.palette, filteredProps), [theme.palette, filteredProps]);
+  const {
+    onClick: onDripClickHandler,
+    ...dripBindings
+  } = (0, _useDrip.default)(false, buttonRef);
   const paddingForAutoMode = (0, _react.useMemo)(() => auto || size === 'mini' ? `calc(var(--next-ui-button-height) / 2 + var(--next-ui-button-padding) * .5)` : 0, [auto, size]);
   const hoverBeforeOpacity = (0, _react.useMemo)(() => filteredProps.color === 'gradient' && ghost ? 1 : 0, [ghost, filteredProps]);
   const paddingForBorderedGradient = (0, _react.useMemo)(() => filteredProps.color === 'gradient' && (bordered || ghost) ? `var(--next-ui-button-padding)` : 0, [filteredProps.color, bordered]);
 
-  const dripCompletedHandle = () => {
-    setDripShow(false);
-    setDripX(0);
-    setDripY(0);
-  };
-
   const clickHandler = event => {
     if (disabled || loading) return;
 
     if (animated && buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect();
-      setDripShow(true);
-      setDripX(event.clientX - rect.left);
-      setDripY(event.clientY - rect.top);
+      onDripClickHandler(event);
     }
 
     onClick && onClick(event);
@@ -177,11 +171,9 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({ ...btnProps
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _style.default.dynamic([["3651782765", [bg, padding, height, height, minWidth, width, radius, (border == null ? void 0 : border.width) || '2px', (border == null ? void 0 : border.display) || 'none', (border == null ? void 0 : border.color) || 'transparent', fontSize, color, cursor, events, shadowColor, radius, padding, height, color, bg, hover == null ? void 0 : hover.bg, radius, hoverBeforeOpacity, animated ? 'scale(0.97)' : 'none', (hover == null ? void 0 : hover.bg) || 'inherit', hover == null ? void 0 : hover.color, (hover == null ? void 0 : (_hover$style = hover.style) == null ? void 0 : _hover$style.filter) || 'none', hover == null ? void 0 : hover.color, (hover == null ? void 0 : (_hover$border = hover.border) == null ? void 0 : _hover$border.color) || 'transparent', hover == null ? void 0 : (_hover$border2 = hover.border) == null ? void 0 : _hover$border2.width, hover == null ? void 0 : hover.padding, cursor, events, bordered || ghost ? (border == null ? void 0 : border.width) || '2px' : '0', paddingForBorderedGradient, loading ? 0 : 1, paddingForAutoMode, paddingForAutoMode]]]) + " " + "text",
       children: children
-    }), dripShow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-      x: dripX,
-      y: dripY,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_drip.default, {
       color: dripColor,
-      onCompleted: dripCompletedHandle
+      ...dripBindings
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
       id: "3651782765",
       dynamic: [bg, padding, height, height, minWidth, width, radius, (border == null ? void 0 : border.width) || '2px', (border == null ? void 0 : border.display) || 'none', (border == null ? void 0 : border.color) || 'transparent', fontSize, color, cursor, events, shadowColor, radius, padding, height, color, bg, hover == null ? void 0 : hover.bg, radius, hoverBeforeOpacity, animated ? 'scale(0.97)' : 'none', (hover == null ? void 0 : hover.bg) || 'inherit', hover == null ? void 0 : hover.color, (hover == null ? void 0 : (_hover$style = hover.style) == null ? void 0 : _hover$style.filter) || 'none', hover == null ? void 0 : hover.color, (hover == null ? void 0 : (_hover$border = hover.border) == null ? void 0 : _hover$border.color) || 'transparent', hover == null ? void 0 : (_hover$border2 = hover.border) == null ? void 0 : _hover$border2.width, hover == null ? void 0 : hover.padding, cursor, events, bordered || ghost ? (border == null ? void 0 : border.width) || '2px' : '0', paddingForBorderedGradient, loading ? 0 : 1, paddingForAutoMode, paddingForAutoMode],

package/cjs/card/card-body.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { AlignContent, AlignItems, Justify, Direction } from '../utils/prop-types';
+interface Props {
+    justify?: Justify;
+    direction?: Direction;
+    alignItems?: AlignItems;
+    alignContent?: AlignContent;
+    noPadding?: boolean;
+    width?: string;
+    height?: string;
+    className?: string;
+}
+declare const defaultProps: {
+    width: string;
+    height: string;
+    justify: string;
+    alignItems: string;
+    alignContent: string;
+    direction: string;
+    noPadding: boolean;
+    className: string;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type CardBodyProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    width: string;
+    height: string;
+    justify: string;
+    alignItems: string;
+    alignContent: string;
+    direction: string;
+    noPadding: boolean;
+    className: string;
+}> & Omit<CardBodyProps, "width" | "height" | "className" | "justify" | "direction" | "alignItems" | "alignContent" | "noPadding">>;
+export default _default;

package/cjs/card/card-body.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _cardContext = require("./card-context");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  width: '100%',
+  height: 'auto',
+  justify: 'inherit',
+  alignItems: 'inherit',
+  alignContent: 'inherit',
+  direction: 'column',
+  noPadding: false,
+  className: ''
+};
+
+const CardBody = ({
+  className,
+  justify,
+  alignContent,
+  alignItems,
+  noPadding: noPaddingProp,
+  direction,
+  width,
+  height,
+  children,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  const {
+    noPadding: noPaddingContext
+  } = (0, _react.useContext)(_cardContext.CardContext);
+  const noPadding = (0, _react.useMemo)(() => {
+    return noPaddingContext !== undefined ? noPaddingContext : noPaddingProp;
+  }, [noPaddingProp, noPaddingContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+    className: _style.default.dynamic([["3689227210", [width, height, direction, justify, alignItems, alignContent, theme.layout.gapHalf, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('card-body', {
+      'no-padding': noPadding
+    }, className) || ""),
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+      id: "3689227210",
+      dynamic: [width, height, direction, justify, alignItems, alignContent, theme.layout.gapHalf, theme.layout.gap],
+      children: `.card-body.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;width:${width};height:${height};-webkit-flex-direction:${direction};-ms-flex-direction:${direction};flex-direction:${direction};-webkit-box-pack:${justify};-webkit-justify-content:${justify};-ms-flex-pack:${justify};justify-content:${justify};-webkit-align-items:${alignItems};-webkit-box-align:${alignItems};-ms-flex-align:${alignItems};align-items:${alignItems};-webkit-align-content:${alignContent};-ms-flex-line-pack:${alignContent};align-content:${alignContent};padding:${theme.layout.gapHalf} calc(${theme.layout.gap} + 0.25rem);overflow-y:auto;position:relative;text-align:left;}.card-body.no-padding.__jsx-style-dynamic-selector{padding:0;}.card-body.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.card-body.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}`
+    })]
+  });
+};
+
+const MemoCardBody = /*#__PURE__*/_react.default.memo(CardBody);
+
+var _default = (0, _withDefaults.default)(MemoCardBody, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/cjs/card/card-context.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CardConfig {
+    autoMargin?: boolean;
+    noPadding?: boolean;
+    background?: string;
+}
+export declare const CardContext: React.Context<CardConfig>;
+export declare const useCardContext: () => CardConfig;

package/cjs/card/card-context.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useCardContext = exports.CardContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const defaultContext = {
+  noPadding: undefined
+};
+
+const CardContext = /*#__PURE__*/_react.default.createContext(defaultContext);
+
+exports.CardContext = CardContext;
+
+const useCardContext = () => _react.default.useContext(CardContext);
+
+exports.useCardContext = useCardContext;

package/cjs/card/card-footer.d.ts

@@ -1,16 +1,37 @@
 import React from 'react';
+import { NormalColors, NormalWeights, SimpleColors } from '../utils/prop-types';
 interface Props {
-    disableAutoMargin?: boolean;
+    blur?: boolean;
+    autoMargin?: boolean;
+    border?: boolean;
     className?: string;
+    width?: string;
+    height?: string;
+    color?: NormalColors | string;
+    borderColor?: SimpleColors | string;
+    borderWeight?: NormalWeights;
+    noPadding?: boolean;
 }
 declare const defaultProps: {
-    disableAutoMargin: boolean;
+    autoMargin: boolean;
+    blur: boolean;
+    border: boolean;
+    width: string;
+    height: string;
+    noPadding: boolean;
+    borderWeight: "light" | "normal" | "bold";
     className: string;
 };
 declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export declare type CardFooterProps = Props & typeof defaultProps & NativeAttrs;
 declare const _default: React.ComponentType<Partial<{
-    disableAutoMargin: boolean;
+    autoMargin: boolean;
+    blur: boolean;
+    border: boolean;
+    width: string;
+    height: string;
+    noPadding: boolean;
+    borderWeight: "light" | "normal" | "bold";
     className: string;
-}> & Omit<CardFooterProps, "className" | "disableAutoMargin">>;
+}> & Omit<CardFooterProps, "width" | "height" | "blur" | "className" | "borderWeight" | "border" | "autoMargin" | "noPadding">>;
 export default _default;

package/cjs/card/card-footer.js

@@ -7,32 +7,80 @@ exports.default = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useTheme = _interopRequireDefault(require("../use-theme"));
 
 var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
 
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _cardContext = require("./card-context");
+
+var _color = require("../utils/color");
+
+var _dimensions = require("../utils/dimensions");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const defaultProps = {
-  disableAutoMargin: false,
+  autoMargin: false,
+  blur: false,
+  border: false,
+  width: '100%',
+  height: 'auto',
+  noPadding: false,
+  borderWeight: 'light',
   className: ''
 };
 
 const CardFooter = ({
   children,
+  blur,
   className,
-  disableAutoMargin,
+  color,
+  width,
+  height,
+  border: borderProp,
+  borderColor,
+  borderWeight,
+  noPadding,
+  autoMargin: autoMarginProp,
   ...props
 }) => {
   const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("footer", { ...props,
-    className: _style.default.dynamic([["3326643427", [theme.layout.gapHalf, theme.layout.gap, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.layout.gap, theme.layout.gapQuarter]]]) + " " + (props && props.className != null && props.className || `${disableAutoMargin ? '' : 'auto-margin'} ${className}`),
+  const {
+    background,
+    autoMargin: autoMarginContext
+  } = (0, _react.useContext)(_cardContext.CardContext);
+  const autoMargin = (0, _react.useMemo)(() => {
+    return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
+  }, [autoMarginProp, autoMarginContext]);
+  const bgColor = (0, _react.useMemo)(() => {
+    if (color) {
+      return (0, _color.getNormalColor)(color, theme.palette);
+    }
+
+    return background || theme.palette.background;
+  }, [color, theme.palette, background]);
+  const border = (0, _react.useMemo)(() => {
+    if (!borderProp) return 'none';
+    return `${(0, _dimensions.getNormalWeight)(borderWeight)} solid ${(0, _color.getNormalColor)(borderColor, theme.palette, theme.palette.border)}`;
+  }, [borderWeight, theme.palette, borderColor, borderProp]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+    className: _style.default.dynamic([["135585066", [width, height, theme.layout.gapHalf, theme.layout.gap, bgColor, border, theme.layout.radius, theme.layout.radius, (0, _color.addColorAlpha)(bgColor, 0.4), theme.layout.gapQuarter]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('card-footer', {
+      'auto-margin': autoMargin,
+      blur,
+      'no-padding': noPadding
+    }, className) || ""),
     children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "3326643427",
-      dynamic: [theme.layout.gapHalf, theme.layout.gap, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.layout.gap, theme.layout.gapQuarter],
-      children: `footer.__jsx-style-dynamic-selector{padding:${theme.layout.gapHalf} ${theme.layout.gap};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;overflow:hidden;color:inherit;background-color:inherit;font-size:0.875rem;border-top:1px solid ${theme.palette.border};border-bottom-left-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};min-height:calc(2.5 * ${theme.layout.gap});}.auto-margin.__jsx-style-dynamic-selector *{margin-top:0;margin-bottom:0;margin-right:${theme.layout.gapQuarter};}`
+      id: "135585066",
+      dynamic: [width, height, theme.layout.gapHalf, theme.layout.gap, bgColor, border, theme.layout.radius, theme.layout.radius, (0, _color.addColorAlpha)(bgColor, 0.4), theme.layout.gapQuarter],
+      children: `.card-footer.__jsx-style-dynamic-selector{width:${width};height:${height};padding:${theme.layout.gapHalf} ${theme.layout.gap};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;overflow:hidden;color:inherit;background-color:${bgColor};font-size:0.875rem;border-top:${border};border-bottom-left-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};}.card-footer.blur.__jsx-style-dynamic-selector{-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);background:${(0, _color.addColorAlpha)(bgColor, 0.4)};}.card-footer.no-padding.__jsx-style-dynamic-selector{padding:0;}.auto-margin.__jsx-style-dynamic-selector *{margin-top:0;margin-bottom:0;margin-right:${theme.layout.gapQuarter};}`
     })]
   });
 };