@hhgtech/hhg-components/build/esm/index-755575f0.js

Hello Health Group common components

import { _ as __rest } from './tslib.es6-00ab44b2.js';
import React__default from 'react';
import { clsx, Modal } from '@mantine/core';
import { D as DrawerComponent, u as useDrawerDrag } from './index-72e8c8cf.js';
import { Drawer } from 'vaul';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { Z as ZINDEX_SSO } from './index-8c40504a.js';

styled(DrawerComponent) `
  /* max-height: 100vh;
  max-height: 100dvh; */
  background-color: white;

  &[data-vaul-drawer-direction='bottom'] {
    top: initial !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    padding-bottom: 32px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .drawer__handle {
    width: 44px;
    height: 3px;
    background-color: ${theme.colors.neutral500};
    margin: 16px auto;
    flex-shrink: 0;
  }
`;
const StyledDrawerBottomContent = styled(Drawer.Content) `
  position: fixed;
  z-index: ${ZINDEX_SSO - 9e6 + 1};
  inset: 0;
  background-color: #fff;
  outline: none !important;

  &[data-is-linear='true'] {
    background: linear-gradient(180deg, #c3e3ff 1.86%, #fff 20%) !important;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
  }

  &[data-vaul-drawer-direction='bottom'] {
    top: initial;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    /* padding-bottom: 16px; */
  }

  ${(props) => props.isDragging &&
    `
      input {
        caret-color: transparent;
      }
    `}
`;
const StyledDrawerBottomOverlay = styled(Drawer.Overlay) `
  position: fixed;
  inset: 0;
  z-index: ${ZINDEX_SSO - 9e6};
  width: 100%;
  max-height: 100%;
  background-color: rgb(0, 0, 0, 0.4);
`;
const StyledDrawerBottomHandler = styled(Drawer.Handle) `
  &[data-vaul-handle] {
    width: 44px;
    height: 3px;
    background-color: ${theme.colors.neutral500};
    margin: 16px auto;
    flex-shrink: 0;
  }
`;

function DrawerBottom(_a) {
    var { children, onClose, isOpen, onOpenChange, isMobile, classNames, isLinear, overlayClassName, contentClassName, handlerClassName, drawerOverlayProps } = _a, restProps = __rest(_a, ["children", "onClose", "isOpen", "onOpenChange", "isMobile", "classNames", "isLinear", "overlayClassName", "contentClassName", "handlerClassName", "drawerOverlayProps"]);
    const { isDragging, handleDragStart, handleDragEnd } = useDrawerDrag();
    const _b = restProps, { onDrag: onDragFromProps, onRelease: onReleaseFromProps } = _b, drawerRest = __rest(_b, ["onDrag", "onRelease"]);
    if (isMobile) {
        return (React__default.createElement(Drawer.Root, Object.assign({}, drawerRest, { open: isOpen, onOpenChange: onOpenChange, onClose: onClose, onDrag: (event, percentageDragged) => {
                handleDragStart();
                onDragFromProps === null || onDragFromProps === void 0 ? void 0 : onDragFromProps(event, percentageDragged);
            }, onRelease: (event, openAfterRelease) => {
                handleDragEnd();
                onReleaseFromProps === null || onReleaseFromProps === void 0 ? void 0 : onReleaseFromProps(event, openAfterRelease);
            } }),
            React__default.createElement(Drawer.Portal, null,
                React__default.createElement(StyledDrawerBottomOverlay, Object.assign({ className: clsx(overlayClassName, 'drawer__overlay') }, drawerOverlayProps)),
                React__default.createElement(StyledDrawerBottomContent, { isDragging: isDragging, className: clsx(contentClassName, 'drawer__content'), "data-is-linear": isLinear },
                    React__default.createElement(Drawer.Title, { style: { display: 'none' } }),
                    React__default.createElement(StyledDrawerBottomHandler, { className: clsx(handlerClassName, 'drawer__handle') }),
                    children))));
    }
    return (React__default.createElement(Modal, Object.assign({ withCloseButton: true, centered: true, zIndex: 500, size: "auto", classNames: classNames, radius: "lg" }, restProps, { onClose: onClose, opened: isOpen, styles: {
            root: {
                maxHeight: '400px',
            },
            body: {
                background: isLinear
                    ? 'linear-gradient(180deg, #A5D4FF 0%, #FFFFFF 20%)'
                    : undefined,
            },
        } }), children));
}

export { DrawerBottom as D };