@activecollab/components 2.0.377 → 2.0.378

package/dist/esm/presentation/shared/PresentationShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresentationShell.js","names":["React","useCallback","useEffect","useRef","useState","styled","MainLogo","BREAKPOINT","SM","TRANSITION","XL","IconButton","ActivityIcon","CalendarIcon","ClockStopwatchIndicatorIcon","CloseIcon","CollapsIcon","EstimatesIcon","InvoicesIcon","MobileMenuIcon","MyWorkIcon","NotificationBellIcon","PeopleIcon","ProjectsIcon","ReportTimeIcon","ReportsIcon","RocketIcon","SearchIcon","Modal","Paper","Tooltip","Body2","Caption1","useResizeObserver","MENU_ITEMS","icon","text","active","StyledLayout","div","withConfig","displayName","componentId","StyledContentRow","StyledRightWindow","StyledMainMenu","StyledMenuHeader","StyledMenuScroll","StyledMenuSection","StyledMenuItem","a","StyledMobileMenuClose","StyledMobileMenuHeader","StyledIconRow","StyledTopRightControls","StyledHeaderAvatar","StyledPage","StyledPageBody","StyledPagePaper","MenuItemsMock","_ref","_ref$mobile","mobile","createElement","className","weight","color","map","_ref2","Icon","key","title","placement","disable","undefined","whitespace","MainMenuMock","_ref3","collapsed","onToggleCollapsed","footer","variant","size","onClick","MainMenuMobileMock","_ref4","open","close","onClose","MobileMenuHeaderMock","_ref5","onOpenMobileMenu","TopRightControlsMock","PresentationShell","_ref6","header","children","floating","menuFooter","_useState","mobileMenuOpen","setMobileMenuOpen","_useState2","setCollapsed","_useState3","isMobileView","setIsMobileView","ref","dimensions","width","handleOpenMobileMenu","handleCloseMobileMenu","handleToggleCollapsed","prev","id"],"sources":["../../../../src/presentation/shared/PresentationShell.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { MainLogo } from \"./MainLogo\";\nimport { BREAKPOINT, SM, TRANSITION, XL } from \"./tokens\";\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  ActivityIcon,\n  CalendarIcon,\n  ClockStopwatchIndicatorIcon,\n  CloseIcon,\n  CollapsIcon,\n  EstimatesIcon,\n  InvoicesIcon,\n  MobileMenuIcon,\n  MyWorkIcon,\n  NotificationBellIcon,\n  PeopleIcon,\n  ProjectsIcon,\n  ReportTimeIcon,\n  ReportsIcon,\n  RocketIcon,\n  SearchIcon,\n} from \"../../components/Icons\";\nimport { Modal } from \"../../components/Modal\";\nimport { Paper } from \"../../components/Paper\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Body2, Caption1 } from \"../../components/Typography\";\nimport { useResizeObserver } from \"../../utils\";\n\nconst MENU_ITEMS: {\n  icon: React.FC<React.SVGProps<SVGSVGElement>>;\n  text: string;\n  active?: boolean;\n}[] = [\n  { icon: RocketIcon, text: \"Getting Started\" },\n  { icon: ProjectsIcon, text: \"Projects\", active: true },\n  { icon: MyWorkIcon, text: \"My Work\" },\n  { icon: ActivityIcon, text: \"Activity\" },\n  { icon: CalendarIcon, text: \"Calendar\" },\n  { icon: PeopleIcon, text: \"People\" },\n  { icon: ReportTimeIcon, text: \"Time\" },\n  { icon: ReportsIcon, text: \"Reports\" },\n  { icon: InvoicesIcon, text: \"Invoices\" },\n  { icon: EstimatesIcon, text: \"Estimates\" },\n];\n\n/* ------------------------------------------------------------------ */\n/* Layout shell (mirrors Layout.js)                                    */\n/* ------------------------------------------------------------------ */\n\nconst StyledLayout = styled.div`\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--body-bg-main);\n`;\n\nconst StyledContentRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row-reverse;\n  flex: 1 1 0%;\n  flex-grow: 1;\n  overflow-y: auto;\n`;\n\nconst StyledRightWindow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0%;\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  padding: 0 16px;\n\n  @media (min-width: ${SM}) {\n    padding-right: 32px;\n  }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Main menu (mirrors MainMenu.js + MainMenu.less)                     */\n/* ------------------------------------------------------------------ */\n\nconst StyledMainMenu = styled.div`\n  position: relative;\n  z-index: 1;\n  display: none;\n  flex-direction: column;\n  height: 100%;\n  margin-right: 4px;\n  flex-shrink: 0;\n  width: 240px;\n  transition: width ${TRANSITION};\n\n  @media (min-width: ${SM}) {\n    display: flex;\n  }\n\n  &.collapsed {\n    width: 72px;\n  }\n\n  .menu-item-text,\n  .menu-section,\n  #logotype {\n    transition: all ${TRANSITION};\n  }\n\n  &.collapsed .menu-item-text {\n    opacity: 0;\n    visibility: hidden;\n    width: 0;\n    margin-left: 0;\n  }\n\n  &.collapsed .menu-section {\n    transform: scaleY(0);\n    opacity: 0;\n    max-height: 0;\n    margin-bottom: 0;\n  }\n\n  &.collapsed #logotype {\n    transform: translateX(-5%);\n    opacity: 0;\n  }\n\n  &.collapsed .collapse-expand-menu svg {\n    transform: rotate(180deg);\n  }\n\n  &:not(.mobile) {\n    @media (max-width: 1279.98px) {\n      width: 72px;\n\n      .menu-item-text {\n        opacity: 0;\n        visibility: hidden;\n        width: 0;\n        margin-left: 0;\n      }\n\n      .menu-section {\n        transform: scaleY(0);\n        opacity: 0;\n        max-height: 0;\n        margin-bottom: 0;\n      }\n\n      #logotype {\n        transform: translateX(-5%);\n        opacity: 0;\n      }\n    }\n  }\n\n  &.mobile {\n    display: flex;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 240px;\n    background-color: var(--page-paper-main);\n  }\n`;\n\nconst StyledMenuHeader = styled.div`\n  position: relative;\n  height: 68px;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  overflow: hidden;\n\n  .main-logo {\n    position: absolute;\n    left: 20px;\n    color: var(--color-secondary);\n\n    path {\n      fill: var(--color-secondary);\n    }\n  }\n\n  .collapse-expand-menu {\n    position: absolute;\n    right: 4px;\n    display: none;\n\n    @media (min-width: ${XL}) {\n      display: flex;\n    }\n  }\n`;\n\nconst StyledMenuScroll = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  min-height: 0;\n  margin: 12px 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n`;\n\nconst StyledMenuSection = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 0 12px 8px;\n  padding: 0 4px 0 12px;\n`;\n\nconst StyledMenuItem = styled.a`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 4px 0 12px;\n  margin: 0 12px 2px;\n  border-radius: 8px;\n  cursor: pointer;\n  text-decoration: none;\n\n  svg {\n    flex-shrink: 0;\n    fill: var(--color-theme-700);\n    opacity: 0.7;\n  }\n\n  .menu-item-text {\n    margin-left: 12px;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &:hover {\n    transition: all ${TRANSITION};\n    background-color: var(--color-theme-300);\n\n    svg {\n      fill: var(--color-theme-900);\n      opacity: 1;\n    }\n\n    .menu-item-text {\n      color: var(--color-theme-900);\n    }\n  }\n\n  &.active {\n    background-color: var(--color-secondary-200);\n\n    svg {\n      fill: var(--color-secondary);\n      opacity: 1;\n    }\n\n    .menu-item-text {\n      color: var(--color-secondary);\n    }\n  }\n`;\n\nconst StyledMobileMenuClose = styled(IconButton)`\n  position: absolute;\n  right: 16px;\n`;\n\n/* ------------------------------------------------------------------ */\n/* Top bars                                                            */\n/* ------------------------------------------------------------------ */\n\nconst StyledMobileMenuHeader = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  background-color: var(--color-primary);\n  z-index: 50;\n\n  @media (min-width: ${SM}) {\n    display: none;\n  }\n\n  .mobile-menu-icon {\n    fill: var(--color-theme-300);\n  }\n`;\n\nconst StyledIconRow = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst StyledTopRightControls = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: none;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 12px 32px 12px 0;\n\n  @media (min-width: ${SM}) {\n    display: flex;\n  }\n`;\n\nconst StyledHeaderAvatar = styled.div`\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background-color: var(--color-secondary);\n  color: var(--only-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 600;\n  margin: 0 8px;\n  flex-shrink: 0;\n  cursor: pointer;\n\n  /* neon theme: use paper colour for the initials */\n  .neon & {\n    color: var(--page-paper-main);\n  }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Page region (mirrors Page.jsx / PageBody.jsx)                       */\n/* ------------------------------------------------------------------ */\n\nconst StyledPage = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n`;\n\nconst StyledPageBody = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin-bottom: 32px;\n  min-height: 0;\n`;\n\n/** The paper card that holds page content (used by list view & empty pages). */\nexport const StyledPagePaper = styled(Paper)`\n  flex-grow: 1;\n  width: 100%;\n`;\n\n/* ------------------------------------------------------------------ */\n/* Mocked layout building blocks                                       */\n/* ------------------------------------------------------------------ */\n\ninterface MenuItemsProps {\n  mobile?: boolean;\n}\n\nconst MenuItemsMock = ({ mobile = false }: MenuItemsProps): ReactElement => (\n  <StyledMenuScroll>\n    <StyledMenuSection className=\"menu-section\">\n      <Caption1 weight=\"bold\" color=\"tertiary\">\n        MENU\n      </Caption1>\n    </StyledMenuSection>\n    {MENU_ITEMS.map(({ icon: Icon, text, active }) => (\n      <Tooltip key={text} title={text} placement=\"right\" disable={mobile}>\n        <StyledMenuItem className={active ? \"active\" : undefined}>\n          <Icon />\n          <Body2\n            weight=\"medium\"\n            color=\"secondary\"\n            whitespace=\"no-wrap\"\n            className=\"menu-item-text\"\n          >\n            {text}\n          </Body2>\n        </StyledMenuItem>\n      </Tooltip>\n    ))}\n  </StyledMenuScroll>\n);\n\ninterface MainMenuMockProps {\n  collapsed: boolean;\n  onToggleCollapsed: () => void;\n  footer?: ReactNode;\n}\n\nconst MainMenuMock = ({\n  collapsed,\n  onToggleCollapsed,\n  footer,\n}: MainMenuMockProps): ReactElement => (\n  <StyledMainMenu\n    className={collapsed ? \"collapsed\" : undefined}\n    data-testid=\"main-menu\"\n  >\n    <StyledMenuHeader>\n      <a className=\"main-logo\">\n        <MainLogo />\n      </a>\n      <div className=\"collapse-expand-menu\">\n        <IconButton\n          variant=\"text gray\"\n          size=\"small\"\n          onClick={onToggleCollapsed}\n        >\n          <CollapsIcon />\n        </IconButton>\n      </div>\n    </StyledMenuHeader>\n    <MenuItemsMock />\n    {footer}\n  </StyledMainMenu>\n);\n\ninterface MainMenuMobileMockProps {\n  open: boolean;\n  close: () => void;\n  footer?: ReactNode;\n}\n\nconst MainMenuMobileMock = ({\n  open,\n  close,\n  footer,\n}: MainMenuMobileMockProps): ReactElement | null =>\n  open ? (\n    <Modal open={open} onClose={close}>\n      <StyledMainMenu className=\"mobile\" data-testid=\"main-menu-mobile\">\n        <StyledMenuHeader>\n          <a className=\"main-logo\">\n            <MainLogo />\n          </a>\n          <StyledMobileMenuClose onClick={close} variant=\"text gray\">\n            <CloseIcon />\n          </StyledMobileMenuClose>\n        </StyledMenuHeader>\n        <MenuItemsMock mobile />\n        {footer}\n      </StyledMainMenu>\n    </Modal>\n  ) : null;\n\ninterface MobileMenuHeaderMockProps {\n  onOpenMobileMenu: () => void;\n}\n\nconst MobileMenuHeaderMock = ({\n  onOpenMobileMenu,\n}: MobileMenuHeaderMockProps): ReactElement => (\n  <StyledMobileMenuHeader>\n    <IconButton size=\"big\" variant=\"circle raised\" onClick={onOpenMobileMenu}>\n      <MobileMenuIcon className=\"mobile-menu-icon\" />\n    </IconButton>\n    <StyledIconRow>\n      <IconButton variant=\"text gray\">\n        <SearchIcon />\n      </IconButton>\n      <StyledHeaderAvatar>JS</StyledHeaderAvatar>\n      <IconButton variant=\"text gray\">\n        <NotificationBellIcon />\n      </IconButton>\n    </StyledIconRow>\n  </StyledMobileMenuHeader>\n);\n\nconst TopRightControlsMock = (): ReactElement => (\n  <StyledTopRightControls>\n    <IconButton variant=\"text gray\">\n      <ClockStopwatchIndicatorIcon />\n    </IconButton>\n    <IconButton variant=\"text gray\">\n      <SearchIcon />\n    </IconButton>\n    <StyledHeaderAvatar>JS</StyledHeaderAvatar>\n    <IconButton variant=\"text gray\">\n      <NotificationBellIcon />\n    </IconButton>\n  </StyledTopRightControls>\n);\n\n/* ------------------------------------------------------------------ */\n/* PresentationShell                                                   */\n/* ------------------------------------------------------------------ */\n\nexport interface PresentationShellProps {\n  /** Page header row (e.g. <ProjectPageHeader /> or <PageHeader title=\"…\" />). */\n  header: ReactNode;\n  /** Page body content rendered inside the scrollable page area. */\n  children: ReactNode;\n  /** Optional fixed controls (e.g. <FloatingControls />). */\n  floating?: ReactNode;\n  /** Optional content pinned to the bottom of the main menu (e.g. <HelpAndSupportMenu />). */\n  menuFooter?: ReactNode;\n}\n\n/**\n * The full application shell shared by every presentation mock-up: the main\n * menu on the left (auto-collapsing below 1280px, modal below 640px), the\n * top-right controls and the scrollable page area. Pass the page header via\n * `header` and the body via `children`.\n */\nexport const PresentationShell = ({\n  header,\n  children,\n  floating,\n  menuFooter,\n}: PresentationShellProps): ReactElement => {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [collapsed, setCollapsed] = useState(false);\n  const [isMobileView, setIsMobileView] = useState<boolean>();\n\n  const ref = useRef<HTMLDivElement>(null);\n  const dimensions = useResizeObserver(ref);\n  const width = dimensions?.width;\n\n  useEffect(() => {\n    if (width) {\n      if (width < BREAKPOINT) {\n        setIsMobileView(true);\n      } else {\n        setIsMobileView(false);\n        setMobileMenuOpen(false);\n      }\n    }\n  }, [width]);\n\n  const handleOpenMobileMenu = useCallback(() => setMobileMenuOpen(true), []);\n  const handleCloseMobileMenu = useCallback(() => setMobileMenuOpen(false), []);\n  const handleToggleCollapsed = useCallback(\n    () => setCollapsed((prev) => !prev),\n    []\n  );\n\n  return (\n    <StyledLayout ref={ref}>\n      {isMobileView ? (\n        <MobileMenuHeaderMock onOpenMobileMenu={handleOpenMobileMenu} />\n      ) : null}\n      <StyledContentRow>\n        <StyledRightWindow id=\"right-window\">\n          <StyledPage>\n            {header}\n            <StyledPageBody>{children}</StyledPageBody>\n          </StyledPage>\n          {isMobileView === false ? <TopRightControlsMock /> : null}\n        </StyledRightWindow>\n        {isMobileView ? (\n          <MainMenuMobileMock\n            open={mobileMenuOpen}\n            close={handleCloseMobileMenu}\n            footer={menuFooter}\n          />\n        ) : (\n          <MainMenuMock\n            collapsed={collapsed}\n            onToggleCollapsed={handleToggleCollapsed}\n            footer={menuFooter}\n          />\n        )}\n      </StyledContentRow>\n      {floating}\n    </StyledLayout>\n  );\n};\n\nPresentationShell.displayName = \"PresentationShell\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"PresentationShell.js","names":["React","useCallback","useEffect","useRef","useState","styled","MainLogo","BREAKPOINT","SM","TRANSITION","XL","IconButton","ActivityIcon","CalendarIcon","ClockStopwatchIndicatorIcon","CloseIcon","CollapsIcon","EstimatesIcon","InvoicesIcon","MobileMenuIcon","MyWorkIcon","NotificationBellIcon","PeopleIcon","ProjectsIcon","ReportTimeIcon","ReportsIcon","RocketIcon","SearchIcon","Modal","Paper","Tooltip","Body2","Caption1","DARK_THEME_SELECTOR","useResizeObserver","MENU_ITEMS","icon","text","active","StyledLayout","div","withConfig","displayName","componentId","StyledContentRow","StyledRightWindow","StyledMainMenu","StyledMenuHeader","StyledMenuScroll","StyledMenuSection","StyledMenuItem","a","StyledMobileMenuClose","StyledMobileMenuHeader","StyledIconRow","StyledTopRightControls","StyledHeaderAvatar","StyledPage","StyledPageBody","StyledPagePaper","MenuItemsMock","_ref","_ref$mobile","mobile","createElement","className","weight","color","map","_ref2","Icon","key","title","placement","disable","undefined","whitespace","MainMenuMock","_ref3","collapsed","onToggleCollapsed","footer","variant","size","onClick","MainMenuMobileMock","_ref4","open","close","onClose","MobileMenuHeaderMock","_ref5","onOpenMobileMenu","TopRightControlsMock","PresentationShell","_ref6","header","children","floating","menuFooter","_useState","mobileMenuOpen","setMobileMenuOpen","_useState2","setCollapsed","_useState3","isMobileView","setIsMobileView","ref","dimensions","width","handleOpenMobileMenu","handleCloseMobileMenu","handleToggleCollapsed","prev","id"],"sources":["../../../../src/presentation/shared/PresentationShell.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { MainLogo } from \"./MainLogo\";\nimport { BREAKPOINT, SM, TRANSITION, XL } from \"./tokens\";\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n  ActivityIcon,\n  CalendarIcon,\n  ClockStopwatchIndicatorIcon,\n  CloseIcon,\n  CollapsIcon,\n  EstimatesIcon,\n  InvoicesIcon,\n  MobileMenuIcon,\n  MyWorkIcon,\n  NotificationBellIcon,\n  PeopleIcon,\n  ProjectsIcon,\n  ReportTimeIcon,\n  ReportsIcon,\n  RocketIcon,\n  SearchIcon,\n} from \"../../components/Icons\";\nimport { Modal } from \"../../components/Modal\";\nimport { Paper } from \"../../components/Paper\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Body2, Caption1 } from \"../../components/Typography\";\nimport { DARK_THEME_SELECTOR, useResizeObserver } from \"../../utils\";\n\nconst MENU_ITEMS: {\n  icon: React.FC<React.SVGProps<SVGSVGElement>>;\n  text: string;\n  active?: boolean;\n}[] = [\n  { icon: RocketIcon, text: \"Getting Started\" },\n  { icon: ProjectsIcon, text: \"Projects\", active: true },\n  { icon: MyWorkIcon, text: \"My Work\" },\n  { icon: ActivityIcon, text: \"Activity\" },\n  { icon: CalendarIcon, text: \"Calendar\" },\n  { icon: PeopleIcon, text: \"People\" },\n  { icon: ReportTimeIcon, text: \"Time\" },\n  { icon: ReportsIcon, text: \"Reports\" },\n  { icon: InvoicesIcon, text: \"Invoices\" },\n  { icon: EstimatesIcon, text: \"Estimates\" },\n];\n\n/* ------------------------------------------------------------------ */\n/* Layout shell (mirrors Layout.js)                                    */\n/* ------------------------------------------------------------------ */\n\nconst StyledLayout = styled.div`\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--body-bg-main);\n`;\n\nconst StyledContentRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row-reverse;\n  flex: 1 1 0%;\n  flex-grow: 1;\n  overflow-y: auto;\n`;\n\nconst StyledRightWindow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0%;\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  padding: 0 16px;\n\n  @media (min-width: ${SM}) {\n    padding-right: 32px;\n  }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Main menu (mirrors MainMenu.js + MainMenu.less)                     */\n/* ------------------------------------------------------------------ */\n\nconst StyledMainMenu = styled.div`\n  position: relative;\n  z-index: 1;\n  display: none;\n  flex-direction: column;\n  height: 100%;\n  margin-right: 4px;\n  flex-shrink: 0;\n  width: 240px;\n  transition: width ${TRANSITION};\n\n  @media (min-width: ${SM}) {\n    display: flex;\n  }\n\n  &.collapsed {\n    width: 72px;\n  }\n\n  .menu-item-text,\n  .menu-section,\n  #logotype {\n    transition: all ${TRANSITION};\n  }\n\n  &.collapsed .menu-item-text {\n    opacity: 0;\n    visibility: hidden;\n    width: 0;\n    margin-left: 0;\n  }\n\n  &.collapsed .menu-section {\n    transform: scaleY(0);\n    opacity: 0;\n    max-height: 0;\n    margin-bottom: 0;\n  }\n\n  &.collapsed #logotype {\n    transform: translateX(-5%);\n    opacity: 0;\n  }\n\n  &.collapsed .collapse-expand-menu svg {\n    transform: rotate(180deg);\n  }\n\n  &:not(.mobile) {\n    @media (max-width: 1279.98px) {\n      width: 72px;\n\n      .menu-item-text {\n        opacity: 0;\n        visibility: hidden;\n        width: 0;\n        margin-left: 0;\n      }\n\n      .menu-section {\n        transform: scaleY(0);\n        opacity: 0;\n        max-height: 0;\n        margin-bottom: 0;\n      }\n\n      #logotype {\n        transform: translateX(-5%);\n        opacity: 0;\n      }\n    }\n  }\n\n  &.mobile {\n    display: flex;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 240px;\n    background-color: var(--page-paper-main);\n  }\n`;\n\nconst StyledMenuHeader = styled.div`\n  position: relative;\n  height: 68px;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  overflow: hidden;\n\n  .main-logo {\n    position: absolute;\n    left: 20px;\n    color: var(--color-secondary);\n\n    path {\n      fill: var(--color-secondary);\n    }\n  }\n\n  .collapse-expand-menu {\n    position: absolute;\n    right: 4px;\n    display: none;\n\n    @media (min-width: ${XL}) {\n      display: flex;\n    }\n  }\n`;\n\nconst StyledMenuScroll = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  min-height: 0;\n  margin: 12px 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n`;\n\nconst StyledMenuSection = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 0 12px 8px;\n  padding: 0 4px 0 12px;\n`;\n\nconst StyledMenuItem = styled.a`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 4px 0 12px;\n  margin: 0 12px 2px;\n  border-radius: 8px;\n  cursor: pointer;\n  text-decoration: none;\n\n  svg {\n    flex-shrink: 0;\n    fill: var(--color-theme-700);\n    opacity: 0.7;\n  }\n\n  .menu-item-text {\n    margin-left: 12px;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &:hover {\n    transition: all ${TRANSITION};\n    background-color: var(--color-theme-300);\n\n    svg {\n      fill: var(--color-theme-900);\n      opacity: 1;\n    }\n\n    .menu-item-text {\n      color: var(--color-theme-900);\n    }\n  }\n\n  &.active {\n    background-color: var(--color-secondary-200);\n\n    svg {\n      fill: var(--color-secondary);\n      opacity: 1;\n    }\n\n    .menu-item-text {\n      color: var(--color-secondary);\n    }\n  }\n`;\n\nconst StyledMobileMenuClose = styled(IconButton)`\n  position: absolute;\n  right: 16px;\n`;\n\n/* ------------------------------------------------------------------ */\n/* Top bars                                                            */\n/* ------------------------------------------------------------------ */\n\nconst StyledMobileMenuHeader = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  background-color: var(--color-primary);\n  z-index: 50;\n\n  @media (min-width: ${SM}) {\n    display: none;\n  }\n\n  .mobile-menu-icon {\n    fill: var(--color-theme-300);\n  }\n`;\n\nconst StyledIconRow = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst StyledTopRightControls = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: none;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 12px 32px 12px 0;\n\n  @media (min-width: ${SM}) {\n    display: flex;\n  }\n`;\n\nconst StyledHeaderAvatar = styled.div`\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background-color: var(--color-secondary);\n  color: var(--only-white);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 600;\n  margin: 0 8px;\n  flex-shrink: 0;\n  cursor: pointer;\n\n  /* dark themes: use paper colour for the initials */\n  ${DARK_THEME_SELECTOR} & {\n    color: var(--page-paper-main);\n  }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Page region (mirrors Page.jsx / PageBody.jsx)                       */\n/* ------------------------------------------------------------------ */\n\nconst StyledPage = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n`;\n\nconst StyledPageBody = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin-bottom: 32px;\n  min-height: 0;\n`;\n\n/** The paper card that holds page content (used by list view & empty pages). */\nexport const StyledPagePaper = styled(Paper)`\n  flex-grow: 1;\n  width: 100%;\n`;\n\n/* ------------------------------------------------------------------ */\n/* Mocked layout building blocks                                       */\n/* ------------------------------------------------------------------ */\n\ninterface MenuItemsProps {\n  mobile?: boolean;\n}\n\nconst MenuItemsMock = ({ mobile = false }: MenuItemsProps): ReactElement => (\n  <StyledMenuScroll>\n    <StyledMenuSection className=\"menu-section\">\n      <Caption1 weight=\"bold\" color=\"tertiary\">\n        MENU\n      </Caption1>\n    </StyledMenuSection>\n    {MENU_ITEMS.map(({ icon: Icon, text, active }) => (\n      <Tooltip key={text} title={text} placement=\"right\" disable={mobile}>\n        <StyledMenuItem className={active ? \"active\" : undefined}>\n          <Icon />\n          <Body2\n            weight=\"medium\"\n            color=\"secondary\"\n            whitespace=\"no-wrap\"\n            className=\"menu-item-text\"\n          >\n            {text}\n          </Body2>\n        </StyledMenuItem>\n      </Tooltip>\n    ))}\n  </StyledMenuScroll>\n);\n\ninterface MainMenuMockProps {\n  collapsed: boolean;\n  onToggleCollapsed: () => void;\n  footer?: ReactNode;\n}\n\nconst MainMenuMock = ({\n  collapsed,\n  onToggleCollapsed,\n  footer,\n}: MainMenuMockProps): ReactElement => (\n  <StyledMainMenu\n    className={collapsed ? \"collapsed\" : undefined}\n    data-testid=\"main-menu\"\n  >\n    <StyledMenuHeader>\n      <a className=\"main-logo\">\n        <MainLogo />\n      </a>\n      <div className=\"collapse-expand-menu\">\n        <IconButton\n          variant=\"text gray\"\n          size=\"small\"\n          onClick={onToggleCollapsed}\n        >\n          <CollapsIcon />\n        </IconButton>\n      </div>\n    </StyledMenuHeader>\n    <MenuItemsMock />\n    {footer}\n  </StyledMainMenu>\n);\n\ninterface MainMenuMobileMockProps {\n  open: boolean;\n  close: () => void;\n  footer?: ReactNode;\n}\n\nconst MainMenuMobileMock = ({\n  open,\n  close,\n  footer,\n}: MainMenuMobileMockProps): ReactElement | null =>\n  open ? (\n    <Modal open={open} onClose={close}>\n      <StyledMainMenu className=\"mobile\" data-testid=\"main-menu-mobile\">\n        <StyledMenuHeader>\n          <a className=\"main-logo\">\n            <MainLogo />\n          </a>\n          <StyledMobileMenuClose onClick={close} variant=\"text gray\">\n            <CloseIcon />\n          </StyledMobileMenuClose>\n        </StyledMenuHeader>\n        <MenuItemsMock mobile />\n        {footer}\n      </StyledMainMenu>\n    </Modal>\n  ) : null;\n\ninterface MobileMenuHeaderMockProps {\n  onOpenMobileMenu: () => void;\n}\n\nconst MobileMenuHeaderMock = ({\n  onOpenMobileMenu,\n}: MobileMenuHeaderMockProps): ReactElement => (\n  <StyledMobileMenuHeader>\n    <IconButton size=\"big\" variant=\"circle raised\" onClick={onOpenMobileMenu}>\n      <MobileMenuIcon className=\"mobile-menu-icon\" />\n    </IconButton>\n    <StyledIconRow>\n      <IconButton variant=\"text gray\">\n        <SearchIcon />\n      </IconButton>\n      <StyledHeaderAvatar>JS</StyledHeaderAvatar>\n      <IconButton variant=\"text gray\">\n        <NotificationBellIcon />\n      </IconButton>\n    </StyledIconRow>\n  </StyledMobileMenuHeader>\n);\n\nconst TopRightControlsMock = (): ReactElement => (\n  <StyledTopRightControls>\n    <IconButton variant=\"text gray\">\n      <ClockStopwatchIndicatorIcon />\n    </IconButton>\n    <IconButton variant=\"text gray\">\n      <SearchIcon />\n    </IconButton>\n    <StyledHeaderAvatar>JS</StyledHeaderAvatar>\n    <IconButton variant=\"text gray\">\n      <NotificationBellIcon />\n    </IconButton>\n  </StyledTopRightControls>\n);\n\n/* ------------------------------------------------------------------ */\n/* PresentationShell                                                   */\n/* ------------------------------------------------------------------ */\n\nexport interface PresentationShellProps {\n  /** Page header row (e.g. <ProjectPageHeader /> or <PageHeader title=\"…\" />). */\n  header: ReactNode;\n  /** Page body content rendered inside the scrollable page area. */\n  children: ReactNode;\n  /** Optional fixed controls (e.g. <FloatingControls />). */\n  floating?: ReactNode;\n  /** Optional content pinned to the bottom of the main menu (e.g. <HelpAndSupportMenu />). */\n  menuFooter?: ReactNode;\n}\n\n/**\n * The full application shell shared by every presentation mock-up: the main\n * menu on the left (auto-collapsing below 1280px, modal below 640px), the\n * top-right controls and the scrollable page area. Pass the page header via\n * `header` and the body via `children`.\n */\nexport const PresentationShell = ({\n  header,\n  children,\n  floating,\n  menuFooter,\n}: PresentationShellProps): ReactElement => {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [collapsed, setCollapsed] = useState(false);\n  const [isMobileView, setIsMobileView] = useState<boolean>();\n\n  const ref = useRef<HTMLDivElement>(null);\n  const dimensions = useResizeObserver(ref);\n  const width = dimensions?.width;\n\n  useEffect(() => {\n    if (width) {\n      if (width < BREAKPOINT) {\n        setIsMobileView(true);\n      } else {\n        setIsMobileView(false);\n        setMobileMenuOpen(false);\n      }\n    }\n  }, [width]);\n\n  const handleOpenMobileMenu = useCallback(() => setMobileMenuOpen(true), []);\n  const handleCloseMobileMenu = useCallback(() => setMobileMenuOpen(false), []);\n  const handleToggleCollapsed = useCallback(\n    () => setCollapsed((prev) => !prev),\n    []\n  );\n\n  return (\n    <StyledLayout ref={ref}>\n      {isMobileView ? (\n        <MobileMenuHeaderMock onOpenMobileMenu={handleOpenMobileMenu} />\n      ) : null}\n      <StyledContentRow>\n        <StyledRightWindow id=\"right-window\">\n          <StyledPage>\n            {header}\n            <StyledPageBody>{children}</StyledPageBody>\n          </StyledPage>\n          {isMobileView === false ? <TopRightControlsMock /> : null}\n        </StyledRightWindow>\n        {isMobileView ? (\n          <MainMenuMobileMock\n            open={mobileMenuOpen}\n            close={handleCloseMobileMenu}\n            footer={menuFooter}\n          />\n        ) : (\n          <MainMenuMock\n            collapsed={collapsed}\n            onToggleCollapsed={handleToggleCollapsed}\n            footer={menuFooter}\n          />\n        )}\n      </StyledContentRow>\n      {floating}\n    </StyledLayout>\n  );\n};\n\nPresentationShell.displayName = \"PresentationShell\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./layers";
 export * from "./colors";
+export * from "./themes";
 export * from "./validation";
 export { default as useForkRef } from "./useForkRef";
 export { default as useResizeObserver } from "./useResizeObserver";

package/dist/esm/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EACL,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EACL,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC"}

package/dist/esm/utils/index.js

@@ -1,5 +1,6 @@
 export * from "./layers";
 export * from "./colors";
+export * from "./themes";
 export * from "./validation";
 export { default as useForkRef } from "./useForkRef";
 export { default as useResizeObserver } from "./useResizeObserver";

package/dist/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","useForkRef","useResizeObserver","formatHours","formatNumber","formatCurrency","numberWithSeparator","getNumberFromString"],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./layers\";\nexport * from \"./colors\";\nexport * from \"./validation\";\nexport { default as useForkRef } from \"./useForkRef\";\nexport { default as useResizeObserver } from \"./useResizeObserver\";\nexport { formatHours } from \"./timeUtils\";\nexport {\n  formatNumber,\n  formatCurrency,\n  numberWithSeparator,\n  getNumberFromString,\n} from \"./currencyUtils\";\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,SAASA,OAAO,IAAIC,UAAU,QAAQ,cAAc;AACpD,SAASD,OAAO,IAAIE,iBAAiB,QAAQ,qBAAqB;AAClE,SAASC,WAAW,QAAQ,aAAa;AACzC,SACEC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnBC,mBAAmB,QACd,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","useForkRef","useResizeObserver","formatHours","formatNumber","formatCurrency","numberWithSeparator","getNumberFromString"],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./layers\";\nexport * from \"./colors\";\nexport * from \"./themes\";\nexport * from \"./validation\";\nexport { default as useForkRef } from \"./useForkRef\";\nexport { default as useResizeObserver } from \"./useResizeObserver\";\nexport { formatHours } from \"./timeUtils\";\nexport {\n  formatNumber,\n  formatCurrency,\n  numberWithSeparator,\n  getNumberFromString,\n} from \"./currencyUtils\";\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,SAASA,OAAO,IAAIC,UAAU,QAAQ,cAAc;AACpD,SAASD,OAAO,IAAIE,iBAAiB,QAAQ,qBAAqB;AAClE,SAASC,WAAW,QAAQ,aAAa;AACzC,SACEC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnBC,mBAAmB,QACd,iBAAiB","ignoreList":[]}

package/dist/esm/utils/themes.d.ts

@@ -0,0 +1,12 @@
+export interface ThemeDescriptor {
+    name: string;
+    title: string;
+    dark: boolean;
+}
+export declare const THEMES: ThemeDescriptor[];
+export declare const THEME_NAMES: string[];
+export declare const DARK_THEME_NAMES: string[];
+export declare const isDarkTheme: (name?: string | null) => boolean;
+export declare const DARK_THEME_MATCH: string;
+export declare const DARK_THEME_SELECTOR: string;
+//# sourceMappingURL=themes.d.ts.map

package/dist/esm/utils/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../src/utils/themes.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,MAAM,EAAE,eAAe,EAOnC,CAAC;AAEF,eAAO,MAAM,WAAW,UAAoC,CAAC;AAE7D,eAAO,MAAM,gBAAgB,UAE5B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,GAAG,IAAI,KAAG,OACS,CAAC;AAM7D,eAAO,MAAM,gBAAgB,QAEd,CAAC;AAIhB,eAAO,MAAM,mBAAmB,QAAyB,CAAC"}

package/dist/esm/utils/themes.js

@@ -0,0 +1,43 @@
+// Single source of truth for theme identity. The theme name is the only class put on <html>;
+// styling that targets "any dark theme" uses DARK_THEME_SELECTOR, which is derived from this list
+// so a new theme never needs the selector updating by hand.
+
+export const THEMES = [{
+  name: "indigo",
+  title: "Indigo",
+  dark: false
+}, {
+  name: "cupcake",
+  title: "Cupcake",
+  dark: false
+}, {
+  name: "classic",
+  title: "Classic",
+  dark: false
+}, {
+  name: "neon",
+  title: "Neon",
+  dark: true
+}, {
+  name: "dracula",
+  title: "Dracula",
+  dark: true
+}, {
+  name: "one-dark",
+  title: "One Dark",
+  dark: true
+}];
+export const THEME_NAMES = THEMES.map(theme => theme.name);
+export const DARK_THEME_NAMES = THEMES.filter(theme => theme.dark).map(theme => theme.name);
+export const isDarkTheme = name => Boolean(name) && DARK_THEME_NAMES.includes(name);
+
+// :is() and not :where() — :where() is zero-specificity and would silently lose to the light
+// declarations it is meant to override.
+
+// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.
+export const DARK_THEME_MATCH = ":is(" + DARK_THEME_NAMES.map(name => "." + name).join(", ") + ")";
+
+// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `*` adds no specificity
+// but stops stylis from reading a leading `:` as "attach to the parent" and gluing it onto `&`.
+export const DARK_THEME_SELECTOR = "*" + DARK_THEME_MATCH;
+//# sourceMappingURL=themes.js.map

package/dist/esm/utils/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","names":["THEMES","name","title","dark","THEME_NAMES","map","theme","DARK_THEME_NAMES","filter","isDarkTheme","Boolean","includes","DARK_THEME_MATCH","join","DARK_THEME_SELECTOR"],"sources":["../../../src/utils/themes.ts"],"sourcesContent":["// Single source of truth for theme identity. The theme name is the only class put on <html>;\n// styling that targets \"any dark theme\" uses DARK_THEME_SELECTOR, which is derived from this list\n// so a new theme never needs the selector updating by hand.\nexport interface ThemeDescriptor {\n  name: string;\n  title: string;\n  dark: boolean;\n}\n\nexport const THEMES: ThemeDescriptor[] = [\n  { name: \"indigo\", title: \"Indigo\", dark: false },\n  { name: \"cupcake\", title: \"Cupcake\", dark: false },\n  { name: \"classic\", title: \"Classic\", dark: false },\n  { name: \"neon\", title: \"Neon\", dark: true },\n  { name: \"dracula\", title: \"Dracula\", dark: true },\n  { name: \"one-dark\", title: \"One Dark\", dark: true },\n];\n\nexport const THEME_NAMES = THEMES.map((theme) => theme.name);\n\nexport const DARK_THEME_NAMES = THEMES.filter((theme) => theme.dark).map(\n  (theme) => theme.name\n);\n\nexport const isDarkTheme = (name?: string | null): boolean =>\n  Boolean(name) && DARK_THEME_NAMES.includes(name as string);\n\n// :is() and not :where() — :where() is zero-specificity and would silently lose to the light\n// declarations it is meant to override.\n\n// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.\nexport const DARK_THEME_MATCH = `:is(${DARK_THEME_NAMES.map(\n  (name) => `.${name}`\n).join(\", \")})`;\n\n// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `*` adds no specificity\n// but stops stylis from reading a leading `:` as \"attach to the parent\" and gluing it onto `&`.\nexport const DARK_THEME_SELECTOR = `*${DARK_THEME_MATCH}`;\n"],"mappings":"AAAA;AACA;AACA;;AAOA,OAAO,MAAMA,MAAyB,GAAG,CACvC;EAAEC,IAAI,EAAE,QAAQ;EAAEC,KAAK,EAAE,QAAQ;EAAEC,IAAI,EAAE;AAAM,CAAC,EAChD;EAAEF,IAAI,EAAE,SAAS;EAAEC,KAAK,EAAE,SAAS;EAAEC,IAAI,EAAE;AAAM,CAAC,EAClD;EAAEF,IAAI,EAAE,SAAS;EAAEC,KAAK,EAAE,SAAS;EAAEC,IAAI,EAAE;AAAM,CAAC,EAClD;EAAEF,IAAI,EAAE,MAAM;EAAEC,KAAK,EAAE,MAAM;EAAEC,IAAI,EAAE;AAAK,CAAC,EAC3C;EAAEF,IAAI,EAAE,SAAS;EAAEC,KAAK,EAAE,SAAS;EAAEC,IAAI,EAAE;AAAK,CAAC,EACjD;EAAEF,IAAI,EAAE,UAAU;EAAEC,KAAK,EAAE,UAAU;EAAEC,IAAI,EAAE;AAAK,CAAC,CACpD;AAED,OAAO,MAAMC,WAAW,GAAGJ,MAAM,CAACK,GAAG,CAAEC,KAAK,IAAKA,KAAK,CAACL,IAAI,CAAC;AAE5D,OAAO,MAAMM,gBAAgB,GAAGP,MAAM,CAACQ,MAAM,CAAEF,KAAK,IAAKA,KAAK,CAACH,IAAI,CAAC,CAACE,GAAG,CACrEC,KAAK,IAAKA,KAAK,CAACL,IACnB,CAAC;AAED,OAAO,MAAMQ,WAAW,GAAIR,IAAoB,IAC9CS,OAAO,CAACT,IAAI,CAAC,IAAIM,gBAAgB,CAACI,QAAQ,CAACV,IAAc,CAAC;;AAE5D;AACA;;AAEA;AACA,OAAO,MAAMW,gBAAgB,YAAUL,gBAAgB,CAACF,GAAG,CACxDJ,IAAI,UAASA,IAChB,CAAC,CAACY,IAAI,CAAC,IAAI,CAAC,MAAG;;AAEf;AACA;AACA,OAAO,MAAMC,mBAAmB,SAAOF,gBAAkB","ignoreList":[]}

package/dist/index.js

@@ -619,6 +619,59 @@
     }
   };
 
+  // Single source of truth for theme identity. The theme name is the only class put on <html>;
+  // styling that targets "any dark theme" uses DARK_THEME_SELECTOR, which is derived from this list
+  // so a new theme never needs the selector updating by hand.
+
+  var THEMES = [{
+    name: "indigo",
+    title: "Indigo",
+    dark: false
+  }, {
+    name: "cupcake",
+    title: "Cupcake",
+    dark: false
+  }, {
+    name: "classic",
+    title: "Classic",
+    dark: false
+  }, {
+    name: "neon",
+    title: "Neon",
+    dark: true
+  }, {
+    name: "dracula",
+    title: "Dracula",
+    dark: true
+  }, {
+    name: "one-dark",
+    title: "One Dark",
+    dark: true
+  }];
+  var THEME_NAMES = THEMES.map(function (theme) {
+    return theme.name;
+  });
+  var DARK_THEME_NAMES = THEMES.filter(function (theme) {
+    return theme.dark;
+  }).map(function (theme) {
+    return theme.name;
+  });
+  var isDarkTheme = function isDarkTheme(name) {
+    return Boolean(name) && DARK_THEME_NAMES.includes(name);
+  };
+
+  // :is() and not :where() — :where() is zero-specificity and would silently lose to the light
+  // declarations it is meant to override.
+
+  // Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.
+  var DARK_THEME_MATCH = ":is(".concat(DARK_THEME_NAMES.map(function (name) {
+    return ".".concat(name);
+  }).join(", "), ")");
+
+  // Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `*` adds no specificity
+  // but stops stylis from reading a leading `:` as "attach to the parent" and gluing it onto `&`.
+  var DARK_THEME_SELECTOR = "*".concat(DARK_THEME_MATCH);
+
   var currencyMultiplier = {
     k: 1000,
     m: 1000000,
@@ -15406,7 +15459,7 @@
   var StyledDatePickerContainerInner = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDatePickerContainerInner",
     componentId: "sc-18towna-1"
-  })(["& > *{font-family:-apple-system,BlinkMacSystemFont,\"Inter\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}&{@keyframes slide-up{from{transform:translateY(0);opacity:1;}to{transform:translateY(-20px);opacity:0;}}@keyframes slide-down{from{transform:translateY(0);opacity:1;}to{transform:translateY(20px);opacity:0;}}.slide-up{animation:slide-up 0.3s ease-in-out;}.slide-down{animation:slide-down 0.3s ease-in-out;}.today-day{position:relative;&::after{position:absolute;content:\"\";bottom:2px;height:3px;width:3px;border-radius:3px;margin:0 auto;left:0;right:0;background:var(--color-primary);}}.today-day,.today-month,.today-year{color:var(--color-primary);background-color:none;}.selected{background-color:var(--color-primary) !important;color:var(--color-theme-100) !important;}.disabled{pointer-events:none;color:var(--color-theme-500);}.hovered{background-color:var(--color-primary-300);}}.userAvailability,.nonWorkingDaysOfWeek{color:var(--red-alert);&.hovered:hover:not(.selected){background-color:rgba(237,97,97,0.1);color:var(--red-alert);}&.today-day{color:var(--red-alert);&:after{background-color:var(--red-alert);}&.hovered:hover:not(.selected):after{background-color:var(--red-alert);}}}.selected{background-color:var(--color-primary);color:var(--color-theme-100);&.today-day{color:var(--color-theme-100);&:after{background-color:var(--color-theme-100);}}&.userAvailability,&.nonWorkingDaysOfWeek{background-color:var(--red-alert) !important;color:var(--color-theme-100) !important;}}.nonWorkingDay{color:var(--color-theme-500);&.hovered:hover:not(.selected){color:var(--color-theme-500);}&.today-day{color:var(--color-primary-500);&:after{background-color:var(--color-primary-500);}&.hovered:hover:not(.selected){color:var(--color-theme-500);&:after{background-color:var(--color-theme-500);}}}&.userAvailability,&.nonWorkingDaysOfWeek{&.hovered:hover:not(.selected){color:var(--color-theme-500);background-color:var(--color-primary-300);&.today-day:after{background-color:var(--color-theme-500);}}}&.selected{color:rgba(255,255,255,0.6);background-color:var(--color-primary);.neon &{color:rgba(0,0,0,0.4);}&.today-day{color:rgba(255,255,255,0.6);.neon &{color:rgba(0,0,0,0.4);}&:after{background-color:rgba(255,255,255,0.6);.neon &{background-color:rgba(0,0,0,0.4);}}}}}.disabled{cursor:default;color:var(--color-theme-500);&.hovered:hover{color:var(--color-theme-500);}}.outside{cursor:default;opacity:0.25;color:var(--color-theme-900);&.userAvailability.hovered:hover:not(.selected),&.nonWorkingDaysOfWeek.hovered:hover:not(.selected){background:var(--color-primary-300);}&.userAvailability:not(.selected),&.nonWorkingDaysOfWeek:not(.selected),&.userAvailability.hovered:hover:not(.selected),&.nonWorkingDaysOfWeek.hovered:hover:not(.selected),&.nonWorkingDay.hovered:hover:not(.selected),&.nonWorkingDay:not(.selected),&.today-day.hovered:hover:not(.selected),&.today-day:not(.selected){color:var(--color-theme-900);}&.userAvailability.today-day:not(.selected):after,&.nonWorkingDaysOfWeek.today-day:not(.selected):after,&.userAvailability.today-day.hovered:hover:not(.selected):after,&.nonWorkingDaysOfWeek.today-day.hovered:hover:not(.selected):after,&.nonWorkingDay.today-day:not(.selected):after,&.nonWorkingDay.today-day.hovered:hover:not(.selected):after,&.today-day.hovered:hover:not(.selected):after,&.today-day:not(.selected):after{background-color:var(--color-theme-900);}&.hovered:hover:not(.selected){background:var(--color-primary-400);}&.selected{color:var(--page-paper-main);background:var(--color-primary);.neon &{color:var(--page-paper-main);}&.today-day{&:after{background:var(--page-paper-main);.neon &{background:var(--page-paper-main);}}&.nonWorkingDay{color:var(--page-paper-main);.neon &{color:var(--page-paper-main);}}}}}"]);
+  })(["& > *{font-family:-apple-system,BlinkMacSystemFont,\"Inter\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}&{@keyframes slide-up{from{transform:translateY(0);opacity:1;}to{transform:translateY(-20px);opacity:0;}}@keyframes slide-down{from{transform:translateY(0);opacity:1;}to{transform:translateY(20px);opacity:0;}}.slide-up{animation:slide-up 0.3s ease-in-out;}.slide-down{animation:slide-down 0.3s ease-in-out;}.today-day{position:relative;&::after{position:absolute;content:\"\";bottom:2px;height:3px;width:3px;border-radius:3px;margin:0 auto;left:0;right:0;background:var(--color-primary);}}.today-day,.today-month,.today-year{color:var(--color-primary);background-color:none;}.selected{background-color:var(--color-primary) !important;color:var(--color-theme-100) !important;}.disabled{pointer-events:none;color:var(--color-theme-500);}.hovered{background-color:var(--color-primary-300);}}.userAvailability,.nonWorkingDaysOfWeek{color:var(--red-alert);&.hovered:hover:not(.selected){background-color:rgba(237,97,97,0.1);color:var(--red-alert);}&.today-day{color:var(--red-alert);&:after{background-color:var(--red-alert);}&.hovered:hover:not(.selected):after{background-color:var(--red-alert);}}}.selected{background-color:var(--color-primary);color:var(--color-theme-100);&.today-day{color:var(--color-theme-100);&:after{background-color:var(--color-theme-100);}}&.userAvailability,&.nonWorkingDaysOfWeek{background-color:var(--red-alert) !important;color:var(--color-theme-100) !important;}}.nonWorkingDay{color:var(--color-theme-500);&.hovered:hover:not(.selected){color:var(--color-theme-500);}&.today-day{color:var(--color-primary-500);&:after{background-color:var(--color-primary-500);}&.hovered:hover:not(.selected){color:var(--color-theme-500);&:after{background-color:var(--color-theme-500);}}}&.userAvailability,&.nonWorkingDaysOfWeek{&.hovered:hover:not(.selected){color:var(--color-theme-500);background-color:var(--color-primary-300);&.today-day:after{background-color:var(--color-theme-500);}}}&.selected{color:rgba(255,255,255,0.6);background-color:var(--color-primary);", " &{color:rgba(0,0,0,0.4);}&.today-day{color:rgba(255,255,255,0.6);", " &{color:rgba(0,0,0,0.4);}&:after{background-color:rgba(255,255,255,0.6);", " &{background-color:rgba(0,0,0,0.4);}}}}}.disabled{cursor:default;color:var(--color-theme-500);&.hovered:hover{color:var(--color-theme-500);}}.outside{cursor:default;opacity:0.25;color:var(--color-theme-900);&.userAvailability.hovered:hover:not(.selected),&.nonWorkingDaysOfWeek.hovered:hover:not(.selected){background:var(--color-primary-300);}&.userAvailability:not(.selected),&.nonWorkingDaysOfWeek:not(.selected),&.userAvailability.hovered:hover:not(.selected),&.nonWorkingDaysOfWeek.hovered:hover:not(.selected),&.nonWorkingDay.hovered:hover:not(.selected),&.nonWorkingDay:not(.selected),&.today-day.hovered:hover:not(.selected),&.today-day:not(.selected){color:var(--color-theme-900);}&.userAvailability.today-day:not(.selected):after,&.nonWorkingDaysOfWeek.today-day:not(.selected):after,&.userAvailability.today-day.hovered:hover:not(.selected):after,&.nonWorkingDaysOfWeek.today-day.hovered:hover:not(.selected):after,&.nonWorkingDay.today-day:not(.selected):after,&.nonWorkingDay.today-day.hovered:hover:not(.selected):after,&.today-day.hovered:hover:not(.selected):after,&.today-day:not(.selected):after{background-color:var(--color-theme-900);}&.hovered:hover:not(.selected){background:var(--color-primary-400);}&.selected{color:var(--page-paper-main);background:var(--color-primary);", " &{color:var(--page-paper-main);}&.today-day{&:after{background:var(--page-paper-main);", " &{background:var(--page-paper-main);}}&.nonWorkingDay{color:var(--page-paper-main);", " &{color:var(--page-paper-main);}}}}}"], DARK_THEME_SELECTOR, DARK_THEME_SELECTOR, DARK_THEME_SELECTOR, DARK_THEME_SELECTOR, DARK_THEME_SELECTOR, DARK_THEME_SELECTOR);
   var StyledDatePickerWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDatePickerWrapper",
     componentId: "sc-18towna-2"
@@ -16715,7 +16768,7 @@
   var StyledDataTable = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDataTable",
     componentId: "sc-e16t6w-4"
-  })(["", " ", " &.c-table__collapsible{.c-table__head{tr{th{position:sticky;top:0;z-index:1;}}}}&.c-table__grouped{.c-table__head th{", " &:last-child{", "}}}&.c-data-table{position:relative;.c-table__head th{&:last-child{", "}}}.c-table__cell{", " &:hover{.c-table__icon{", "}}}.c-table__overlay{", " top:0px;border-top-left-radius:8px;border-top-right-radius:8px;background:rgba(0,0,0,0.02);.neon &{background:rgba(0,0,0,0.1);}z-index:5;}.c-table__icon-wrapper{", "}.c-table__label{", "}.c-table__icon{transform:translateY(1px);", " fill:var(--color-theme-900);&:hover{", "}}.c-table__icon--inactive{", "}.c-table__icon--active{", "}.c-table__icon--desc{transform:rotate(-180deg) scale(-1,1);}.c-table__grouped__head{", " > :first-child{", "}a:first-child{", "}}.c-table__head--hidden{", "}.c-table__collapse_icon--expanded{transition-duration:0.3s;", "}.c-table__collapse_icon--collapsed{transform:rotate(180deg);transition-duration:0.3s;", "}.c-table__head__icon-wrapper__icon{", " transform:translate(-24px,-5px);}&.c-table__collapsible{.c-table__group{.c-table__row:last-child .c-table__cell{border-bottom:1px solid var(--border-primary);}&:last-child{.c-table__row:last-child .c-table__cell{border-bottom:0;}}}.c-table__grouped__head{tr td{border-bottom:1px solid var(--border-primary);}.c-table__body__collapse td{border-bottom:0;}&.last{tr td{border-bottom:0 !important;}}}.c-table__grouped__head--expanded{tr:last-child td{border-bottom:0;}}}.c-table__collapse_body{tr{background-color:transparent !important;}td:last-child{", "}", "}.c-table__row{td:first-child{position:sticky;left:0;z-index:1;}&:nth-child(odd){td{", "}}&:nth-child(even){td{", "}}}.c-table__row{th:first-child{position:sticky;left:0;z-index:2 !important;}}&.c-table__collapsible .c-table__body{tr{td:first-child,th:first-child{", "}}}.c-table__body__icon{", " padding-left:0 !important;transform:translateY(8px);}&.padding-b-0{", "}.cursor-pointer{", "}.text-center{", "}.opacity-75{", "}.hidden{", "}"], FontStyle, BoxSizingStyle, {
+  })(["", " ", " &.c-table__collapsible{.c-table__head{tr{th{position:sticky;top:0;z-index:1;}}}}&.c-table__grouped{.c-table__head th{", " &:last-child{", "}}}&.c-data-table{position:relative;.c-table__head th{&:last-child{", "}}}.c-table__cell{", " &:hover{.c-table__icon{", "}}}.c-table__overlay{", " top:0px;border-top-left-radius:8px;border-top-right-radius:8px;background:rgba(0,0,0,0.02);", " &{background:rgba(0,0,0,0.1);}z-index:5;}.c-table__icon-wrapper{", "}.c-table__label{", "}.c-table__icon{transform:translateY(1px);", " fill:var(--color-theme-900);&:hover{", "}}.c-table__icon--inactive{", "}.c-table__icon--active{", "}.c-table__icon--desc{transform:rotate(-180deg) scale(-1,1);}.c-table__grouped__head{", " > :first-child{", "}a:first-child{", "}}.c-table__head--hidden{", "}.c-table__collapse_icon--expanded{transition-duration:0.3s;", "}.c-table__collapse_icon--collapsed{transform:rotate(180deg);transition-duration:0.3s;", "}.c-table__head__icon-wrapper__icon{", " transform:translate(-24px,-5px);}&.c-table__collapsible{.c-table__group{.c-table__row:last-child .c-table__cell{border-bottom:1px solid var(--border-primary);}&:last-child{.c-table__row:last-child .c-table__cell{border-bottom:0;}}}.c-table__grouped__head{tr td{border-bottom:1px solid var(--border-primary);}.c-table__body__collapse td{border-bottom:0;}&.last{tr td{border-bottom:0 !important;}}}.c-table__grouped__head--expanded{tr:last-child td{border-bottom:0;}}}.c-table__collapse_body{tr{background-color:transparent !important;}td:last-child{", "}", "}.c-table__row{td:first-child{position:sticky;left:0;z-index:1;}&:nth-child(odd){td{", "}}&:nth-child(even){td{", "}}}.c-table__row{th:first-child{position:sticky;left:0;z-index:2 !important;}}&.c-table__collapsible .c-table__body{tr{td:first-child,th:first-child{", "}}}.c-table__body__icon{", " padding-left:0 !important;transform:translateY(8px);}&.padding-b-0{", "}.cursor-pointer{", "}.text-center{", "}.opacity-75{", "}.hidden{", "}"], FontStyle, BoxSizingStyle, {
     "paddingBottom": "1rem"
   }, {
     "paddingRight": "0px"
@@ -16730,7 +16783,7 @@
     "position": "absolute",
     "left": "0px",
     "width": "100%"
-  }, {
+  }, DARK_THEME_SELECTOR, {
     "display": "inline-block",
     "userSelect": "none"
   }, {
@@ -16826,7 +16879,7 @@
   var StyledSkeletonLoader = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSkeletonLoader",
     componentId: "sc-1n0a2yl-0"
-  })(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;.neon &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], linearAnimation);
+  })(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;", " &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], DARK_THEME_SELECTOR, linearAnimation);
 
   var _excluded$1c = ["className"];
   var SkeletonLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -24855,7 +24908,7 @@
   ThumbsDownIcon.displayName = "ThumbsDownIcon";
   var ThumbsDownIcon$1 = ThumbsDownIcon;
 
-  var GlobalStyle = styled.createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--color-pale-green:#c3e799;--color-progress-blue:#4182f2;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}html{color-scheme:light;}html{&.neon{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"]);
+  var GlobalStyle = styled.createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--color-pale-green:#c3e799;--color-progress-blue:#4182f2;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--color-primary-100:rgba(93,43,255,0.03);--color-primary-opaque-200:#f7f4ff;--muted-text:#6d6d73;--alert-surface:rgba(243,24,72,0.12);--muted-surface:#d7d7da;--muted-surface-text:#303037;--stripe-pattern:#e6e6e9;--drop-overlay-bg:rgba(255,255,255,0.93);--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;--color-primary-100:rgba(41,188,221,0.04);--color-primary-opaque-200:#f0fafc;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;--color-primary-100:rgba(65,130,242,0.04);--color-primary-opaque-200:#f2f6fe;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;--color-primary-100:rgba(103,255,200,0.08);--color-primary-opaque-200:#394a44;--muted-text:#cfcfd0;--alert-surface:rgba(243,24,72,0.25);--muted-surface:#b4b4b8;--muted-surface-text:#4a4a4a;--stripe-pattern:#5c494d;--drop-overlay-bg:rgba(55,58,68,0.93);}.dracula{--color-primary:#bd93f9;--color-secondary:#ff79c6;--color-theme-100:#000000;--color-theme-200:#303243;--color-theme-300:#272935;--color-theme-400:#191a21;--color-theme-500:#6272a4;--color-theme-600:#7d8ab8;--color-theme-700:#a4aecd;--color-theme-800:#dededa;--color-theme-900:#f8f8f2;--color-primary-200:rgba(189,147,249,0.05);--color-primary-300:rgba(189,147,249,0.1);--color-primary-400:rgba(189,147,249,0.25);--color-primary-500:rgba(189,147,249,0.5);--color-primary-600:rgba(189,147,249,0.75);--color-primary-700:#bd93f9;--color-primary-800:#d2b6fb;--color-primary-900:#e4d3fd;--color-secondary-200:rgba(255,121,198,0.05);--color-secondary-300:rgba(255,121,198,0.1);--color-secondary-400:rgba(255,121,198,0.25);--color-secondary-500:rgba(255,121,198,0.5);--color-secondary-600:rgba(255,121,198,0.75);--color-secondary-700:#ff79c6;--color-secondary-800:#ffa3d7;--color-secondary-900:#ffc9e7;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#4a3f66;--color-primary-opaque-400:#5b4b7d;--color-secondary-opaque-300:#5f3b52;--color-secondary-opaque-400:#7a4a69;--body-bg-main:rgb(40,42,54);--body-bg-main-transparent:rgba(40,42,54,0);--page-paper-main:#343746;--border-primary:#191a21;--note-bg:#3c3a2e;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba(52,55,70,0);--modal-background:rgba(40,42,54,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#21222c;--color-primary-100:rgba(189,147,249,0.08);--color-primary-opaque-200:#383349;--muted-text:#d0d0cb;--alert-surface:rgba(255,85,85,0.25);--muted-surface:#a9aec4;--muted-surface-text:#282a36;--stripe-pattern:#5a4550;--drop-overlay-bg:rgba(52,55,70,0.93);}.one-dark{--color-primary:#61afef;--color-secondary:#c678dd;--color-theme-100:#000000;--color-theme-200:#2f343f;--color-theme-300:#262a31;--color-theme-400:#21252b;--color-theme-500:#5c6370;--color-theme-600:#767d8a;--color-theme-700:#9aa2b1;--color-theme-800:#cdd3de;--color-theme-900:#dcdfe4;--color-primary-200:rgba(97,175,239,0.05);--color-primary-300:rgba(97,175,239,0.1);--color-primary-400:rgba(97,175,239,0.25);--color-primary-500:rgba(97,175,239,0.5);--color-primary-600:rgba(97,175,239,0.75);--color-primary-700:#61afef;--color-primary-800:#8ec6f4;--color-primary-900:#bcdcf9;--color-secondary-200:rgba(198,120,221,0.05);--color-secondary-300:rgba(198,120,221,0.1);--color-secondary-400:rgba(198,120,221,0.25);--color-secondary-500:rgba(198,120,221,0.5);--color-secondary-600:rgba(198,120,221,0.75);--color-secondary-700:#c678dd;--color-secondary-800:#d79ce8;--color-secondary-900:#e8c2f2;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#33475c;--color-primary-opaque-400:#3c5771;--color-secondary-opaque-300:#4a3552;--color-secondary-opaque-400:#5e4268;--body-bg-main:rgb(40,44,52);--body-bg-main-transparent:rgba(40,44,52,0);--page-paper-main:#31363f;--border-primary:#21252b;--note-bg:#3a3730;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba(49,54,63,0);--modal-background:rgba(40,44,52,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#21252b;--color-primary-100:rgba(97,175,239,0.08);--color-primary-opaque-200:#2c3a49;--muted-text:#c5cbd6;--alert-surface:rgba(224,108,117,0.25);--muted-surface:#a3aab8;--muted-surface-text:#282c34;--stripe-pattern:#55464a;--drop-overlay-bg:rgba(49,54,63,0.93);}html{color-scheme:light;&", "{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"], DARK_THEME_MATCH);
 
   var StyledDiv = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDiv",
@@ -28345,6 +28398,9 @@
   exports.CounterButton = CounterButton;
   exports.CrownBlankIcon = CrownBlankIcon$1;
   exports.CrownSelectedIcon = CrownSelectedIcon$1;
+  exports.DARK_THEME_MATCH = DARK_THEME_MATCH;
+  exports.DARK_THEME_NAMES = DARK_THEME_NAMES;
+  exports.DARK_THEME_SELECTOR = DARK_THEME_SELECTOR;
   exports.DEFAULT_KEYBOARD_STEP = DEFAULT_KEYBOARD_STEP;
   exports.DataTable = DataTable;
   exports.DatePicker = DatePicker;
@@ -28622,6 +28678,8 @@
   exports.StyledInputTimeWrapper = StyledInputTimeWrapper;
   exports.SunIcon = SunIcon$1;
   exports.SystemSettingsIcon = SystemSettingsIcon$1;
+  exports.THEMES = THEMES;
+  exports.THEME_NAMES = THEME_NAMES;
   exports.Table = Table;
   exports.Tag = Tag;
   exports.TaskAddIcon = TaskAddIcon$1;
@@ -28671,6 +28729,7 @@
   exports.formatHours = formatHours;
   exports.formatNumber = formatNumber;
   exports.getNumberFromString = getNumberFromString;
+  exports.isDarkTheme = isDarkTheme;
   exports.isOptionGroup = isOptionGroup;
   exports.isResizeKey = isResizeKey;
   exports.isValidUrl = isValidUrl;