import e, { keyframes as r } from "styled-components";
import { getColorAlias as a, convertToTransientProps as t, getSpacing as i } from "../../utils/index.js";
const n = r`
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
`, s = r`
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
`, c = e.div.withConfig({
  shouldForwardProp: t(["isVisible"])
})`
  display: flex;
  background-color: ${a("containerDefault")};
  box-shadow: ${(o) => o.theme.elevation.e3};
  border-radius: ${(o) => o.theme.radius.roundedB};
  font-family: ${(o) => o.theme.font.familyPrimary};
  animation: ${(o) => o.isVisible ? n : s} 0.4s ease-in-out;
  z-index: 1000;
`, l = e.div``, m = e.div.withConfig({
  shouldForwardProp: t(["narrow"])
})`
  display: flex;
  flex-direction: ${({ narrow: o }) => o ? "column" : "row"};
`, f = e.div`
  margin: ${i("s02", "s00")};
`, g = e.div`
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: ${i("s02")};
  padding: ${i("s00", "s07")};
`, y = e.div`
  align-content: center;
`;
export {
  m as CalendarsWrapper,
  l as Content,
  f as DatePickerWrapper,
  y as PeriodName,
  g as PeriodWrapper,
  c as Wrapper
};
