@rolster/react-components 18.25.2 → 18.25.4

package/dist/es/assets/{index-B6PshrCZ.css → index-C4DYcbf0.css}

@@ -2340,6 +2340,7 @@
   display: flex;
   max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
   height: var(--pvt-component-height);
+  max-height: calc(100% - var(--rls-sizing-x12));
   flex-direction: column;
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
@@ -2850,14 +2851,13 @@
 
 .rls-modal-sheet {
   --pvt-component-transform: translateY(150px) scale(0.6);
-  --pvt-component-transform-visible: translateY(0) scale(1);
   --pvt-component-bottom: initial;
   --pvt-component-max-width: var(
     --rlc-modal-sheet-max-width,
     calc(100% - var(--rls-sizing-x8))
   );
   --pvt-component-height: 0rem;
-  --pvt-component-max-height: initial;
+  --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
   --pvt-component-border-radius: var(--rls-sizing-x4);
   --pvt-component-opacity: 0;
   --pvt-component-visibility: hidden;
@@ -2878,7 +2878,7 @@
   --pvt-component-visibility: visible;
   --pvt-component-height: auto;
   --pvt-component-opacity: 1;
-  --pvt-component-transform: var(--pvt-component-transform-visible);
+  --pvt-component-transform: translateY(0) scale(1);
   --pvt-backdrop-bottom: 0rem;
   --pvt-backdrop-opacity: 1;
   visibility: visible;
@@ -2915,25 +2915,9 @@
   transition: opacity 120ms 0ms var(--rls-deceleration-curve),
     bottom 120ms 0ms var(--rls-deceleration-curve);
 }
-@media screen and (max-width: 640px) and (max-height: 960px) {
-  .rls-modal-sheet {
-    --pvt-component-max-height: calc(100% - 32rem);
-  }
-}
-@media screen and (max-width: 640px) and (max-height: 720px) {
-  .rls-modal-sheet {
-    --pvt-component-max-height: calc(100% - 24rem);
-  }
-}
-@media screen and (max-width: 640px) and (max-height: 560px) {
-  .rls-modal-sheet {
-    --pvt-component-max-height: calc(100% - 16rem);
-  }
-}
 @media screen and (max-width: 640px) {
   .rls-modal-sheet {
     --pvt-component-transform: translateY(100%);
-    --pvt-component-transform-visible: translateY(0);
     --pvt-component-bottom: 0px;
     --pvt-component-max-width: 240rem;
     --pvt-component-max-height: 75%;
@@ -2941,6 +2925,9 @@
       0rem 0rem;
     align-items: initial;
   }
+  .rls-modal-sheet--visible {
+    --pvt-component-transform: translateY(0);
+  }
   .rls-modal-sheet__component::before {
     display: block;
     content: '';
@@ -2950,6 +2937,21 @@
     background: var(--rls-app-color-300);
     margin: var(--rls-sizing-x3) auto;
   }
+}
+@media screen and (max-width: 640px) and (max-height: 960px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 32rem);
+  }
+}
+@media screen and (max-width: 640px) and (max-height: 720px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 24rem);
+  }
+}
+@media screen and (max-width: 640px) and (max-height: 560px) {
+  .rls-modal-sheet {
+    --pvt-component-max-height: calc(100% - 16rem);
+  }
 } /*# sourceMappingURL=ModalSheet.css.map */
 
 .rls-snackbar {

package/dist/es/index.js

@@ -2441,7 +2441,7 @@ 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, onAutoClose, visible, rlsTheme }) {
+function RlsBottomSheet({ children, className, onAutoClose, visible, rlsTheme }) {
     const classNameSheet = useMemo(() => {
         return renderClassStatus('rls-bottom-sheet', { visible }, className);
     }, [className, visible]);
@@ -3861,5 +3861,5 @@ function useDatatable() {
     return { scrolleable, tableRef };
 }
 
-export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottonSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldDouble, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDouble, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useImageEditorController, useListController, useRelocationOnComponent, useResize, useSnackbar };
+export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldDouble, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDouble, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useImageEditorController, useListController, useRelocationOnComponent, useResize, useSnackbar };
 //# sourceMappingURL=index.js.map