@clickhouse/click-ui 0.4.0 → 0.6.0-rc1

package/dist/esm/components/Container/Container.css

@@ -0,0 +1,174 @@
+.container__JMoiT {
+  display: var(--container-display, flex);
+  width: var(--container-width, 100%);
+  min-width: var(--container-min-width, auto);
+  max-width: var(--container-max-width, none);
+  height: var(--container-height);
+  min-height: var(--container-min-height);
+  max-height: var(--container-max-height);
+  padding: var(--container-padding);
+  overflow: var(--container-overflow);
+  flex: var(--container-grow);
+  flex-shrink: var(--container-shrink);
+  /* stylelint-disable declaration-block-no-redundant-longhand-properties -- flex-direction and flex-wrap are overridden independently by modifier classes, so the flex-flow shorthand can't be used */
+  flex-direction: row;
+  flex-wrap: nowrap;
+  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+  justify-content: start;
+  align-items: center;
+  gap: var(--container-gap);
+}
+
+.container_gap_none__bxc76 {
+  --container-gap: var(--click-container-gap-none);
+}
+
+.container_gap_xxs__HkKAF {
+  --container-gap: var(--click-container-gap-xxs);
+}
+
+.container_gap_xs__zrSVC {
+  --container-gap: var(--click-container-gap-xs);
+}
+
+.container_gap_sm__lVcQZ {
+  --container-gap: var(--click-container-gap-sm);
+}
+
+.container_gap_md__Vq3bB {
+  --container-gap: var(--click-container-gap-md);
+}
+
+.container_gap_lg__Zei2b {
+  --container-gap: var(--click-container-gap-lg);
+}
+
+.container_gap_xl__Tuq6H {
+  --container-gap: var(--click-container-gap-xl);
+}
+
+.container_gap_xxl__PuJSf {
+  --container-gap: var(--click-container-gap-xxl);
+}
+
+.container_padding_none__R5RME {
+  --container-padding: var(--click-container-space-none);
+}
+
+.container_padding_xxs__DLsuv {
+  --container-padding: var(--click-container-space-xxs);
+}
+
+.container_padding_xs__m6NTF {
+  --container-padding: var(--click-container-space-xs);
+}
+
+.container_padding_sm__d92oN {
+  --container-padding: var(--click-container-space-sm);
+}
+
+.container_padding_md__R9Z7f {
+  --container-padding: var(--click-container-space-md);
+}
+
+.container_padding_lg__MTjzd {
+  --container-padding: var(--click-container-space-lg);
+}
+
+.container_padding_xl__Q-MuJ {
+  --container-padding: var(--click-container-space-xl);
+}
+
+.container_padding_xxl__yoxF6 {
+  --container-padding: var(--click-container-space-xxl);
+}
+
+.container_orientation_horizontal__COuvp {
+  flex-direction: row;
+}
+
+.container_orientation_vertical__ozeKX {
+  flex-direction: column;
+}
+
+.container_wrap_nowrap__sQdYT {
+  flex-wrap: nowrap;
+}
+
+.container_wrap_wrap__m1DNy {
+  flex-wrap: wrap;
+}
+
+.container_wrap_wrap-reverse__XhrY7 {
+  flex-wrap: wrap-reverse;
+}
+
+.container_align-items_start__sLi-i {
+  align-items: start;
+}
+
+.container_align-items_center__tkH9z {
+  align-items: center;
+}
+
+.container_align-items_end__AGbnX {
+  align-items: end;
+}
+
+.container_align-items_stretch__UjUJL {
+  align-items: stretch;
+}
+
+.container_justify-content_start__X4TLa {
+  justify-content: start;
+}
+
+.container_justify-content_center__7BRVR {
+  justify-content: center;
+}
+
+.container_justify-content_space-between__7nJKC {
+  justify-content: space-between;
+}
+
+.container_justify-content_space-around__VeJeX {
+  justify-content: space-around;
+}
+
+.container_justify-content_space-evenly__0gIEO {
+  justify-content: space-evenly;
+}
+
+.container_justify-content_end__LWD4b {
+  justify-content: end;
+}
+
+.container_justify-content_left__MGZLQ {
+  justify-content: left;
+}
+
+.container_justify-content_right__RT5XP {
+  justify-content: right;
+}
+
+/* The source emitted invalid values (`max-width: auto`, `flex-direction: auto`)
+   in the non-responsive branches; browsers ignore them, so only `width` changes
+   below the breakpoint when isResponsive is false. The responsive branch is the
+   only one that overrides max-width and flex-direction. */
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 768px) {
+  .container_responsive__gaWH0 {
+    width: 100%;
+    max-width: none;
+    flex-direction: column;
+  }
+
+  .container_non-responsive_fill__n-5dw {
+    width: 100%;
+  }
+
+  .container_non-responsive_hug__TRqoP {
+    width: auto;
+  }
+}

package/dist/esm/components/Container/Container.module.css.js

@@ -0,0 +1,64 @@
+const container = "container__JMoiT";
+const container_gap_none = "container_gap_none__bxc76";
+const container_gap_xxs = "container_gap_xxs__HkKAF";
+const container_gap_xs = "container_gap_xs__zrSVC";
+const container_gap_sm = "container_gap_sm__lVcQZ";
+const container_gap_md = "container_gap_md__Vq3bB";
+const container_gap_lg = "container_gap_lg__Zei2b";
+const container_gap_xl = "container_gap_xl__Tuq6H";
+const container_gap_xxl = "container_gap_xxl__PuJSf";
+const container_padding_none = "container_padding_none__R5RME";
+const container_padding_xxs = "container_padding_xxs__DLsuv";
+const container_padding_xs = "container_padding_xs__m6NTF";
+const container_padding_sm = "container_padding_sm__d92oN";
+const container_padding_md = "container_padding_md__R9Z7f";
+const container_padding_lg = "container_padding_lg__MTjzd";
+const container_padding_xl = "container_padding_xl__Q-MuJ";
+const container_padding_xxl = "container_padding_xxl__yoxF6";
+const container_orientation_horizontal = "container_orientation_horizontal__COuvp";
+const container_orientation_vertical = "container_orientation_vertical__ozeKX";
+const container_wrap_nowrap = "container_wrap_nowrap__sQdYT";
+const container_wrap_wrap = "container_wrap_wrap__m1DNy";
+const container_responsive = "container_responsive__gaWH0";
+const styles = {
+	container: container,
+	container_gap_none: container_gap_none,
+	container_gap_xxs: container_gap_xxs,
+	container_gap_xs: container_gap_xs,
+	container_gap_sm: container_gap_sm,
+	container_gap_md: container_gap_md,
+	container_gap_lg: container_gap_lg,
+	container_gap_xl: container_gap_xl,
+	container_gap_xxl: container_gap_xxl,
+	container_padding_none: container_padding_none,
+	container_padding_xxs: container_padding_xxs,
+	container_padding_xs: container_padding_xs,
+	container_padding_sm: container_padding_sm,
+	container_padding_md: container_padding_md,
+	container_padding_lg: container_padding_lg,
+	container_padding_xl: container_padding_xl,
+	container_padding_xxl: container_padding_xxl,
+	container_orientation_horizontal: container_orientation_horizontal,
+	container_orientation_vertical: container_orientation_vertical,
+	container_wrap_nowrap: container_wrap_nowrap,
+	container_wrap_wrap: container_wrap_wrap,
+	"container_wrap_wrap-reverse": "container_wrap_wrap-reverse__XhrY7",
+	"container_align-items_start": "container_align-items_start__sLi-i",
+	"container_align-items_center": "container_align-items_center__tkH9z",
+	"container_align-items_end": "container_align-items_end__AGbnX",
+	"container_align-items_stretch": "container_align-items_stretch__UjUJL",
+	"container_justify-content_start": "container_justify-content_start__X4TLa",
+	"container_justify-content_center": "container_justify-content_center__7BRVR",
+	"container_justify-content_space-between": "container_justify-content_space-between__7nJKC",
+	"container_justify-content_space-around": "container_justify-content_space-around__VeJeX",
+	"container_justify-content_space-evenly": "container_justify-content_space-evenly__0gIEO",
+	"container_justify-content_end": "container_justify-content_end__LWD4b",
+	"container_justify-content_left": "container_justify-content_left__MGZLQ",
+	"container_justify-content_right": "container_justify-content_right__RT5XP",
+	container_responsive: container_responsive,
+	"container_non-responsive_fill": "container_non-responsive_fill__n-5dw",
+	"container_non-responsive_hug": "container_non-responsive_hug__TRqoP"
+};
+
+export { container, container_gap_lg, container_gap_md, container_gap_none, container_gap_sm, container_gap_xl, container_gap_xs, container_gap_xxl, container_gap_xxs, container_orientation_horizontal, container_orientation_vertical, container_padding_lg, container_padding_md, container_padding_none, container_padding_sm, container_padding_xl, container_padding_xs, container_padding_xxl, container_padding_xxs, container_responsive, container_wrap_nowrap, container_wrap_wrap, styles as default };
+//# sourceMappingURL=Container.module.css.js.map

package/dist/esm/components/Container/Container.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/Container/index.js

@@ -1,7 +1,59 @@
+import "./Container.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { cn } from '../../lib/cva.js';
+import styles from './Container.module.css.js';
+import { cva } from 'class-variance-authority';
 
+const containerVariants = cva(styles.container, {
+  variants: {
+    gap: {
+      none: styles.container_gap_none,
+      xxs: styles.container_gap_xxs,
+      xs: styles.container_gap_xs,
+      sm: styles.container_gap_sm,
+      md: styles.container_gap_md,
+      lg: styles.container_gap_lg,
+      xl: styles.container_gap_xl,
+      xxl: styles.container_gap_xxl
+    },
+    padding: {
+      none: styles.container_padding_none,
+      xxs: styles.container_padding_xxs,
+      xs: styles.container_padding_xs,
+      sm: styles.container_padding_sm,
+      md: styles.container_padding_md,
+      lg: styles.container_padding_lg,
+      xl: styles.container_padding_xl,
+      xxl: styles.container_padding_xxl
+    },
+    orientation: {
+      horizontal: styles.container_orientation_horizontal,
+      vertical: styles.container_orientation_vertical
+    },
+    wrap: {
+      nowrap: styles.container_wrap_nowrap,
+      wrap: styles.container_wrap_wrap,
+      "wrap-reverse": styles["container_wrap_wrap-reverse"]
+    },
+    alignItems: {
+      start: styles["container_align-items_start"],
+      center: styles["container_align-items_center"],
+      end: styles["container_align-items_end"],
+      stretch: styles["container_align-items_stretch"]
+    },
+    justifyContent: {
+      center: styles["container_justify-content_center"],
+      "space-between": styles["container_justify-content_space-between"],
+      "space-around": styles["container_justify-content_space-around"],
+      "space-evenly": styles["container_justify-content_space-evenly"],
+      start: styles["container_justify-content_start"],
+      end: styles["container_justify-content_end"],
+      left: styles["container_justify-content_left"],
+      right: styles["container_justify-content_right"]
+    }
+  }
+});
 const _Container = ({
   component,
   alignItems,
@@ -10,7 +62,7 @@ const _Container = ({
   gap = "none",
   grow,
   shrink,
-  isResponsive,
+  isResponsive = true,
   justifyContent = "start",
   maxWidth,
   minWidth,
@@ -22,62 +74,46 @@ const _Container = ({
   minHeight,
   overflow,
   display = "flex",
+  className,
+  style,
   ...props
 }, ref) => {
-  return /* @__PURE__ */ jsx(Wrapper, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, $display: display, "data-testid": "container", ...props, children });
+  const Component = component ?? "div";
+  const resolvedAlignItems = alignItems ?? (orientation === "vertical" ? "start" : "center");
+  const mergedStyle = useMemo(() => ({
+    "--container-display": display,
+    "--container-width": fillWidth === true ? "100%" : "auto",
+    "--container-min-width": minWidth ?? "auto",
+    "--container-max-width": maxWidth ?? "none",
+    ...grow && {
+      "--container-grow": grow
+    },
+    ...shrink && {
+      "--container-shrink": shrink
+    },
+    ...fillHeight && {
+      "--container-height": "100%"
+    },
+    ...maxHeight && {
+      "--container-max-height": maxHeight
+    },
+    ...minHeight && {
+      "--container-min-height": minHeight
+    },
+    ...overflow && {
+      "--container-overflow": overflow
+    },
+    ...style
+  }), [display, fillWidth, minWidth, maxWidth, grow, shrink, fillHeight, maxHeight, minHeight, overflow, style]);
+  return /* @__PURE__ */ jsx(Component, { ref, "data-testid": "container", ...props, style: mergedStyle, className: cn(containerVariants({
+    gap,
+    padding,
+    orientation,
+    wrap,
+    alignItems: resolvedAlignItems,
+    justifyContent
+  }), isResponsive ? styles.container_responsive : fillWidth ? styles["container_non-responsive_fill"] : styles["container_non-responsive_hug"], className), children });
 };
-const Wrapper = styled.div.withConfig({
-  componentId: "sc-bcplth-0"
-})(["display:", ";", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
-  $display
-}) => $display, ({
-  $grow,
-  $shrink
-}) => `
-    ${$grow && `flex: ${$grow}`};
-    ${$shrink && `flex-shrink: ${$shrink}`};
-  `, ({
-  $fillHeight,
-  $maxHeight,
-  $minHeight
-}) => `
-    ${$fillHeight && "height: 100%"};
-    ${$maxHeight && `max-height: ${$maxHeight}`};
-    ${$minHeight && `min-height: ${$minHeight}`};
-  `, ({
-  $overflow
-}) => `
-    ${$overflow && `overflow: ${$overflow}`};
-  `, ({
-  $wrap = "nowrap"
-}) => $wrap, ({
-  theme,
-  $gapSize
-}) => theme.click.container.gap[$gapSize], ({
-  $maxWidth
-}) => $maxWidth ?? "none", ({
-  $minWidth
-}) => $minWidth ?? "auto", ({
-  theme,
-  $paddingSize
-}) => theme.click.container.space[$paddingSize], ({
-  $fillWidth = true
-}) => $fillWidth === true ? "100%" : "auto", ({
-  $orientation = "horizontal"
-}) => $orientation === "horizontal" ? "row" : "column", ({
-  $alignItems = "center"
-}) => $alignItems, ({
-  $justifyContent = "left"
-}) => $justifyContent === "start" ? "start" : `${$justifyContent}`, ({
-  theme
-}) => theme.breakpoint.sizes.md, ({
-  $isResponsive = true,
-  $fillWidth = true
-}) => $isResponsive === true ? "100%" : $fillWidth === true ? "100%" : "auto", ({
-  $isResponsive = true
-}) => $isResponsive === true ? "none" : "auto", ({
-  $isResponsive = true
-}) => $isResponsive === true ? "column" : "auto");
 const Container = forwardRef(_Container);
 
 export { Container };

package/dist/esm/components/Container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport type { Orientation } from '@/types';\nimport { ContainerProps, GapOptions, PaddingOptions } from './Container.types';\n\ntype AlignItemsOptions = 'start' | 'center' | 'end' | 'stretch';\ntype GrowShrinkOptions = '0' | '1' | '2' | '3' | '4' | '5' | '6';\ntype JustifyContentOptions =\n  | 'center'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly'\n  | 'start'\n  | 'end'\n  | 'left'\n  | 'right';\ntype WrapOptions = 'nowrap' | 'wrap' | 'wrap-reverse';\n\ntype ContainerPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof T> & ContainerProps<T>\n) => ReactNode;\n\nconst _Container = <T extends ElementType = 'div'>(\n  {\n    component,\n    alignItems,\n    children,\n    fillWidth = true,\n    gap = 'none',\n    grow,\n    shrink,\n    isResponsive,\n    justifyContent = 'start',\n    maxWidth,\n    minWidth,\n    orientation = 'horizontal',\n    padding = 'none',\n    wrap = 'nowrap',\n    fillHeight,\n    maxHeight,\n    minHeight,\n    overflow,\n    display = 'flex',\n    ...props\n  }: Omit<ComponentProps<T>, keyof T> & ContainerProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  return (\n    <Wrapper\n      ref={ref}\n      as={component ?? 'div'}\n      $alignItems={alignItems ?? (orientation === 'vertical' ? 'start' : 'center')}\n      $fillWidth={fillWidth}\n      $gapSize={gap}\n      $grow={grow}\n      $shrink={shrink}\n      $isResponsive={isResponsive}\n      $justifyContent={justifyContent}\n      $maxWidth={maxWidth}\n      $minWidth={minWidth}\n      $orientation={orientation}\n      $paddingSize={padding}\n      $wrap={wrap}\n      $fillHeight={fillHeight}\n      $maxHeight={maxHeight}\n      $minHeight={minHeight}\n      $overflow={overflow}\n      $display={display}\n      data-testid=\"container\"\n      {...props}\n    >\n      {children}\n    </Wrapper>\n  );\n};\nconst Wrapper = styled.div<{\n  $alignItems: AlignItemsOptions;\n  $fillWidth?: boolean;\n  $gapSize: GapOptions;\n  $grow?: GrowShrinkOptions;\n  $shrink?: GrowShrinkOptions;\n  $isResponsive?: boolean;\n  $justifyContent: JustifyContentOptions;\n  $maxWidth?: string;\n  $minWidth?: string;\n  $orientation: Orientation;\n  $paddingSize: PaddingOptions;\n  $wrap: WrapOptions;\n  $fillHeight?: boolean;\n  $minHeight?: string;\n  $maxHeight?: string;\n  $overflow?: string;\n  $display: string;\n}>`\n  display: ${({ $display }) => $display};\n  ${({ $grow, $shrink }) => `\n    ${$grow && `flex: ${$grow}`};\n    ${$shrink && `flex-shrink: ${$shrink}`};\n  `}\n  ${({ $fillHeight, $maxHeight, $minHeight }) => `\n    ${$fillHeight && 'height: 100%'};\n    ${$maxHeight && `max-height: ${$maxHeight}`};\n    ${$minHeight && `min-height: ${$minHeight}`};\n  `}\n  ${({ $overflow }) => `\n    ${$overflow && `overflow: ${$overflow}`};\n  `}\n  flex-wrap: ${({ $wrap = 'nowrap' }) => $wrap};\n  gap: ${({ theme, $gapSize }) => theme.click.container.gap[$gapSize]};\n  max-width: ${({ $maxWidth }) => $maxWidth ?? 'none'};\n  min-width: ${({ $minWidth }) => $minWidth ?? 'auto'};\n  padding: ${({ theme, $paddingSize }) => theme.click.container.space[$paddingSize]};\n  width: ${({ $fillWidth = true }) => ($fillWidth === true ? '100%' : 'auto')};\n  flex-direction: ${({ $orientation = 'horizontal' }) =>\n    $orientation === 'horizontal' ? 'row' : 'column'};\n  align-items: ${({ $alignItems = 'center' }) => $alignItems};\n  justify-content: ${({ $justifyContent = 'left' }) =>\n    $justifyContent === 'start' ? 'start' : `${$justifyContent}`};\n\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {\n    width: ${({ $isResponsive = true, $fillWidth = true }) =>\n      $isResponsive === true ? '100%' : $fillWidth === true ? '100%' : 'auto'};\n    max-width: ${({ $isResponsive = true }) =>\n      $isResponsive === true ? 'none' : 'auto'};\n    flex-direction: ${({ $isResponsive = true }) =>\n      $isResponsive === true ? 'column' : 'auto'};\n  }\n`;\n\nexport const Container: ContainerPolymorphicComponent = forwardRef(_Container);\n"],"names":["_Container","component","alignItems","children","fillWidth","gap","grow","shrink","isResponsive","justifyContent","maxWidth","minWidth","orientation","padding","wrap","fillHeight","maxHeight","minHeight","overflow","display","props","ref","Wrapper","styled","div","withConfig","componentId","$display","$grow","$shrink","$fillHeight","$maxHeight","$minHeight","$overflow","$wrap","theme","$gapSize","click","container","$maxWidth","$minWidth","$paddingSize","space","$fillWidth","$orientation","$alignItems","$justifyContent","breakpoint","sizes","md","$isResponsive","Container","forwardRef"],"mappings":";;;;AA4BA,MAAMA,aAAa,CACjB;AAAA,EACEC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA,GAAY,IAAA;AAAA,EACZC,GAAAA,GAAM,MAAA;AAAA,EACNC,IAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,cAAAA,GAAiB,OAAA;AAAA,EACjBC,QAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,WAAAA,GAAc,YAAA;AAAA,EACdC,OAAAA,GAAU,MAAA;AAAA,EACVC,IAAAA,GAAO,QAAA;AAAA,EACPC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,OAAAA,GAAU,MAAA;AAAA,EACV,GAAGC;AACiD,CAAA,EACtDC,GAAAA,KACG;AACH,EAAA,uBACE,GAAA,CAAC,WACC,GAAA,EACA,EAAA,EAAIpB,aAAa,KAAA,EACjB,WAAA,EAAaC,UAAAA,KAAeU,WAAAA,KAAgB,UAAA,GAAa,OAAA,GAAU,WACnE,UAAA,EAAYR,SAAAA,EACZ,UAAUC,GAAAA,EACV,KAAA,EAAOC,MACP,OAAA,EAASC,MAAAA,EACT,aAAA,EAAeC,YAAAA,EACf,eAAA,EAAiBC,cAAAA,EACjB,WAAWC,QAAAA,EACX,SAAA,EAAWC,UACX,YAAA,EAAcC,WAAAA,EACd,cAAcC,OAAAA,EACd,KAAA,EAAOC,IAAAA,EACP,WAAA,EAAaC,UAAAA,EACb,UAAA,EAAYC,WACZ,UAAA,EAAYC,SAAAA,EACZ,WAAWC,QAAAA,EACX,QAAA,EAAUC,SACV,aAAA,EAAY,WAAA,EACZ,GAAIC,KAAAA,EAEHjB,QAAAA,EACH,CAAA;AAEJ,CAAA;AACA,MAAMmB,OAAAA,GAAUC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,UAAA,EAAA,GAAA,EAAA,KAAA,GAAA,EAAA,aAAA,EAAA,SAAA,aAAA,EAAA,aAAA,EAAA,aAAA,SAAA,EAAA,kBAAA,EAAA,iBAAA,mBAAA,EAAA,qBAAA,EAAA,YAAA,aAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,EAmBb,CAAC;AAAA,EAAEC;AAAS,CAAA,KAAMA,UAC3B,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC;AAAQ,CAAA,KAAM;AAAA,IAAA,EACtBD,KAAAA,IAAS,CAAA,MAAA,EAASA,KAAK,CAAA,CAAE,CAAA;AAAA,IAAA,EACzBC,OAAAA,IAAW,CAAA,aAAA,EAAgBA,OAAO,CAAA,CAAE,CAAA;AAAA,EAAA,CAAA,EAEtC,CAAC;AAAA,EAAEC,WAAAA;AAAAA,EAAaC,UAAAA;AAAAA,EAAYC;AAAW,CAAA,KAAM;AAAA,IAAA,EAC3CF,eAAe,cAAc,CAAA;AAAA,IAAA,EAC7BC,UAAAA,IAAc,CAAA,YAAA,EAAeA,UAAU,CAAA,CAAE,CAAA;AAAA,IAAA,EACzCC,UAAAA,IAAc,CAAA,YAAA,EAAeA,UAAU,CAAA,CAAE,CAAA;AAAA,EAAA,CAAA,EAE3C,CAAC;AAAA,EAAEC;AAAU,CAAA,KAAM;AAAA,IAAA,EACjBA,SAAAA,IAAa,CAAA,UAAA,EAAaA,SAAS,CAAA,CAAE,CAAA;AAAA,EAAA,CAAA,EAE5B,CAAC;AAAA,EAAEC,KAAAA,GAAQ;AAAS,CAAA,KAAMA,OAChC,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC;AAAS,CAAA,KAAMD,MAAME,KAAAA,CAAMC,SAAAA,CAAUjC,GAAAA,CAAI+B,QAAQ,GACrD,CAAC;AAAA,EAAEG;AAAU,CAAA,KAAMA,SAAAA,IAAa,QAChC,CAAC;AAAA,EAAEC;AAAU,CAAA,KAAMA,SAAAA,IAAa,QAClC,CAAC;AAAA,EAAEL,KAAAA;AAAAA,EAAOM;AAAa,CAAA,KAAMN,MAAME,KAAAA,CAAMC,SAAAA,CAAUI,KAAAA,CAAMD,YAAY,GACvE,CAAC;AAAA,EAAEE,UAAAA,GAAa;AAAK,CAAA,KAAOA,UAAAA,KAAe,IAAA,GAAO,MAAA,GAAS,MAAA,EAClD,CAAC;AAAA,EAAEC,YAAAA,GAAe;AAAa,CAAA,KAC/CA,YAAAA,KAAiB,YAAA,GAAe,KAAA,GAAQ,QAAA,EAC3B,CAAC;AAAA,EAAEC,WAAAA,GAAc;AAAS,CAAA,KAAMA,aAC5B,CAAC;AAAA,EAAEC,eAAAA,GAAkB;AAAO,CAAA,KAC7CA,oBAAoB,OAAA,GAAU,OAAA,GAAU,CAAA,EAAGA,eAAe,IAEvC,CAAC;AAAA,EAAEX;AAAM,CAAA,KAAMA,KAAAA,CAAMY,UAAAA,CAAWC,KAAAA,CAAMC,EAAAA,EAChD,CAAC;AAAA,EAAEC,aAAAA,GAAgB,IAAA;AAAA,EAAMP,UAAAA,GAAa;AAAK,CAAA,KAClDO,kBAAkB,IAAA,GAAO,MAAA,GAASP,eAAe,IAAA,GAAO,MAAA,GAAS,QACtD,CAAC;AAAA,EAAEO,aAAAA,GAAgB;AAAK,CAAA,KACnCA,aAAAA,KAAkB,IAAA,GAAO,MAAA,GAAS,MAAA,EAClB,CAAC;AAAA,EAAEA,aAAAA,GAAgB;AAAK,CAAA,KACxCA,aAAAA,KAAkB,IAAA,GAAO,QAAA,GAAW,MAAM,CAAA;AAIzC,MAAMC,SAAAA,GAA2CC,WAAWpD,UAAU;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  CSSProperties,\n  ElementType,\n  ReactNode,\n  forwardRef,\n  useMemo,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { ContainerProps } from './Container.types';\nimport styles from './Container.module.css';\n\nconst containerVariants = cva(styles.container, {\n  variants: {\n    gap: {\n      none: styles.container_gap_none,\n      xxs: styles.container_gap_xxs,\n      xs: styles.container_gap_xs,\n      sm: styles.container_gap_sm,\n      md: styles.container_gap_md,\n      lg: styles.container_gap_lg,\n      xl: styles.container_gap_xl,\n      xxl: styles.container_gap_xxl,\n    },\n    padding: {\n      none: styles.container_padding_none,\n      xxs: styles.container_padding_xxs,\n      xs: styles.container_padding_xs,\n      sm: styles.container_padding_sm,\n      md: styles.container_padding_md,\n      lg: styles.container_padding_lg,\n      xl: styles.container_padding_xl,\n      xxl: styles.container_padding_xxl,\n    },\n    orientation: {\n      horizontal: styles.container_orientation_horizontal,\n      vertical: styles.container_orientation_vertical,\n    },\n    wrap: {\n      nowrap: styles.container_wrap_nowrap,\n      wrap: styles.container_wrap_wrap,\n      'wrap-reverse': styles['container_wrap_wrap-reverse'],\n    },\n    alignItems: {\n      start: styles['container_align-items_start'],\n      center: styles['container_align-items_center'],\n      end: styles['container_align-items_end'],\n      stretch: styles['container_align-items_stretch'],\n    },\n    justifyContent: {\n      center: styles['container_justify-content_center'],\n      'space-between': styles['container_justify-content_space-between'],\n      'space-around': styles['container_justify-content_space-around'],\n      'space-evenly': styles['container_justify-content_space-evenly'],\n      start: styles['container_justify-content_start'],\n      end: styles['container_justify-content_end'],\n      left: styles['container_justify-content_left'],\n      right: styles['container_justify-content_right'],\n    },\n  },\n});\n\ntype ContainerPolymorphicComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof ContainerProps<T>> & ContainerProps<T>\n) => ReactNode;\n\nconst _Container = <T extends ElementType = 'div'>(\n  {\n    component,\n    alignItems,\n    children,\n    fillWidth = true,\n    gap = 'none',\n    grow,\n    shrink,\n    isResponsive = true,\n    justifyContent = 'start',\n    maxWidth,\n    minWidth,\n    orientation = 'horizontal',\n    padding = 'none',\n    wrap = 'nowrap',\n    fillHeight,\n    maxHeight,\n    minHeight,\n    overflow,\n    display = 'flex',\n    className,\n    style,\n    ...props\n  }: Omit<ComponentProps<T>, keyof ContainerProps<T>> & ContainerProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'div';\n  const resolvedAlignItems =\n    alignItems ?? (orientation === 'vertical' ? 'start' : 'center');\n\n  // `_Container` is a real component (wrapped by `forwardRef` below); the\n  // rules-of-hooks PascalCase-name heuristic false-positives on our\n  // `_`-prefixed polymorphic-component naming convention.\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const mergedStyle = useMemo(\n    () =>\n      ({\n        '--container-display': display,\n        '--container-width': fillWidth === true ? '100%' : 'auto',\n        '--container-min-width': minWidth ?? 'auto',\n        '--container-max-width': maxWidth ?? 'none',\n        ...(grow && { '--container-grow': grow }),\n        ...(shrink && { '--container-shrink': shrink }),\n        ...(fillHeight && { '--container-height': '100%' }),\n        ...(maxHeight && { '--container-max-height': maxHeight }),\n        ...(minHeight && { '--container-min-height': minHeight }),\n        ...(overflow && { '--container-overflow': overflow }),\n        ...style,\n      }) as CSSProperties,\n    [\n      display,\n      fillWidth,\n      minWidth,\n      maxWidth,\n      grow,\n      shrink,\n      fillHeight,\n      maxHeight,\n      minHeight,\n      overflow,\n      style,\n    ]\n  );\n\n  return (\n    <Component\n      ref={ref}\n      data-testid=\"container\"\n      {...props}\n      style={mergedStyle}\n      className={cn(\n        containerVariants({\n          gap,\n          padding,\n          orientation,\n          wrap,\n          alignItems: resolvedAlignItems,\n          justifyContent,\n        }),\n        isResponsive\n          ? styles.container_responsive\n          : fillWidth\n            ? styles['container_non-responsive_fill']\n            : styles['container_non-responsive_hug'],\n        className\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport const Container: ContainerPolymorphicComponent = forwardRef(_Container);\n"],"names":["containerVariants","cva","styles","container","variants","gap","none","container_gap_none","xxs","container_gap_xxs","xs","container_gap_xs","sm","container_gap_sm","md","container_gap_md","lg","container_gap_lg","xl","container_gap_xl","xxl","container_gap_xxl","padding","container_padding_none","container_padding_xxs","container_padding_xs","container_padding_sm","container_padding_md","container_padding_lg","container_padding_xl","container_padding_xxl","orientation","horizontal","container_orientation_horizontal","vertical","container_orientation_vertical","wrap","nowrap","container_wrap_nowrap","container_wrap_wrap","alignItems","start","center","end","stretch","justifyContent","left","right","_Container","component","children","fillWidth","grow","shrink","isResponsive","maxWidth","minWidth","fillHeight","maxHeight","minHeight","overflow","display","className","style","props","ref","Component","resolvedAlignItems","mergedStyle","useMemo","cn","container_responsive","Container","forwardRef"],"mappings":"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"}

package/dist/esm/components/DateDetails/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { styled } from 'styled-components';
-import { linkStyles } from '../Link/common.js';
+import { linkStyles } from '../../styles/linkStyles.js';
 import { formatTimezone } from '../../utils/date.js';
 import { Popover } from '../Popover/index.js';
 import { Text } from '../Text/index.js';

package/dist/esm/components/DateDetails/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","utc","fromNow","formatTimezone","guess","Math","round","valueOf"],"mappings":"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"}
+{"version":3,"file":"index.js","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 '@/styles/linkStyles';\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","utc","fromNow","formatTimezone","guess","Math","round","valueOf"],"mappings":"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"}

package/dist/esm/components/DatePicker/DateTimeRangePicker.js

@@ -419,6 +419,7 @@ const DateTimeRangePicker = ({
   openDirection = "right",
   placeholder = "start date – end date",
   predefinedTimesList,
+  responsivePositioning = true,
   shouldFireIfInvalid = true,
   shouldShowSeconds,
   startDate,
@@ -529,7 +530,7 @@ const DateTimeRangePicker = ({
   const shouldShowPredefinedTimes = predefinedTimesList !== void 0 && predefinedTimesList.length > 0;
   return /* @__PURE__ */ jsxs(Dropdown, { onOpenChange: handleOpenChange, open: isOpen, children: [
     /* @__PURE__ */ jsx(Dropdown.Trigger, { disabled, onKeyDown: onTriggerKeyDown, children: /* @__PURE__ */ jsx(DateTimeRangePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, placeholder, selectedEndDate, selectedStartDate, shouldShowSeconds, timezone }) }),
-    /* @__PURE__ */ jsx(NoOverflowDropdownContent, { align: "start", children: /* @__PURE__ */ jsx(Container, { orientation: "horizontal", children: shouldShowPredefinedTimes ? /* @__PURE__ */ jsxs(PredefinedCalendarContainer, { gap: "none", orientation: "horizontal", padding: "none", children: [
+    /* @__PURE__ */ jsx(NoOverflowDropdownContent, { align: "start", responsivePositioning, children: /* @__PURE__ */ jsx(Container, { orientation: "horizontal", children: shouldShowPredefinedTimes ? /* @__PURE__ */ jsxs(PredefinedCalendarContainer, { gap: "none", orientation: "horizontal", padding: "none", children: [
       /* @__PURE__ */ jsx(PredefinedTimes, { onSelectDateRange, predefinedTimesList, selectedEndDate, selectedStartDate, setEndDate: setSelectedEndDate, setStartDate: setSelectedStartDate, shouldShowCustomRange, showCustomDateRange: setShouldShowCustomRange }),
       shouldShowCustomRange && /* @__PURE__ */ jsx(CalendarRendererContainer, { $openDirection: calendarOpenDirection, ref: calendarContainerRef, children: /* @__PURE__ */ jsx(TabbedCalendar, { defaultActiveTab, endDate: selectedEndDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setEndDate: setSelectedEndDate, setSelectedDate: handleSelectDate, setStartDate: setSelectedStartDate, shouldShowSeconds: Boolean(shouldShowSeconds), startDate: selectedStartDate, timezone }) })
     ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TabbedCalendar, { defaultActiveTab, endDate: selectedEndDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, setEndDate: setSelectedEndDate, setSelectedDate: handleSelectDate, setStartDate: setSelectedStartDate, shouldShowSeconds: Boolean(shouldShowSeconds), startDate: selectedStartDate, timezone }) }) }) })