@primer/react 38.0.0-rc.0 → 38.0.0-rc.09f015db1

package/dist/Textarea/Textarea.js

@@ -0,0 +1,150 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import { TextInputBaseWrapper } from '../internal/components/TextInputWrapper.js';
+import classes from './TextArea.module.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+const DEFAULT_TEXTAREA_ROWS = 7;
+const DEFAULT_TEXTAREA_COLS = 30;
+const DEFAULT_TEXTAREA_RESIZE = 'both';
+/**
+ * An accessible, native textarea component that supports validation states.
+ * This component accepts all native HTML <textarea> attributes as props.
+ */
+const Textarea = /*#__PURE__*/React.forwardRef((t0, ref) => {
+  const $ = c(37);
+  let block;
+  let className;
+  let contrast;
+  let disabled;
+  let maxHeight;
+  let minHeight;
+  let required;
+  let rest;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let validationStatus;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      value,
+      disabled,
+      required,
+      validationStatus,
+      rows: t1,
+      cols: t2,
+      resize: t3,
+      block,
+      contrast,
+      className,
+      minHeight,
+      maxHeight,
+      style,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = block;
+    $[2] = className;
+    $[3] = contrast;
+    $[4] = disabled;
+    $[5] = maxHeight;
+    $[6] = minHeight;
+    $[7] = required;
+    $[8] = rest;
+    $[9] = style;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = validationStatus;
+    $[14] = value;
+  } else {
+    block = $[1];
+    className = $[2];
+    contrast = $[3];
+    disabled = $[4];
+    maxHeight = $[5];
+    minHeight = $[6];
+    required = $[7];
+    rest = $[8];
+    style = $[9];
+    t1 = $[10];
+    t2 = $[11];
+    t3 = $[12];
+    validationStatus = $[13];
+    value = $[14];
+  }
+  const rows = t1 === undefined ? DEFAULT_TEXTAREA_ROWS : t1;
+  const cols = t2 === undefined ? DEFAULT_TEXTAREA_COLS : t2;
+  const resize = t3 === undefined ? DEFAULT_TEXTAREA_RESIZE : t3;
+  const t4 = validationStatus === "error" ? "true" : "false";
+  let t5;
+  if ($[15] !== maxHeight || $[16] !== minHeight || $[17] !== style) {
+    t5 = {
+      minHeight,
+      maxHeight,
+      ...style
+    };
+    $[15] = maxHeight;
+    $[16] = minHeight;
+    $[17] = style;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== cols || $[20] !== disabled || $[21] !== ref || $[22] !== required || $[23] !== resize || $[24] !== rest || $[25] !== rows || $[26] !== t4 || $[27] !== t5 || $[28] !== value) {
+    t6 = /*#__PURE__*/jsx("textarea", {
+      value: value,
+      "data-resize": resize,
+      "aria-required": required,
+      "aria-invalid": t4,
+      ref: ref,
+      disabled: disabled,
+      rows: rows,
+      cols: cols,
+      className: classes.TextArea,
+      style: t5,
+      ...rest
+    });
+    $[19] = cols;
+    $[20] = disabled;
+    $[21] = ref;
+    $[22] = required;
+    $[23] = resize;
+    $[24] = rest;
+    $[25] = rows;
+    $[26] = t4;
+    $[27] = t5;
+    $[28] = value;
+    $[29] = t6;
+  } else {
+    t6 = $[29];
+  }
+  let t7;
+  if ($[30] !== block || $[31] !== className || $[32] !== contrast || $[33] !== disabled || $[34] !== t6 || $[35] !== validationStatus) {
+    t7 = /*#__PURE__*/jsx(TextInputBaseWrapper, {
+      validationStatus: validationStatus,
+      disabled: disabled,
+      block: block,
+      contrast: contrast,
+      className: className,
+      children: t6
+    });
+    $[30] = block;
+    $[31] = className;
+    $[32] = contrast;
+    $[33] = disabled;
+    $[34] = t6;
+    $[35] = validationStatus;
+    $[36] = t7;
+  } else {
+    t7 = $[36];
+  }
+  return t7;
+});
+Textarea.displayName = 'Textarea';
+Textarea.__SLOT__ = Symbol('Textarea');
+
+export { DEFAULT_TEXTAREA_COLS, DEFAULT_TEXTAREA_RESIZE, DEFAULT_TEXTAREA_ROWS, Textarea as default };

package/dist/ThemeProvider.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export declare const defaultColorMode = "day";
+export type Theme = {
+    [key: string]: any;
+};
+type ColorMode = 'day' | 'night' | 'light' | 'dark';
+export type ColorModeWithAuto = ColorMode | 'auto';
+export type ThemeProviderProps = {
+    colorMode?: ColorModeWithAuto;
+    dayScheme?: string;
+    nightScheme?: string;
+    preventSSRMismatch?: boolean;
+};
+export declare const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>>;
+export declare function useTheme(): {
+    theme?: Theme;
+    colorScheme?: string;
+    colorMode?: ColorModeWithAuto;
+    resolvedColorMode?: ColorMode;
+    resolvedColorScheme?: string;
+    dayScheme?: string;
+    nightScheme?: string;
+    setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>;
+    setDayScheme: React.Dispatch<React.SetStateAction<string>>;
+    setNightScheme: React.Dispatch<React.SetStateAction<string>>;
+};
+export declare function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string): string;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAKrC,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAAA;AACxC,KAAK,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AACnD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AA8BD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAqF/E,CAAA;AAED,wBAAgB,QAAQ;YAlHd,KAAK;kBACC,MAAM;gBACR,iBAAiB;wBACT,SAAS;0BACP,MAAM;gBAChB,MAAM;kBACJ,MAAM;kBACN,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;kBACvD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;EA2G7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqGD,eAAe,aAAa,CAAA"}

package/dist/ThemeProvider.js

@@ -0,0 +1,220 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import theme from './theme.js';
+import deepmerge from 'deepmerge';
+import { useSyncedState } from './hooks/useSyncedState.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from './hooks/useId.js';
+
+const defaultColorMode = 'day';
+const defaultDayScheme = 'light';
+const defaultNightScheme = 'dark';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const ThemeContext = /*#__PURE__*/React.createContext({
+  setColorMode: () => null,
+  setDayScheme: () => null,
+  setNightScheme: () => null
+});
+
+// inspired from __NEXT_DATA__, we use application/json to avoid CSRF policy with inline scripts
+const getServerHandoff = id => {
+  try {
+    var _document$getElementB;
+    const serverData = (_document$getElementB = document.getElementById(`__PRIMER_DATA_${id}__`)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.textContent;
+    if (serverData) return JSON.parse(serverData);
+  } catch (_error) {
+    // if document/element does not exist or JSON is invalid, supress error
+  }
+  return {};
+};
+const ThemeProvider = ({
+  children,
+  ...props
+}) => {
+  var _ref, _props$colorMode, _ref2, _props$dayScheme, _ref3, _props$nightScheme;
+  // Get fallback values from parent ThemeProvider (if exists)
+  const {
+    theme: fallbackTheme,
+    colorMode: fallbackColorMode,
+    dayScheme: fallbackDayScheme,
+    nightScheme: fallbackNightScheme
+  } = useTheme();
+
+  // Initialize state
+  const theme$1 = fallbackTheme !== null && fallbackTheme !== void 0 ? fallbackTheme : theme;
+  const uniqueDataId = useId();
+  const {
+    resolvedServerColorMode
+  } = getServerHandoff(uniqueDataId);
+  const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode);
+  const [colorMode, setColorMode] = useSyncedState((_ref = (_props$colorMode = props.colorMode) !== null && _props$colorMode !== void 0 ? _props$colorMode : fallbackColorMode) !== null && _ref !== void 0 ? _ref : defaultColorMode);
+  const [dayScheme, setDayScheme] = useSyncedState((_ref2 = (_props$dayScheme = props.dayScheme) !== null && _props$dayScheme !== void 0 ? _props$dayScheme : fallbackDayScheme) !== null && _ref2 !== void 0 ? _ref2 : defaultDayScheme);
+  const [nightScheme, setNightScheme] = useSyncedState((_ref3 = (_props$nightScheme = props.nightScheme) !== null && _props$nightScheme !== void 0 ? _props$nightScheme : fallbackNightScheme) !== null && _ref3 !== void 0 ? _ref3 : defaultNightScheme);
+  const systemColorMode = useSystemColorMode();
+  const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode);
+  const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
+  const {
+    resolvedTheme,
+    resolvedColorScheme
+  } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
+
+  // this effect will only run on client
+  React.useEffect(function updateColorModeAfterServerPassthrough() {
+    const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode);
+    if (resolvedColorModePassthrough.current) {
+      // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
+      if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
+        window.setTimeout(() => {
+          // use ReactDOM.flushSync to prevent automatic batching of state updates since React 18
+          // ref: https://github.com/reactwg/react-18/discussions/21
+          ReactDOM.flushSync(() => {
+            // override colorMode to whatever is resolved on the client to get a re-render
+            setColorMode(resolvedColorModeOnClient);
+          });
+
+          // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
+          setColorMode(colorMode);
+        });
+      }
+      resolvedColorModePassthrough.current = null;
+    }
+  }, [colorMode, systemColorMode, setColorMode]);
+  return /*#__PURE__*/jsx(ThemeContext.Provider, {
+    value: {
+      theme: resolvedTheme,
+      colorScheme,
+      colorMode,
+      resolvedColorMode,
+      resolvedColorScheme,
+      dayScheme,
+      nightScheme,
+      setColorMode,
+      setDayScheme,
+      setNightScheme
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      "data-color-mode": colorMode === 'auto' ? 'auto' : colorScheme.includes('dark') ? 'dark' : 'light',
+      "data-light-theme": dayScheme,
+      "data-dark-theme": nightScheme,
+      children: [children, props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
+        type: "application/json",
+        id: `__PRIMER_DATA_${uniqueDataId}__`,
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify({
+            resolvedServerColorMode: resolvedColorMode
+          })
+        }
+      }) : null]
+    })
+  });
+};
+ThemeProvider.displayName = "ThemeProvider";
+function useTheme() {
+  return React.useContext(ThemeContext);
+}
+function useColorSchemeVar(values, fallback) {
+  var _values$colorScheme;
+  const {
+    colorScheme: t0
+  } = useTheme();
+  const colorScheme = t0 === undefined ? "" : t0;
+  return (_values$colorScheme = values[colorScheme]) !== null && _values$colorScheme !== void 0 ? _values$colorScheme : fallback;
+}
+function useSystemColorMode() {
+  const $ = c(2);
+  const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      var _window, _window$matchMedia;
+      const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
+      const matchesMediaToColorMode = function matchesMediaToColorMode(matches) {
+        return matches ? "night" : "day";
+      };
+      const handleChange = function handleChange(event) {
+        const isNight = event.matches;
+        setSystemColorMode(matchesMediaToColorMode(isNight));
+      };
+      if (media) {
+        const isNight_0 = media.matches;
+        setSystemColorMode(matchesMediaToColorMode(isNight_0));
+        if (media.addEventListener !== undefined) {
+          media.addEventListener("change", handleChange);
+          return function cleanup() {
+            media.removeEventListener("change", handleChange);
+          };
+        } else {
+          if (media.addListener !== undefined) {
+            media.addListener(handleChange);
+            return function cleanup() {
+              media.removeListener(handleChange);
+            };
+          }
+        }
+      }
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  React.useEffect(t0, t1);
+  return systemColorMode;
+}
+function getSystemColorMode() {
+  var _window$matchMedia2, _window2, _window$matchMedia2$c;
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (typeof window !== 'undefined' && (_window$matchMedia2 = (_window2 = window).matchMedia) !== null && _window$matchMedia2 !== void 0 && (_window$matchMedia2$c = _window$matchMedia2.call(_window2, '(prefers-color-scheme: dark)')) !== null && _window$matchMedia2$c !== void 0 && _window$matchMedia2$c.matches) {
+    return 'night';
+  }
+  return 'day';
+}
+function resolveColorMode(colorMode, systemColorMode) {
+  switch (colorMode) {
+    case 'auto':
+      return systemColorMode;
+    default:
+      return colorMode;
+  }
+}
+function chooseColorScheme(colorMode, dayScheme, nightScheme) {
+  switch (colorMode) {
+    case 'day':
+    case 'light':
+      return dayScheme;
+    case 'dark':
+    case 'night':
+      return nightScheme;
+  }
+}
+function applyColorScheme(theme, colorScheme) {
+  if (!theme.colorSchemes) {
+    return {
+      resolvedTheme: theme,
+      resolvedColorScheme: undefined
+    };
+  }
+  if (!theme.colorSchemes[colorScheme]) {
+    // eslint-disable-next-line no-console
+    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
+
+    // Apply the first defined color scheme
+    const defaultColorScheme = Object.keys(theme.colorSchemes)[0];
+    return {
+      resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
+      resolvedColorScheme: defaultColorScheme
+    };
+  }
+  return {
+    resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
+    resolvedColorScheme: colorScheme
+  };
+}
+
+export { ThemeProvider, ThemeProvider as default, defaultColorMode, useColorSchemeVar, useTheme };

package/dist/Timeline/Timeline.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+type StyledTimelineProps = {
+    clipSidebar?: boolean;
+    className?: string;
+};
+export type TimelineProps = StyledTimelineProps & React.ComponentPropsWithoutRef<'div'>;
+type StyledTimelineItemProps = {
+    condensed?: boolean;
+    className?: string;
+};
+/**
+ * @deprecated Use the `TimelineItemProps` type instead
+ */
+export type TimelineItemsProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'div'>;
+export type TimelineItemProps = StyledTimelineItemProps & React.ComponentPropsWithoutRef<'div'>;
+export type TimelineBadgeProps = {
+    children?: React.ReactNode;
+    className?: string;
+} & React.ComponentPropsWithoutRef<'div'>;
+export type TimelineBodyProps = {
+    /** Class name for custom styling */
+    className?: string;
+} & React.ComponentPropsWithoutRef<'div'>;
+export type TimelineBreakProps = {
+    /** Class name for custom styling */
+    className?: string;
+} & React.ComponentPropsWithoutRef<'div'>;
+declare const _default: React.ForwardRefExoticComponent<StyledTimelineProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<StyledTimelineItemProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Badge: {
+        ({ className, ...props }: TimelineBadgeProps): React.JSX.Element;
+        displayName: string;
+    };
+    Body: React.ForwardRefExoticComponent<{
+        /** Class name for custom styling */
+        className?: string;
+    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Break: React.ForwardRefExoticComponent<{
+        /** Class name for custom styling */
+        className?: string;
+    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+//# sourceMappingURL=Timeline.d.ts.map

package/dist/Timeline/Timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../src/Timeline/Timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,mBAAmB,GAAG;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAEtE,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAevF,KAAK,uBAAuB,GAAG;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAExE;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEhG,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAiB/F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAYzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAQzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;;;;kCAxBK,kBAAkB;;;;QAW9D,oCAAoC;oBACxB,MAAM;;;QAUlB,oCAAoC;oBACxB,MAAM;;;AASpB,wBAKE"}

package/dist/Timeline/Timeline.js

@@ -0,0 +1,239 @@
+import { c } from 'react-compiler-runtime';
+import { clsx } from 'clsx';
+import React from 'react';
+import classes from './Timeline.module.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+const Timeline = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
+  const $ = c(11);
+  let className;
+  let clipSidebar;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      clipSidebar,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = clipSidebar;
+    $[3] = props;
+  } else {
+    className = $[1];
+    clipSidebar = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = clsx(className, classes.Timeline);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const t2 = clipSidebar ? "" : undefined;
+  let t3;
+  if ($[6] !== forwardRef || $[7] !== props || $[8] !== t1 || $[9] !== t2) {
+    t3 = /*#__PURE__*/jsx("div", {
+      ...props,
+      className: t1,
+      ref: forwardRef,
+      "data-clip-sidebar": t2
+    });
+    $[6] = forwardRef;
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+});
+Timeline.displayName = 'Timeline';
+
+/**
+ * @deprecated Use the `TimelineItemProps` type instead
+ */
+
+const TimelineItem = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
+  const $ = c(11);
+  let className;
+  let condensed;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      condensed,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = condensed;
+    $[3] = props;
+  } else {
+    className = $[1];
+    condensed = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = clsx(className, "Timeline-Item", classes.TimelineItem);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const t2 = condensed ? "" : undefined;
+  let t3;
+  if ($[6] !== forwardRef || $[7] !== props || $[8] !== t1 || $[9] !== t2) {
+    t3 = /*#__PURE__*/jsx("div", {
+      ...props,
+      className: t1,
+      ref: forwardRef,
+      "data-condensed": t2
+    });
+    $[6] = forwardRef;
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+});
+TimelineItem.displayName = 'TimelineItem';
+const TimelineBadge = t0 => {
+  const $ = c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = clsx(className, classes.TimelineBadge);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/jsx("div", {
+      className: classes.TimelineBadgeWrapper,
+      children: /*#__PURE__*/jsx("div", {
+        ...props,
+        className: t1
+      })
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+};
+TimelineBadge.displayName = 'Timeline.Badge';
+const TimelineBody = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
+  const $ = c(9);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = clsx(className, classes.TimelineBody);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== forwardRef || $[6] !== props || $[7] !== t1) {
+    t2 = /*#__PURE__*/jsx("div", {
+      ...props,
+      className: t1,
+      ref: forwardRef
+    });
+    $[5] = forwardRef;
+    $[6] = props;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+TimelineBody.displayName = 'TimelineBody';
+const TimelineBreak = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
+  const $ = c(9);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = clsx(className, classes.TimelineBreak);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== forwardRef || $[6] !== props || $[7] !== t1) {
+    t2 = /*#__PURE__*/jsx("div", {
+      ...props,
+      className: t1,
+      ref: forwardRef
+    });
+    $[5] = forwardRef;
+    $[6] = props;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+TimelineBreak.displayName = 'TimelineBreak';
+var Timeline$1 = Object.assign(Timeline, {
+  Item: TimelineItem,
+  Badge: TimelineBadge,
+  Body: TimelineBody,
+  Break: TimelineBreak
+});
+
+export { Timeline$1 as default };