@punkbit/cui 0.0.251-rc.16 → 0.2.0-rc.3

package/dist/cjs/components/ContextMenu/index.cjs

@@ -0,0 +1,143 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('react/jsx-runtime');
+const RightMenu = require('@radix-ui/react-context-menu');
+const styledComponents = require('styled-components');
+const react = require('react');
+const GenericMenu = require('../GenericMenu/index.cjs');
+const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
+const IconWrapper = require('../IconWrapper/index.cjs');
+const useInputModality = require('../../hooks/internal/useInputModality.cjs');
+const Icon = require('../Icon/index.cjs');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const RightMenu__namespace = /*#__PURE__*/_interopNamespace(RightMenu);
+
+const ContextMenu = (props) => /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Root, { ...props });
+const TriggerDiv = styledComponents.styled.div.withConfig({
+  componentId: "sc-14vshdt-0"
+})(["&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], ({
+  theme
+}) => theme.click.global.color.outline.default);
+const ContextMenuTrigger = react.forwardRef(({
+  disabled,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsx(TriggerDiv, { ref, ...props }) });
+});
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+ContextMenu.Trigger = ContextMenuTrigger;
+const ContextMenuSubTrigger = ({
+  icon,
+  iconDir,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(GenericMenu.GenericMenuItem, { as: RightMenu__namespace.SubTrigger, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dropdown-arrow", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right" }) })
+  ] });
+};
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+ContextMenu.SubTrigger = ContextMenuSubTrigger;
+const RightMenuContent = styledComponents.styled(GenericMenu.GenericMenuPanel).withConfig({
+  componentId: "sc-14vshdt-1"
+})(["flex-direction:column;z-index:1;", ";"], ({
+  $showArrow
+}) => $showArrow ? `
+      &[data-side="bottom"] {
+        margin-top: -1px;
+      }
+      &[data-side="top"] {
+        margin-bottom: -1px;
+      }
+      &[data-side="left"] {
+        margin-right: -1px;
+        .popover-arrow {
+          margin-right: 1rem;
+        }
+      }
+      }
+      &[data-side="right"] {
+        margin-left: -1px;
+        .popover-arrow {
+          margin-left: 1rem;
+        }
+      }
+  ` : "");
+const ContextMenuContent = ({
+  sub,
+  children,
+  showArrow,
+  // TODO: remove deprecated side and align
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  side,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  align,
+  ...props
+}) => {
+  const ContentElement = sub ? RightMenu__namespace.SubContent : RightMenu__namespace.Content;
+  const inputModalityProps = useInputModality.useInputModality();
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(RightMenuContent, { ...props, $type: "context-menu", $showArrow: showArrow, as: ContentElement, ...inputModalityProps, children: [
+    showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: RightMenu__namespace.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, { className: "popover-arrow" }) }),
+    children
+  ] }) });
+};
+ContextMenuContent.displayName = "ContextMenuContent";
+ContextMenu.Content = ContextMenuContent;
+const RightMenuGroup = styledComponents.styled(RightMenu__namespace.Group).withConfig({
+  componentId: "sc-14vshdt-2"
+})(["width:100%;border-bottom:1px solid ", ";"], ({
+  theme
+}) => theme.click.genericMenu.item.color.default.stroke.default);
+const ContextMenuGroup = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenuGroup, { ...props });
+};
+ContextMenuGroup.displayName = "ContextMenuGroup";
+ContextMenu.Group = ContextMenuGroup;
+const RightMenuSub = styledComponents.styled(RightMenu__namespace.Sub).withConfig({
+  componentId: "sc-14vshdt-3"
+})(["border-bottom:1px solid ", ";"], ({
+  theme
+}) => theme.click.genericMenu.item.color.default.stroke.default);
+const ContextMenuSub = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenuSub, { ...props });
+};
+ContextMenuSub.displayName = "ContextMenuSub";
+ContextMenu.Sub = ContextMenuSub;
+const ContextMenuItem = ({
+  icon,
+  iconDir,
+  type = "default",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuItem, { as: RightMenu__namespace.Item, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }) });
+};
+ContextMenuItem.displayName = "ContextMenuItem";
+ContextMenu.Item = ContextMenuItem;
+
+exports.ContextMenu = ContextMenu;
+exports.default = ContextMenu;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/ContextMenu/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import * as RightMenu from '@radix-ui/react-context-menu';\nimport { styled } from 'styled-components';\nimport { forwardRef } from 'react';\nimport type { HorizontalDirection } from '@/types';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon';\nimport { Arrow, GenericMenuItem, GenericMenuPanel } from '@/components/GenericMenu';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { IconWrapper } from '@/components/IconWrapper/IconWrapper';\nimport { useInputModality } from '@/hooks/internal';\nimport type { ArrowProps, ContextMenuItemProps } from './ContextMenu.types';\n\nexport const ContextMenu = (props: RightMenu.ContextMenuProps) => (\n  <RightMenu.Root {...props} />\n);\n\nconst TriggerDiv = styled.div`\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.click.global.color.outline.default};\n    outline-offset: 2px;\n  }\n`;\n\nconst ContextMenuTrigger = forwardRef<HTMLDivElement, RightMenu.ContextMenuTriggerProps>(\n  ({ disabled, ...props }, ref) => {\n    return (\n      <RightMenu.Trigger\n        asChild\n        disabled={disabled}\n      >\n        <TriggerDiv\n          ref={ref}\n          {...props}\n        />\n      </RightMenu.Trigger>\n    );\n  }\n);\n\nContextMenuTrigger.displayName = 'ContextMenuTrigger';\nContextMenu.Trigger = ContextMenuTrigger;\n\ninterface ContextMenuSubTriggerProps extends RightMenu.ContextMenuSubTriggerProps {\n  icon?: IconName;\n  iconDir?: HorizontalDirection;\n}\nconst ContextMenuSubTrigger = ({\n  icon,\n  iconDir,\n  children,\n  ...props\n}: ContextMenuSubTriggerProps) => {\n  return (\n    <GenericMenuItem\n      as={RightMenu.SubTrigger}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n      <div className=\"dropdown-arrow\">\n        <Icon name=\"chevron-right\" />\n      </div>\n    </GenericMenuItem>\n  );\n};\n\nContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';\nContextMenu.SubTrigger = ContextMenuSubTrigger;\n\ntype DeprecatedFields = {\n  /** @deprecated The side field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n  side?: string;\n  /** @deprecated The align field have been deprecated. See https://github.com/ClickHouse/click-ui/pull/756/files#diff-801534275d6fc19b60543371f1055838e7d60942fa4005c3ab1623293e10fb7fR24 */\n  align?: string;\n};\n\ntype ContextMenuContentProps = RightMenu.ContextMenuContentProps & {\n  sub?: true;\n} & ArrowProps &\n  DeprecatedFields;\n\ntype ContextMenuSubContentProps = RightMenu.ContextMenuSubContentProps & {\n  sub?: never;\n} & ArrowProps &\n  DeprecatedFields;\n\nconst RightMenuContent = styled(GenericMenuPanel)<{ $showArrow?: boolean }>`\n  flex-direction: column;\n  z-index: 1;\n  ${({ $showArrow }) =>\n    $showArrow\n      ? `\n      &[data-side=\"bottom\"] {\n        margin-top: -1px;\n      }\n      &[data-side=\"top\"] {\n        margin-bottom: -1px;\n      }\n      &[data-side=\"left\"] {\n        margin-right: -1px;\n        .popover-arrow {\n          margin-right: 1rem;\n        }\n      }\n      }\n      &[data-side=\"right\"] {\n        margin-left: -1px;\n        .popover-arrow {\n          margin-left: 1rem;\n        }\n      }\n  `\n      : ''};\n`;\n\nconst ContextMenuContent = ({\n  sub,\n  children,\n  showArrow,\n  // TODO: remove deprecated side and align\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  side,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  align,\n  ...props\n}: ContextMenuContentProps | ContextMenuSubContentProps) => {\n  const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;\n  const inputModalityProps = useInputModality();\n  return (\n    <RightMenu.Portal>\n      <RightMenuContent\n        {...props}\n        $type=\"context-menu\"\n        $showArrow={showArrow}\n        as={ContentElement}\n        {...inputModalityProps}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RightMenu.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow className=\"popover-arrow\" />\n          </Arrow>\n        )}\n        {children}\n      </RightMenuContent>\n    </RightMenu.Portal>\n  );\n};\n\nContextMenuContent.displayName = 'ContextMenuContent';\nContextMenu.Content = ContextMenuContent;\n\nconst RightMenuGroup = styled(RightMenu.Group)`\n  width: 100%;\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst ContextMenuGroup = (props: RightMenu.ContextMenuGroupProps) => {\n  return <RightMenuGroup {...props} />;\n};\n\nContextMenuGroup.displayName = 'ContextMenuGroup';\nContextMenu.Group = ContextMenuGroup;\n\nconst RightMenuSub = styled(RightMenu.Sub)`\n  border-bottom: 1px solid\n    ${({ theme }) => theme.click.genericMenu.item.color.default.stroke.default};\n`;\n\nconst ContextMenuSub = ({ ...props }: RightMenu.ContextMenuGroupProps) => {\n  return <RightMenuSub {...props} />;\n};\n\nContextMenuSub.displayName = 'ContextMenuSub';\nContextMenu.Sub = ContextMenuSub;\n\nconst ContextMenuItem = ({\n  icon,\n  iconDir,\n  type = 'default',\n  children,\n  ...props\n}: ContextMenuItemProps) => {\n  return (\n    <GenericMenuItem\n      as={RightMenu.Item}\n      $type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {children}\n      </IconWrapper>\n    </GenericMenuItem>\n  );\n};\n\nContextMenuItem.displayName = 'ContextMenuItem';\nContextMenu.Item = ContextMenuItem;\n\nexport default ContextMenu;\n"],"names":["ContextMenu","props","jsx","RightMenu","TriggerDiv","styled","div","withConfig","componentId","theme","click","global","color","outline","default","ContextMenuTrigger","forwardRef","disabled","ref","displayName","Trigger","ContextMenuSubTrigger","icon","iconDir","children","GenericMenuItem","SubTrigger","IconWrapper","Icon","RightMenuContent","GenericMenuPanel","$showArrow","ContextMenuContent","sub","showArrow","side","align","ContentElement","SubContent","Content","inputModalityProps","useInputModality","Arrow","Popover_Arrow","RightMenuGroup","Group","genericMenu","item","stroke","ContextMenuGroup","RightMenuSub","Sub","ContextMenuSub","ContextMenuItem","type","Item"],"mappings":"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"}

package/dist/cjs/components/CrossButton/index.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponents = require('styled-components');
+const EmptyButton = require('../EmptyButton/index.cjs');
+
+const CrossButton = styledComponents.styled(EmptyButton.EmptyButton).withConfig({
+  componentId: "sc-4xtddp-0"
+})(["padding:", " ", ";background:", ";border-radius:", ";&:hover{background:", ";}"], ({
+  theme
+}) => theme.click.button.iconButton.sm.space.y, ({
+  theme
+}) => theme.click.button.iconButton.sm.space.x, ({
+  theme
+}) => theme.click.button.iconButton.color.primary.background.default, ({
+  theme
+}) => theme.click.button.iconButton.radii.all, ({
+  theme
+}) => theme.click.button.iconButton.color.primary.background.hover);
+
+exports.CrossButton = CrossButton;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/CrossButton/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CrossButton/CrossButton.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nexport const CrossButton = styled(EmptyButton)`\n  padding: ${({ theme }) => theme.click.button.iconButton.sm.space.y}\n    ${({ theme }) => theme.click.button.iconButton.sm.space.x};\n  background: ${({ theme }) =>\n    theme.click.button.iconButton.color.primary.background.default};\n  border-radius: ${({ theme }) => theme.click.button.iconButton.radii.all};\n\n  &:hover {\n    background: ${({ theme }) =>\n      theme.click.button.iconButton.color.primary.background.hover};\n  }\n`;\n"],"names":["CrossButton","styled","EmptyButton","withConfig","componentId","theme","click","button","iconButton","sm","space","y","x","color","primary","background","default","radii","all","hover"],"mappings":";;;;;;;AAGO,MAAMA,WAAAA,GAAcC,uBAAAA,CAAOC,uBAAW,CAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,UAAA,EAAA,GAAA,EAAA,gBAAA,iBAAA,EAAA,sBAAA,EAAA,IAAA,CAAA,EACjC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,WAAWC,EAAAA,CAAGC,KAAAA,CAAMC,GAC7D,CAAC;AAAA,EAAEN;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,WAAWC,EAAAA,CAAGC,KAAAA,CAAME,GAC5C,CAAC;AAAA,EAAEP;AAAM,CAAA,KACrBA,KAAAA,CAAMC,MAAMC,MAAAA,CAAOC,UAAAA,CAAWK,MAAMC,OAAAA,CAAQC,UAAAA,CAAWC,SACxC,CAAC;AAAA,EAAEX;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,UAAAA,CAAWS,KAAAA,CAAMC,KAGpD,CAAC;AAAA,EAAEb;AAAM,CAAA,KACrBA,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,WAAWK,KAAAA,CAAMC,OAAAA,CAAQC,WAAWI,KAAK;;;;"}

package/dist/cjs/components/DateDetails/index.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+const common = require('../Link/common.cjs');
+const date = require('../../utils/date.cjs');
+const Popover = require('../Popover/index.cjs');
+const Text = require('../Text/index.cjs');
+const GridContainer = require('../GridContainer/index.cjs');
+const Container = require('../Container/index.cjs');
+const dayjs = require('dayjs');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+
+const UnderlinedTrigger = styledComponents.styled(Popover.Popover.Trigger).withConfig({
+  componentId: "sc-18cd6u2-0"
+})(["", ""], common.linkStyles);
+const formatDateDetails = (date, timezone) => {
+  const isCurrentYear = dayjs__default.default().year() === date.year();
+  const formatForCurrentYear = "MMM D, h:mm a";
+  const formatForPastYear = "MMM D, YYYY, h:mm a";
+  if (isCurrentYear) {
+    if (timezone) {
+      const dateWithTimezone = date.tz(timezone);
+      return dateWithTimezone.format(formatForCurrentYear).replace("am", "a.m.").replace("pm", "p.m.");
+    }
+    return date.format(formatForCurrentYear).replace("am", "a.m.").replace("pm", "p.m.");
+  }
+  if (timezone) {
+    const dateWithTimezone = date.tz(timezone);
+    return dateWithTimezone.format(formatForPastYear).replace("am", "a.m.").replace("pm", "p.m.");
+  }
+  return date.format(formatForPastYear).replace("am", "a.m.").replace("pm", "p.m.");
+};
+const DateDetails = ({
+  date: date$1,
+  side = "top",
+  size = "sm",
+  systemTimeZone,
+  weight = "normal"
+}) => {
+  const dayjsDate = dayjs__default.default(date$1);
+  let systemTime;
+  if (systemTimeZone) {
+    try {
+      systemTime = dayjsDate.tz(systemTimeZone);
+    } catch {
+      systemTime = dayjsDate.tz("America/New_York");
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover.Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(UnderlinedTrigger, { $size: "sm", $weight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size, weight, children: dayjs__default.default.utc(date$1).fromNow() }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Content, { side, showArrow: true, children: /* @__PURE__ */ jsxRuntime.jsxs(GridContainer.GridContainer, { columnGap: "xl", gridTemplateColumns: "repeat(2, auto)", gap: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", size: "sm", children: "Local" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { justifyContent: "end", children: /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { size: "sm", children: [
+        formatDateDetails(dayjsDate),
+        " (",
+        date.formatTimezone({
+          date: dayjsDate,
+          timezone: dayjs__default.default.tz.guess()
+        }),
+        ")"
+      ] }) }),
+      systemTime && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", size: "sm", children: "System" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { justifyContent: "end", children: /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { size: "sm", children: [
+          formatDateDetails(systemTime, systemTimeZone),
+          " (",
+          date.formatTimezone({
+            date: systemTime,
+            timezone: systemTimeZone
+          }),
+          ")"
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", size: "sm", children: "UTC" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { justifyContent: "end", children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", children: formatDateDetails(dayjsDate.utc(), "UTC") }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", size: "sm", children: "Unix" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { justifyContent: "end", children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { size: "sm", children: Math.round(dayjsDate.valueOf() / 1e3) }) })
+    ] }) })
+  ] });
+};
+
+exports.DateDetails = DateDetails;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/DateDetails/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/DateDetails/DateDetails.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nimport { Popover } from '@/components/Popover';\nimport { Text } from '@/components/Text';\nimport { linkStyles, StyledLinkProps } from '@/components/Link/common';\nimport { GridContainer } from '@/components/GridContainer';\nimport { Container } from '@/components/Container';\n\nimport { dayjs, Dayjs, formatTimezone } from '@/utils/date';\n\nconst UnderlinedTrigger = styled(Popover.Trigger)<StyledLinkProps>`\n  ${linkStyles}\n`;\n\nconst formatDateDetails = (date: Dayjs, timezone?: string): string => {\n  const isCurrentYear = dayjs().year() === date.year();\n  const formatForCurrentYear = 'MMM D, h:mm a';\n  const formatForPastYear = 'MMM D, YYYY, h:mm a';\n\n  if (isCurrentYear) {\n    if (timezone) {\n      const dateWithTimezone = date.tz(timezone);\n      return dateWithTimezone\n        .format(formatForCurrentYear)\n        .replace('am', 'a.m.')\n        .replace('pm', 'p.m.');\n    }\n\n    return date.format(formatForCurrentYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n  }\n\n  if (timezone) {\n    const dateWithTimezone = date.tz(timezone);\n    return dateWithTimezone\n      .format(formatForPastYear)\n      .replace('am', 'a.m.')\n      .replace('pm', 'p.m.');\n  }\n  return date.format(formatForPastYear).replace('am', 'a.m.').replace('pm', 'p.m.');\n};\n\nimport { DateDetailsProps } from './DateDetails.types';\n\nexport const DateDetails = ({\n  date,\n  side = 'top',\n  size = 'sm',\n  systemTimeZone,\n  weight = 'normal',\n}: DateDetailsProps) => {\n  const dayjsDate = dayjs(date);\n\n  let systemTime;\n  if (systemTimeZone) {\n    try {\n      systemTime = dayjsDate.tz(systemTimeZone);\n    } catch {\n      systemTime = dayjsDate.tz('America/New_York');\n    }\n  }\n\n  return (\n    <Popover>\n      <UnderlinedTrigger\n        $size=\"sm\"\n        $weight=\"medium\"\n      >\n        <Text\n          size={size}\n          weight={weight}\n        >\n          {dayjs.utc(date).fromNow()}\n        </Text>\n      </UnderlinedTrigger>\n      <Popover.Content\n        side={side}\n        showArrow\n      >\n        <GridContainer\n          columnGap=\"xl\"\n          gridTemplateColumns=\"repeat(2, auto)\"\n          gap=\"sm\"\n        >\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Local\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">\n              {formatDateDetails(dayjsDate)} (\n              {formatTimezone({\n                date: dayjsDate,\n                timezone: dayjs.tz.guess(),\n              })}\n              )\n            </Text>\n          </Container>\n\n          {systemTime && (\n            <>\n              <Text\n                color=\"muted\"\n                size=\"sm\"\n              >\n                System\n              </Text>\n\n              <Container justifyContent=\"end\">\n                <Text size=\"sm\">\n                  {formatDateDetails(systemTime, systemTimeZone)} (\n                  {formatTimezone({\n                    date: systemTime,\n                    timezone: systemTimeZone,\n                  })}\n                  )\n                </Text>\n              </Container>\n            </>\n          )}\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            UTC\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{formatDateDetails(dayjsDate.utc(), 'UTC')}</Text>\n          </Container>\n\n          <Text\n            color=\"muted\"\n            size=\"sm\"\n          >\n            Unix\n          </Text>\n          <Container justifyContent=\"end\">\n            <Text size=\"sm\">{Math.round(dayjsDate.valueOf() / 1000)}</Text>\n          </Container>\n        </GridContainer>\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"names":["UnderlinedTrigger","styled","Popover","Trigger","withConfig","componentId","linkStyles","formatDateDetails","date","timezone","isCurrentYear","dayjs","year","formatForCurrentYear","formatForPastYear","dateWithTimezone","tz","format","replace","DateDetails","side","size","systemTimeZone","weight","dayjsDate","systemTime","jsx","Text","utc","fromNow","jsxs","GridContainer","Container","formatTimezone","guess","Fragment","Math","round","valueOf"],"mappings":"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"}