@navinc/base-react-components/dist/wayfinder/toast/styles.js

Nav's Pattern Library

import * as ToastPrimitive from '@radix-ui/react-toast';
import { styled } from 'styled-components';
import { getVariationProps } from './helpers.js';
import { Icon } from '../icon/icon.js';
import { addClassNameTo } from '../../add-classname-to.js';
export const StyledVariationIcon = styled(addClassNameTo(Icon, /* cn */ '[grid-area:variation-icon]')).withConfig({ displayName: "brc-sc-StyledVariationIcon", componentId: "brc-sc-1r6a7vr" }) ``;
export const StyledCloseButton = styled(addClassNameTo(ToastPrimitive.Close, /* cn */ '[grid-area:close-button] flex bg-none border-0 p-0')).withConfig({ displayName: "brc-sc-StyledCloseButton", componentId: "brc-sc-4zv7tf" }) ``;
export const ToastContainer = styled(ToastPrimitive.Root).withConfig({ displayName: "brc-sc-ToastContainer", componentId: "brc-sc-1czvtzw" }) `
  background: ${({ theme, variation }) => theme[getVariationProps(variation).background]};
  color: ${({ theme, variation }) => theme[getVariationProps(variation).color]};
  display: grid;
  gap: ${({ theme }) => theme.space(0, 100)};
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'variation-icon body-text close-button'
    '. body-text .';
  width: 100%;
  padding: ${({ theme }) => theme.spacing.space150};
  border-radius: ${({ theme }) => theme.radius.radius300};

  ${({ theme }) => theme.elevations.elevation2};

  ${StyledVariationIcon}, ${StyledCloseButton} {
    color: ${({ theme, variation }) => theme[getVariationProps(variation).iconColor]};
  }
`;
export const StyledTitle = addClassNameTo(ToastPrimitive.Title, /* cn */ '[grid-area:title-text]');
export const StyledDescription = addClassNameTo(ToastPrimitive.Description, /* cn */ '[grid-area:description-text]');
export const ToastBody = addClassNameTo('div', /* cn */ '[grid-area:body-text] flex flex-col gap-50 justify-center');
export const StyledToastViewport = styled(ToastPrimitive.Viewport).withConfig({ displayName: "brc-sc-StyledToastViewport", componentId: "brc-sc-14pbkwr" }) `
  position: fixed;
  display: flex;
  flex-direction: column-reverse;
  align-items: end;
  padding: ${({ theme }) => theme.spacing.space200};
  width: 100%;

  /* Rather than using content-box sizing, add padding to max-width instead to preserve proper left position */
  max-width: ${({ theme }) => `calc(364px + ${theme.spacing.space200} + ${theme.spacing.space200})`};
  top: 0;
  right: 0;
  margin: 0;
  list-style: none;
  z-index: 9999999;
  outline: none;
  transition: transform 400ms ease;

  ${({ theme }) => theme.mediaQuery.largerThanPhone} {
    padding: ${({ theme }) => theme.spacing.space500};
    width: ${({ theme }) => `calc(364px + ${theme.spacing.space500} + ${theme.spacing.space500})`};
    max-width: 100vw;
  }

  & > ${ToastContainer} {
    margin-top: ${({ theme }) => theme.spacing.space150};
  }
`;
//# sourceMappingURL=styles.js.map