@hhgtech/hhg-components/build/index-919460ff.js

Hello Health Group common components

'use strict';

var tslib_es6 = require('./tslib.es6-af09a0ba.js');
var React = require('react');
var core = require('@mantine/core');
var index = require('./index-78a4fbc3.js');
var vaul = require('vaul');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
var index$1 = require('./index-ec32050c.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

styled__default["default"](index.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: ${miscTheme.theme.colors.neutral500};
    margin: 16px auto;
    flex-shrink: 0;
  }
`;
const StyledDrawerBottomContent = styled__default["default"](vaul.Drawer.Content) `
  position: fixed;
  z-index: ${index$1.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__default["default"](vaul.Drawer.Overlay) `
  position: fixed;
  inset: 0;
  z-index: ${index$1.ZINDEX_SSO - 9e6};
  width: 100%;
  max-height: 100%;
  background-color: rgb(0, 0, 0, 0.4);
`;
const StyledDrawerBottomHandler = styled__default["default"](vaul.Drawer.Handle) `
  &[data-vaul-handle] {
    width: 44px;
    height: 3px;
    background-color: ${miscTheme.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 = tslib_es6.__rest(_a, ["children", "onClose", "isOpen", "onOpenChange", "isMobile", "classNames", "isLinear", "overlayClassName", "contentClassName", "handlerClassName", "drawerOverlayProps"]);
    const { isDragging, handleDragStart, handleDragEnd } = index.useDrawerDrag();
    const _b = restProps, { onDrag: onDragFromProps, onRelease: onReleaseFromProps } = _b, drawerRest = tslib_es6.__rest(_b, ["onDrag", "onRelease"]);
    if (isMobile) {
        return (React__default["default"].createElement(vaul.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["default"].createElement(vaul.Drawer.Portal, null,
                React__default["default"].createElement(StyledDrawerBottomOverlay, Object.assign({ className: core.clsx(overlayClassName, 'drawer__overlay') }, drawerOverlayProps)),
                React__default["default"].createElement(StyledDrawerBottomContent, { isDragging: isDragging, className: core.clsx(contentClassName, 'drawer__content'), "data-is-linear": isLinear },
                    React__default["default"].createElement(vaul.Drawer.Title, { style: { display: 'none' } }),
                    React__default["default"].createElement(StyledDrawerBottomHandler, { className: core.clsx(handlerClassName, 'drawer__handle') }),
                    children))));
    }
    return (React__default["default"].createElement(core.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));
}

exports.DrawerBottom = DrawerBottom;