@rolster/react-components 18.24.5 → 18.24.6

package/dist/cjs/assets/{index-Bu13z0o-.css → index-CtqvRNNR.css}

@@ -276,7 +276,7 @@
   --pvt-classic-font-color: var(--rls-app-color-400);
   --pvt-classic-border: none;
   --pvt-raised-background: var(--rls-theme-color-200);
-  --pvt-raised-font-color: var(--rls-theme-color-400);
+  --pvt-raised-font-color: var(--rls-theme-color-050);
   --pvt-raised-border: none;
   --pvt-flat-background: var(--rls-theme-color-100);
   --pvt-flat-font-color: var(--rls-theme-color-300);
@@ -1930,6 +1930,61 @@
   align-items: center;
 } /*# sourceMappingURL=Toolbar.css.map */
 
+.rls-bottom-sheet {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+}
+.rls-bottom-sheet--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-bottom-sheet__component {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  max-width: 240rem;
+  max-height: 75%;
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--rls-z-index-2);
+  border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
+  background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
+  transform: var(--pvt-component-transform);
+  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
+    transform 125ms 0ms var(--rls-deceleration-curve),
+    visibility 125ms 0ms var(--rls-deceleration-curve);
+}
+.rls-bottom-sheet__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: 1;
+  background: var(--rls-theme-backdrop-900);
+  backdrop-filter: blur(2px);
+  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
+} /*# sourceMappingURL=BottomSheet.css.map */
+
 .rls-card {
   --rlc-divider-background: var(--rls-app-color-300);
   --pvt-background: var(--rls-app-color-100);
@@ -2189,9 +2244,6 @@
   align-items: center;
   justify-content: center;
 }
-.rls-modal--overflow {
-  --pvt-component-overflow: initial;
-}
 .rls-modal--visible {
   --pvt-component-visibility: visible;
   --pvt-component-height: auto;

package/dist/cjs/index.js

@@ -2393,6 +2393,13 @@ function RlsToolbar({ actions, children, subtitle }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-toolbar", children: [jsxRuntimeExports.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntimeExports.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntimeExports.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx("div", { children: action }, index))) }))] }));
 }
 
+function RlsBottonSheet({ children, className, visible, rlsTheme }) {
+    const classNameSheet = require$$0.useMemo(() => {
+        return renderClassStatus('rls-bottom-sheet', { visible }, className);
+    }, [className, visible]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameSheet, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__backdrop" })] }), document.body);
+}
+
 function RlsCard({ children, outline, rlsTheme }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-card', { outline });
@@ -2833,10 +2840,10 @@ function RlsFieldAutocomplete(props) {
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
-function RlsModal({ children, className, overflow, visible, rlsTheme }) {
+function RlsModal({ children, className, visible, rlsTheme }) {
     const classNameModal = require$$0.useMemo(() => {
-        return renderClassStatus('rls-modal', { overflow, visible }, className);
-    }, [className, overflow, visible]);
+        return renderClassStatus('rls-modal', { visible }, className);
+    }, [className, visible]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
 
@@ -3780,6 +3787,7 @@ exports.RlsApplication = RlsApplication;
 exports.RlsAvatar = RlsAvatar;
 exports.RlsBadge = RlsBadge;
 exports.RlsBallot = RlsBallot;
+exports.RlsBottonSheet = RlsBottonSheet;
 exports.RlsBreadcrumb = RlsBreadcrumb;
 exports.RlsButton = RlsButton;
 exports.RlsButtonAction = RlsButtonAction;