@hhgtech/hhg-components/build/esm/MobileBottomNavigationIcon-f74297e5.js

Hello Health Group common components

import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default from 'react';
import { T as Text } from './index-9f5659e8.js';
import { theme } from './miscTheme.js';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { M as MediaQueries } from './utils-cb7242c7.js';

const slideInUp = keyframes `
  from {
    transform: translateY(100%);
    visibility: visible;
  }

  to {
    transform: translateY(0);
  }
`;
const slideOutDown = keyframes `
  from {
    transform: translate(0, 0);
  }

  to {
    visibility: hidden;
    transform: translate(0, 100%);
  }
`;
const StyledMobileBottomNavigationIcon = styled.div `
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  gap: 4px;

  .mobile-navigation-label {
    font-weight: 500;
    font-size: 10px;
    line-height: 16px;
    color: ${theme.colors.gray600};
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 60px;
    text-align: center;
    ${MediaQueries.mbDown} {
      max-width: 60px;
    }
  }

  .mobile-navigation-icon {
    position: relative;
    height: 24px;
    &[data-no-label='true'] {
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0px;
      gap: 16px;
      width: 40px;
      height: 40px;
    }
  }

  &[data-is-special='true'] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 12px 4px 6px;
    gap: 4px;

    min-width: 152px;
    height: 32px;
    /* Neutral/Neutral-50 */
    background: ${theme.colors.primary50};
    border-radius: 20px;
    flex-grow: 1;
    .mobile-navigation-icon {
      &[data-no-label='true'] {
        width: 24px;
        height: 24px;
      }
    }
    .mobile-navigation-label {
      max-width: max-content;
      color: ${theme.colors.primaryBase};
    }
  }

  &[data-is-active='true'] {
    .mobile-navigation-label {
      color: ${theme.colors.primaryBase};
    }
  }

  &[data-is-disabled='true'] {
    opacity: 0.2;
  }
`;
const StyledMobileBottomNavigation = styled.div `
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 56px;
  min-height: 56px;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
  background-color: ${theme.colors.white};
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    min-height: calc(56px + env(safe-area-inset-bottom));
    max-height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  a {
    text-decoration: none;
  }
  &[data-is-collapsed='true'] {
    animation: ${slideOutDown} 500ms ease-in-out forwards;
  }

  &[data-is-collapsed='false'] {
    animation: ${slideInUp} 500ms ease-in-out forwards;
  }
  &[data-template='health-tool'] {
    height: 44px;
    max-height: 44px;
    min-height: 44px;
    justify-content: space-between;
    & > div {
      flex: 0;
    }
  }
`;
const StyledBadge = styled.span `
  position: absolute;
  left: 100%;
  transform: translate(-10px, calc(-50% + 3px));
  background-color: ${theme.colors.green800};
  border-radius: 32px;
  border: 2px solid ${theme.colors.white};
  padding: 1px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 20px;
  aspect-ratio: 1;
  &[data-no-label='true'] {
    left: 0;
    transform: translate(22px, -50%);
  }
`;
styled.div `
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background-color: ${theme.colors.primaryBase};
  transition: width 150ms linear;
`;
styled.div `
  a {
    text-decoration: none;
  }
`;

const MobileBottomNavigationIcon = (_a) => {
    var { badgeAmount, disabled = false, hasBadge = false, icon, isActive = false, isSpecial = false, label } = _a, props = __rest(_a, ["badgeAmount", "disabled", "hasBadge", "icon", "isActive", "isSpecial", "label"]);
    return (React__default.createElement(StyledMobileBottomNavigationIcon, Object.assign({ "data-is-special": isSpecial, "data-is-active": isActive, "data-is-disabled": disabled }, props),
        React__default.createElement("div", { className: "mobile-navigation-icon", "data-no-label": !Boolean(label) },
            hasBadge && (React__default.createElement(StyledBadge, { "data-no-label": !Boolean(label) },
                React__default.createElement(Text, { size: "s5", weight: "semiBold", color: isSpecial ? theme.colors.primaryBase : theme.colors.white }, badgeAmount))),
            icon),
        label && React__default.createElement("span", { className: "mobile-navigation-label" }, label)));
};

export { MobileBottomNavigationIcon as M, StyledMobileBottomNavigation as S };