@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/illustrations/createIllustration.js

@@ -0,0 +1,53 @@
+import React, { memo, useMemo } from 'react';
+import { convertDimensionToSize } from '@coinbase/cds-common/utils/convertDimensionToSize';
+import { convertSizeWithMultiplier } from '@coinbase/cds-common/utils/convertSizeWithMultiplier';
+import { getDefaultSizeObjectForIllustration } from '@coinbase/cds-common/utils/getDefaultSizeObjectForIllustration';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function createIllustration(variant, config) {
+  const defaultSize = getDefaultSizeObjectForIllustration(variant);
+  const Illustration = /*#__PURE__*/memo(function Illustration(_ref) {
+    let {
+      name,
+      dimension,
+      scaleMultiplier,
+      testID,
+      alt = '',
+      fallback = null
+    } = _ref;
+    const {
+      activeColorScheme
+    } = useTheme();
+    const version = config[name];
+    const src = "https://static-assets.coinbase.com/ui-infra/illustration/v1/".concat(variant, "/svg/").concat(activeColorScheme, "/").concat(name, "-").concat(version, ".svg");
+    const {
+      width,
+      height
+    } = useMemo(() => {
+      let size = defaultSize;
+      if (dimension) {
+        size = convertDimensionToSize(dimension);
+      }
+      if (scaleMultiplier) {
+        size = convertSizeWithMultiplier(size, scaleMultiplier);
+      }
+      return size;
+    }, [dimension, scaleMultiplier]);
+    if (version === undefined) {
+      if (isDevelopment()) {
+        console.error("Unable to find illustration with name: ".concat(name));
+      }
+      return fallback;
+    }
+    return /*#__PURE__*/_jsx("img", {
+      alt: alt,
+      "data-testid": testID,
+      height: height,
+      src: src,
+      width: width
+    });
+  });
+  Illustration.displayName = 'Illustration';
+  return Illustration;
+}

package/esm/illustrations/index.js

@@ -0,0 +1,5 @@
+export * from './HeroSquare';
+export * from './Pictogram';
+export * from './SpotIcon';
+export * from './SpotRectangle';
+export * from './SpotSquare';

package/esm/index.js

@@ -0,0 +1,6 @@
+export * from './core/createThemeCssVars';
+export * from './core/polymorphism';
+export * from './core/theme';
+export * from './cx';
+export * from './hooks/useTheme';
+export * from './system/ThemeProvider';

package/esm/layout/Box.js

@@ -0,0 +1,239 @@
+const _excluded = ["children", "as", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "style", "className", "testID", "pin", "elevation", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "background", "borderColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderStartWidth", "borderBottomWidth", "borderWidth", "borderRadius", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textAlign", "textDecoration", "textTransform", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginStart", "marginEnd", "userSelect", "visibility", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "aspectRatio", "top", "bottom", "left", "right", "transform", "flexBasis", "flexShrink", "flexGrow", "gridTemplateColumns", "gridTemplateRows", "gridTemplateAreas", "gridTemplate", "gridAutoColumns", "gridAutoRows", "gridAutoFlow", "grid", "gridRowStart", "gridColumnStart", "gridRowEnd", "gridColumnEnd", "gridRow", "gridColumn", "gridArea", "opacity"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { cx } from '../cx';
+import { borderStyle, pinStyle } from '../styles/booleanStyles';
+import { getStyles } from '../styles/styleProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const boxDefaultElement = 'div';
+export const Box = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      as,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityHint,
+      style,
+      className,
+      testID,
+      pin,
+      elevation,
+      bordered,
+      borderedTop,
+      borderedBottom,
+      borderedStart,
+      borderedEnd,
+      borderedHorizontal,
+      borderedVertical,
+      dangerouslySetBackground,
+      // Begin className style props
+      display = 'flex',
+      position,
+      overflow,
+      zIndex,
+      gap,
+      columnGap,
+      rowGap,
+      justifyContent,
+      alignContent,
+      alignItems,
+      alignSelf,
+      flexDirection,
+      flexWrap,
+      color,
+      background,
+      borderColor,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderTopWidth,
+      borderEndWidth,
+      borderStartWidth,
+      borderBottomWidth,
+      borderWidth,
+      borderRadius,
+      font,
+      fontFamily = font,
+      fontSize = font,
+      fontWeight = font,
+      lineHeight = font,
+      textAlign,
+      textDecoration,
+      textTransform,
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingStart,
+      paddingEnd,
+      margin,
+      marginX,
+      marginY,
+      marginTop,
+      marginBottom,
+      marginStart,
+      marginEnd,
+      userSelect,
+      visibility,
+      // Begin inline style props
+      width,
+      height,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      aspectRatio,
+      top,
+      bottom,
+      left,
+      right,
+      transform,
+      flexBasis,
+      flexShrink,
+      flexGrow,
+      gridTemplateColumns,
+      gridTemplateRows,
+      gridTemplateAreas,
+      gridTemplate,
+      gridAutoColumns,
+      gridAutoRows,
+      gridAutoFlow,
+      grid,
+      gridRowStart,
+      gridColumnStart,
+      gridRowEnd,
+      gridColumnEnd,
+      gridRow,
+      gridColumn,
+      gridArea,
+      opacity
+      // End style props
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : boxDefaultElement;
+  const inlineStyle = useMemo(() => _objectSpread({
+    backgroundColor: dangerouslySetBackground
+  }, style), [dangerouslySetBackground, style]);
+  const styles = useMemo(() => getStyles({
+    display,
+    position,
+    overflow,
+    zIndex,
+    gap,
+    columnGap,
+    rowGap,
+    justifyContent,
+    alignContent,
+    alignItems,
+    alignSelf,
+    flexDirection,
+    flexWrap,
+    color,
+    background,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopWidth,
+    borderEndWidth,
+    borderBottomWidth,
+    borderStartWidth,
+    elevation,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    textAlign,
+    textDecoration,
+    textTransform,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginBottom,
+    marginStart,
+    marginEnd,
+    userSelect,
+    visibility,
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    aspectRatio,
+    top,
+    bottom,
+    left,
+    right,
+    transform,
+    flexBasis,
+    flexShrink,
+    flexGrow,
+    gridTemplateColumns,
+    gridTemplateRows,
+    gridTemplateAreas,
+    gridTemplate,
+    gridAutoColumns,
+    gridAutoRows,
+    gridAutoFlow,
+    grid,
+    gridRowStart,
+    gridColumnStart,
+    gridRowEnd,
+    gridColumnEnd,
+    gridRow,
+    gridColumn,
+    gridArea,
+    opacity
+  }, inlineStyle), [display, position, overflow, zIndex, gap, columnGap, rowGap, justifyContent, alignContent, alignItems, alignSelf, flexDirection, flexWrap, color, background, borderColor, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopWidth, borderEndWidth, borderBottomWidth, borderStartWidth, elevation, fontFamily, fontSize, fontWeight, lineHeight, textAlign, textDecoration, textTransform, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingStart, paddingEnd, margin, marginX, marginY, marginTop, marginBottom, marginStart, marginEnd, userSelect, visibility, width, height, minWidth, minHeight, maxWidth, maxHeight, aspectRatio, top, bottom, left, right, transform, flexBasis, flexShrink, flexGrow, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridTemplate, gridAutoColumns, gridAutoRows, gridAutoFlow, grid, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd, gridRow, gridColumn, gridArea, opacity, inlineStyle]);
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
+    ref: ref,
+    "aria-describedby": accessibilityHint,
+    "aria-label": accessibilityLabel,
+    "aria-labelledby": accessibilityLabelledBy,
+    className: cx(styles.className, pin && pinStyle[pin], bordered && borderStyle.bordered, borderedTop && borderStyle.borderedTop, borderedBottom && borderStyle.borderedBottom, borderedStart && borderStyle.borderedStart, borderedEnd && borderStyle.borderedEnd, borderedHorizontal && borderStyle.borderedHorizontal, borderedVertical && borderStyle.borderedVertical, className),
+    "data-testid": testID,
+    style: styles.style
+  }, props), {}, {
+    children: children
+  }));
+}));
+Box.displayName = 'Box';
+
+/**
+ * @example
+ * Use `PolymorphicBoxProps` to create polymorphic components from Box (components with the `as` prop and style props):
+ * ```tsx
+ * type MyComponentBaseProps = { message?: string }
+ * type MyComponentProps<AsComponent extends React.ElementType> =
+ *   PolymorphicBoxProps<AsComponent, MyComponentBaseProps>
+ * const MyComponent = <
+ *   AsComponent extends React.ElementType = 'button',
+ * >({
+ *   as = 'button' as AsComponent,
+ *   message,
+ *   ...props
+ * }: MyComponentProps<AsComponent>) => {
+ *   return <Box as={as} {...props}>{message}</Box>
+ * }
+ * ```
+ */

package/esm/layout/Divider.css

@@ -0,0 +1,2 @@
+@layer cds{.horizontal-hb40n7o{height:1px;}
+.vertical-v1cvhdy5{width:1px;}}

package/esm/layout/Divider.js

@@ -0,0 +1,39 @@
+const _excluded = ["color", "direction", "background"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { memo } from 'react';
+import { Box } from './Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const directionCss = {
+  horizontal: "horizontal-hb40n7o",
+  vertical: "vertical-v1cvhdy5"
+};
+export const Divider = /*#__PURE__*/memo(_ref => {
+  let {
+      color,
+      direction = 'horizontal',
+      background = 'bgLine'
+    } = _ref,
+    boxProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    alignItems: "stretch",
+    alignSelf: "stretch"
+  }, boxProps), {}, {
+    children: /*#__PURE__*/_jsx(Box, {
+      "aria-orientation": direction,
+      as: "hr",
+      background: color !== null && color !== void 0 ? color : background,
+      className: directionCss[direction],
+      flexGrow: 1,
+      marginY: 0,
+      role: "separator"
+    })
+  }));
+});
+Divider.displayName = 'Divider';
+import "./Divider.css";

package/esm/layout/Fallback.css

@@ -0,0 +1 @@
+@layer cds{.fallbackCss-f1n296p1{display:inline-block;position:relative;overflow:hidden;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shimmer-fallbackCss-f1n296p1;animation-name:shimmer-fallbackCss-f1n296p1;-webkit-animation-timing-function:linear;animation-timing-function:linear;background-color:rgba(var(--gray60),0.05);background-repeat:no-repeat;background-image:linear-gradient( to right, rgb(var(--gray60),0.05) 0%, rgb(var(--gray60),0) 25%, rgb(var(--gray60),0.1) 50%, rgb(var(--gray60),0) 75%, rgb(var(--gray60),0.05) 100% );}@-webkit-keyframes shimmer-fallbackCss-f1n296p1{0%{background-position:-600px 0;}100%{background-position:600px 0;}}@keyframes shimmer-fallbackCss-f1n296p1{0%{background-position:-600px 0;}100%{background-position:600px 0;}}}

package/esm/layout/Fallback.js

@@ -0,0 +1,83 @@
+const _excluded = ["as", "height", "shape", "width", "percentage", "disableRandomRectWidth", "rectWidthVariant"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { Box } from './Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const WIDTH_MODIFIERS = [0.5, 0, 0.6, 0.8, 0.1, 0.9, 0.4, 0.2, 0.7, 0.3];
+export function useFallbackShape(shape, baseWidth, options) {
+  const width = useMemo(() => {
+    // When rectangle, lets vary the width a bit so things are
+    // a little less... uniform. Variety is nice.
+    if (shape === 'rectangle' && typeof baseWidth === 'number' && (!(options !== null && options !== void 0 && options.disableRandomRectWidth) || (options === null || options === void 0 ? void 0 : options.rectWidthVariant) !== undefined)) {
+      const modifier = (options === null || options === void 0 ? void 0 : options.rectWidthVariant) !== undefined ? WIDTH_MODIFIERS[options.rectWidthVariant % WIDTH_MODIFIERS.length] : Math.random();
+      const quarter = Math.round(baseWidth / 4);
+      const min = Math.max(baseWidth - quarter, 1);
+      const max = baseWidth + quarter;
+      return Math.floor(modifier * (max - min + 1)) + min;
+    }
+
+    // All other shapes need a fixed aspect ratio
+    return baseWidth;
+  }, [baseWidth, options, shape]);
+  const borderRadius = useMemo(() => {
+    if (shape === 'circle' && Number.isInteger(width)) {
+      return Number(width) / 2;
+    }
+    return shape === 'squircle' ? 8 : 0;
+  }, [shape, width]);
+  return useMemo(() => ({
+    borderRadius,
+    width
+  }), [borderRadius, width]);
+}
+const fallbackCss = "fallbackCss-f1n296p1";
+export const fallbackDefaultElement = 'div';
+export const Fallback = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      height,
+      shape = 'rectangle',
+      width: baseWidth,
+      percentage,
+      disableRandomRectWidth,
+      rectWidthVariant
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : fallbackDefaultElement;
+  const fallbackShapeOptions = useMemo(() => ({
+    disableRandomRectWidth,
+    rectWidthVariant
+  }), [disableRandomRectWidth, rectWidthVariant]);
+  const {
+    width,
+    borderRadius
+  } = useFallbackShape(shape, baseWidth, fallbackShapeOptions);
+  const backgroundSizeHeight = typeof height === 'number' ? "".concat(height, "px") : height;
+  const style = useMemo(() => ({
+    width: percentage ? "100%" : width,
+    backgroundSize: "600px ".concat(backgroundSizeHeight),
+    height,
+    borderRadius
+  }), [percentage, width, backgroundSizeHeight, height, borderRadius]);
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    ref: ref,
+    as: Component,
+    flexGrow: 0,
+    flexShrink: 0,
+    width: percentage && typeof width === 'number' ? "".concat(Math.min(width, 100), "%") : width
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Box, {
+      className: fallbackCss,
+      style: style,
+      children: "\xA0"
+    })
+  }));
+}));
+Fallback.displayName = 'Fallback';
+import "./Fallback.css";

package/esm/layout/Grid.js

@@ -0,0 +1,40 @@
+const _excluded = ["as", "rows", "columns", "columnMin", "columnMax", "display", "templateColumns"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, useMemo } from 'react';
+import { Box } from './Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const gridDefaultElement = 'div';
+export const Grid = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      rows,
+      columns,
+      columnMin,
+      columnMax = '1fr',
+      display = 'grid',
+      templateColumns
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : gridDefaultElement;
+  const isImplicit = !columns && !templateColumns && !!columnMin;
+  const templateColumnsValue = useMemo(() => {
+    if (isImplicit) {
+      return "repeat(auto-fill, minmax(".concat(columnMin, ", ").concat(columnMax, "))");
+    }
+    return templateColumns !== null && templateColumns !== void 0 ? templateColumns : typeof columns !== 'undefined' ? "repeat(".concat(columns, ", minmax(0, 1fr))") : undefined;
+  }, [columnMax, columnMin, columns, isImplicit, templateColumns]);
+  return /*#__PURE__*/_jsx(Box, _objectSpread({
+    ref: ref,
+    as: Component,
+    display: display,
+    gridTemplateColumns: templateColumnsValue,
+    gridTemplateRows: typeof rows !== 'undefined' ? "repeat(".concat(rows, ",  minmax(0, 1fr))") : undefined
+  }, props));
+});
+Grid.displayName = 'Grid';

package/esm/layout/GridColumn.js

@@ -0,0 +1,32 @@
+const _excluded = ["as", "gridColumn", "colSpan", "colStart", "colEnd"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { Box } from './Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const gridColumnDefaultElement = 'div';
+export const GridColumn = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      as,
+      gridColumn,
+      colSpan,
+      colStart = 'auto',
+      colEnd = 'auto'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : gridColumnDefaultElement;
+  const gridColumnValue = useMemo(() => gridColumn !== null && gridColumn !== void 0 ? gridColumn : colSpan ? "".concat(colStart, " / span ").concat(colSpan) : undefined, [colSpan, colStart, gridColumn]);
+  return /*#__PURE__*/_jsx(Box, _objectSpread({
+    ref: forwardedRef,
+    as: Component,
+    gridColumn: gridColumnValue,
+    gridColumnEnd: colEnd,
+    gridColumnStart: colStart
+  }, props));
+}));
+GridColumn.displayName = 'GridColumn';

package/esm/layout/Group.js

@@ -0,0 +1,68 @@
+const _excluded = ["display"],
+  _excluded2 = ["children", "direction", "divider", "gap", "renderItem", "role"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { flattenAndJoinNodes } from '../utils/flattenAndJoinNodes';
+import { Box } from './Box';
+import { Spacer } from './Spacer';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ItemWrapper = /*#__PURE__*/memo(_ref => {
+  let {
+      display = 'contents'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Box, _objectSpread({
+    display: display
+  }, props));
+});
+const fallbackRenderItem = _ref2 => {
+  let {
+    item,
+    index
+  } = _ref2;
+  return /*#__PURE__*/_jsx(ItemWrapper, {
+    children: item
+  }, index);
+};
+
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead.
+ * @danger Make sure to add a `key` prop to each item.
+ */
+export const Group = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      children,
+      direction = 'vertical',
+      divider,
+      gap,
+      renderItem = fallbackRenderItem,
+      role = 'group'
+    } = _ref3,
+    boxProps = _objectWithoutProperties(_ref3, _excluded2);
+  // TODO: Remove once `horizontal` is sunset in Q2.
+  const contents = useMemo(() => flattenAndJoinNodes({
+    children,
+    gap,
+    divider,
+    renderItem,
+    direction,
+    Spacer,
+    ItemWrapper
+  }), [children, direction, divider, gap, renderItem]);
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    ref: ref,
+    alignItems: "stretch",
+    flexDirection: direction === 'horizontal' ? 'row' : 'column',
+    flexWrap: "nowrap",
+    role: role
+  }, boxProps), {}, {
+    children: contents
+  }));
+}));
+Group.displayName = 'Group';

package/esm/layout/HStack.js

@@ -0,0 +1,26 @@
+const _excluded = ["as", "flexDirection"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef } from 'react';
+import { Box } from './Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const hStackDefaultElement = 'div';
+export const HStack = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      as,
+      flexDirection = 'row'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = as !== null && as !== void 0 ? as : hStackDefaultElement;
+  return /*#__PURE__*/_jsx(Box, _objectSpread({
+    ref: ref,
+    as: Component,
+    flexDirection: flexDirection
+  }, props));
+});
+HStack.displayName = 'HStack';