@atlaskit/ds-explorations 0.0.1 → 0.1.0

package/dist/esm/components/inline.partial.js

@@ -0,0 +1,106 @@
+/** @jsx jsx */
+import { Children, forwardRef, Fragment } from 'react';
+import { css, jsx } from '@emotion/core';
+import { SPACING_SCALE } from '../constants';
+import Text from './text.partial';
+var flexAlignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  flexStart: css({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: css({
+    alignItems: 'flex-end'
+  })
+};
+var flexJustifyContentMap = {
+  center: css({
+    justifyContent: 'center'
+  }),
+  flexStart: css({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: css({
+    justifyContent: 'flex-end'
+  })
+};
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ * Renders a `div` by default.
+ *
+ */
+
+var Inline = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var gap = _ref.gap,
+      alignItems = _ref.alignItems,
+      justifyContent = _ref.justifyContent,
+      divider = _ref.divider,
+      children = _ref.children,
+      testId = _ref.testId;
+  var dividerComponent = typeof divider === 'string' ? jsx(Text, null, divider) : divider;
+  return jsx("div", {
+    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, Children.map(children, function (child, index) {
+    return jsx(Fragment, null, divider && index > 0 ? dividerComponent : null, child);
+  }));
+});
+export default Inline;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::ac3192fbc453a94ab5e720d0273556ef>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["gap"]
+ */
+
+var gapMap = {
+  'sp-0': css({
+    gap: SPACING_SCALE['sp-0']
+  }),
+  'sp-25': css({
+    gap: SPACING_SCALE['sp-25']
+  }),
+  'sp-50': css({
+    gap: SPACING_SCALE['sp-50']
+  }),
+  'sp-75': css({
+    gap: SPACING_SCALE['sp-75']
+  }),
+  'sp-100': css({
+    gap: SPACING_SCALE['sp-100']
+  }),
+  'sp-200': css({
+    gap: SPACING_SCALE['sp-200']
+  }),
+  'sp-300': css({
+    gap: SPACING_SCALE['sp-300']
+  }),
+  'sp-400': css({
+    gap: SPACING_SCALE['sp-400']
+  }),
+  'sp-500': css({
+    gap: SPACING_SCALE['sp-500']
+  }),
+  'sp-600': css({
+    gap: SPACING_SCALE['sp-600']
+  }),
+  'sp-800': css({
+    gap: SPACING_SCALE['sp-800']
+  })
+};
+/**
+ * @codegenEnd
+ */

package/dist/esm/components/stack.partial.js

@@ -0,0 +1,101 @@
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { SPACING_SCALE } from '../constants';
+var flexAlignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  flexStart: css({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: css({
+    alignItems: 'flex-end'
+  })
+};
+var flexJustifyContentMap = {
+  center: css({
+    justifyContent: 'center'
+  }),
+  flexStart: css({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: css({
+    justifyContent: 'flex-end'
+  })
+};
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column'
+});
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Renders a `div` by default.
+ *
+ */
+
+var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var gap = _ref.gap,
+      alignItems = _ref.alignItems,
+      justifyContent = _ref.justifyContent,
+      children = _ref.children,
+      testId = _ref.testId;
+  return jsx("div", {
+    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+});
+export default Stack;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::ac3192fbc453a94ab5e720d0273556ef>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["gap"]
+ */
+
+var gapMap = {
+  'sp-0': css({
+    gap: SPACING_SCALE['sp-0']
+  }),
+  'sp-25': css({
+    gap: SPACING_SCALE['sp-25']
+  }),
+  'sp-50': css({
+    gap: SPACING_SCALE['sp-50']
+  }),
+  'sp-75': css({
+    gap: SPACING_SCALE['sp-75']
+  }),
+  'sp-100': css({
+    gap: SPACING_SCALE['sp-100']
+  }),
+  'sp-200': css({
+    gap: SPACING_SCALE['sp-200']
+  }),
+  'sp-300': css({
+    gap: SPACING_SCALE['sp-300']
+  }),
+  'sp-400': css({
+    gap: SPACING_SCALE['sp-400']
+  }),
+  'sp-500': css({
+    gap: SPACING_SCALE['sp-500']
+  }),
+  'sp-600': css({
+    gap: SPACING_SCALE['sp-600']
+  }),
+  'sp-800': css({
+    gap: SPACING_SCALE['sp-800']
+  })
+};
+/**
+ * @codegenEnd
+ */

package/dist/esm/components/text.partial.js

@@ -0,0 +1,158 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+var fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
+var fontSizeMap = {
+  '11': css({
+    fontSize: '11px'
+  }),
+  '12': css({
+    fontSize: '12px'
+  }),
+  '14': css({
+    fontSize: '14px'
+  })
+};
+// NOTE: can't use numbers as keys or Constellation won't build. Weird one.
+var fontWeightMap = {
+  '400': css({
+    fontWeight: 400
+  }),
+  '500': css({
+    fontWeight: 500
+  })
+};
+var lineHeightMap = {
+  '12px': css({
+    lineHeight: '12px'
+  }),
+  '16px': css({
+    lineHeight: '16px'
+  }),
+  '20px': css({
+    lineHeight: '20px'
+  }),
+  '24px': css({
+    lineHeight: '24px'
+  }),
+  '28px': css({
+    lineHeight: '28px'
+  }),
+  '32px': css({
+    lineHeight: '32px'
+  }),
+  '40px': css({
+    lineHeight: '40px'
+  })
+};
+var textAlignMap = {
+  center: css({
+    textAlign: 'center'
+  }),
+  end: css({
+    textAlign: 'end'
+  }),
+  start: css({
+    textAlign: 'start'
+  })
+};
+var baseStyles = css({
+  fontFamily: fontFamily
+});
+/**
+ * __Text__
+ *
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
+ *
+ * @internal
+ */
+
+var Text = function Text(_ref) {
+  var _ref$as = _ref.as,
+      Component = _ref$as === void 0 ? 'span' : _ref$as,
+      children = _ref.children,
+      colorTuple = _ref.color,
+      fontSize = _ref.fontSize,
+      fontWeight = _ref.fontWeight,
+      lineHeight = _ref.lineHeight,
+      textAlign = _ref.textAlign,
+      href = _ref.href,
+      testId = _ref.testId,
+      UNSAFE_style = _ref.UNSAFE_style;
+
+  var _ref2 = colorTuple || [],
+      _ref3 = _slicedToArray(_ref2, 2),
+      color = _ref3[0],
+      fallback = _ref3[1];
+
+  return jsx(Component, {
+    style: _objectSpread(_objectSpread({}, UNSAFE_style), fallback && {
+      '--ds-co-fb': fallback
+    }),
+    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], textAlign && textAlignMap[textAlign]],
+    href: href,
+    "data-testid": testId
+  }, children);
+};
+
+export default Text;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::85a0a0bc073c7af8fd63101d6c88d59e>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["text"]
+ */
+
+var textColorMap = {
+  'color.text': css({
+    color: "var(--ds-text, var(--ds-co-fb))"
+  }),
+  subtle: css({
+    color: "var(--ds-text-subtle, var(--ds-co-fb))"
+  }),
+  subtlest: css({
+    color: "var(--ds-text-subtlest, var(--ds-co-fb))"
+  }),
+  disabled: css({
+    color: "var(--ds-text-disabled, var(--ds-co-fb))"
+  }),
+  inverse: css({
+    color: "var(--ds-text-inverse, var(--ds-co-fb))"
+  }),
+  brand: css({
+    color: "var(--ds-text-brand, var(--ds-co-fb))"
+  }),
+  selected: css({
+    color: "var(--ds-text-selected, var(--ds-co-fb))"
+  }),
+  danger: css({
+    color: "var(--ds-text-danger, var(--ds-co-fb))"
+  }),
+  warning: css({
+    color: "var(--ds-text-warning, var(--ds-co-fb))"
+  }),
+  'warning.inverse': css({
+    color: "var(--ds-text-warning-inverse, var(--ds-co-fb))"
+  }),
+  success: css({
+    color: "var(--ds-text-success, var(--ds-co-fb))"
+  }),
+  discovery: css({
+    color: "var(--ds-text-discovery, var(--ds-co-fb))"
+  }),
+  information: css({
+    color: "var(--ds-text-information, var(--ds-co-fb))"
+  })
+};
+/**
+ * @codegenEnd
+ */

package/dist/esm/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/constants.js

@@ -0,0 +1,13 @@
+export var SPACING_SCALE = {
+  'sp-0': 0,
+  'sp-25': 2,
+  'sp-50': 4,
+  'sp-75': 6,
+  'sp-100': 8,
+  'sp-200': 16,
+  'sp-300': 24,
+  'sp-400': 32,
+  'sp-500': 40,
+  'sp-600': 48,
+  'sp-800': 64
+};

package/dist/esm/index.js

@@ -1 +1,4 @@
-export default {};
+export { default as UNSAFE_Box } from './components/box.partial';
+export { default as UNSAFE_Text } from './components/text.partial';
+export { default as UNSAFE_Inline } from './components/inline.partial';
+export { default as UNSAFE_Stack } from './components/stack.partial';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "0.0.1",
+	"version": "0.1.0",
 	"sideEffects": false
 }

package/dist/types/components/box.partial.d.ts

@@ -0,0 +1,186 @@
+/** @jsx jsx */
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { GlobalSpacingToken } from '../constants';
+import { BasePrimitiveProps } from './types';
+export interface BoxProps extends Omit<HTMLAttributes<HTMLElement>, 'style'>, BasePrimitiveProps {
+    /**
+     * The DOM element to render as the Box. Defaults to `div`.
+     */
+    as?: ElementType;
+    /**
+     * Elements to be rendered inside the Box.
+     */
+    children: ReactNode;
+    /**
+     * Token representing background color with a fallback.
+     */
+    backgroundColor?: [BackgroundColor, string];
+    /**
+     * Defines border style.
+     */
+    borderStyle?: BorderStyle;
+    /**
+     * Defines border width.
+     */
+    borderWidth?: BorderWidth;
+    /**
+     * Token representing border color with a fallback.
+     */
+    borderColor?: [BorderColor, string];
+    /**
+     * Defines border radius.
+     */
+    borderRadius?: BorderRadius;
+    /**
+     * Defines the main axis direction.
+     */
+    flexDirection?: FlexDirection;
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: FlexAlignItems;
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: FlexJustifyContent;
+    /**
+     * Shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     */
+    padding?: GlobalSpacingToken;
+    /**
+     * Token representing CSS `padding-block`.
+     */
+    paddingBlock?: GlobalSpacingToken;
+    /**
+     * Token representing CSS `padding-inline`.
+     */
+    paddingInline?: GlobalSpacingToken;
+    /**
+     * Token representing width.
+     */
+    width?: GlobalSpacingToken;
+    /**
+     * Token representing height.
+     */
+    height?: GlobalSpacingToken;
+    /**
+     * Defines display type and layout. Defaults to `flex`.
+     */
+    display?: Display;
+}
+declare type BorderStyle = keyof typeof borderStyleMap;
+declare const borderStyleMap: {
+    none: import("@emotion/utils").SerializedStyles;
+    solid: import("@emotion/utils").SerializedStyles;
+    dashed: import("@emotion/utils").SerializedStyles;
+    dotted: import("@emotion/utils").SerializedStyles;
+};
+declare type BorderWidth = keyof typeof borderWidthMap;
+declare const borderWidthMap: {
+    '0px': import("@emotion/utils").SerializedStyles;
+    '1px': import("@emotion/utils").SerializedStyles;
+    '2px': import("@emotion/utils").SerializedStyles;
+    '3px': import("@emotion/utils").SerializedStyles;
+};
+declare type BorderRadius = keyof typeof borderRadiusMap;
+declare const borderRadiusMap: {
+    normal: import("@emotion/utils").SerializedStyles;
+    rounded: import("@emotion/utils").SerializedStyles;
+    badge: import("@emotion/utils").SerializedStyles;
+};
+declare type FlexDirection = keyof typeof flexDirectionMap;
+declare const flexDirectionMap: {
+    column: import("@emotion/utils").SerializedStyles;
+    row: import("@emotion/utils").SerializedStyles;
+};
+declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
+declare const flexAlignItemsMap: {
+    center: import("@emotion/utils").SerializedStyles;
+    baseline: import("@emotion/utils").SerializedStyles;
+    flexStart: import("@emotion/utils").SerializedStyles;
+    flexEnd: import("@emotion/utils").SerializedStyles;
+};
+declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+declare const flexJustifyContentMap: {
+    center: import("@emotion/utils").SerializedStyles;
+    flexStart: import("@emotion/utils").SerializedStyles;
+    flexEnd: import("@emotion/utils").SerializedStyles;
+};
+declare type Display = keyof typeof displayMap;
+declare const displayMap: {
+    block: import("@emotion/utils").SerializedStyles;
+    inline: import("@emotion/utils").SerializedStyles;
+    flex: import("@emotion/utils").SerializedStyles;
+    inlineFlex: import("@emotion/utils").SerializedStyles;
+};
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLElement>>;
+export default Box;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e3f27406477352f51168b4108558f051>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["border", "background"]
+ */
+declare const borderColorMap: {
+    'color.border': import("@emotion/utils").SerializedStyles;
+    bold: import("@emotion/utils").SerializedStyles;
+    inverse: import("@emotion/utils").SerializedStyles;
+    focused: import("@emotion/utils").SerializedStyles;
+    input: import("@emotion/utils").SerializedStyles;
+    disabled: import("@emotion/utils").SerializedStyles;
+    brand: import("@emotion/utils").SerializedStyles;
+    selected: import("@emotion/utils").SerializedStyles;
+    danger: import("@emotion/utils").SerializedStyles;
+    warning: import("@emotion/utils").SerializedStyles;
+    success: import("@emotion/utils").SerializedStyles;
+    discovery: import("@emotion/utils").SerializedStyles;
+    information: import("@emotion/utils").SerializedStyles;
+};
+declare type BorderColor = keyof typeof borderColorMap;
+declare const backgroundColorMap: {
+    disabled: import("@emotion/utils").SerializedStyles;
+    'inverse.subtle': import("@emotion/utils").SerializedStyles;
+    input: import("@emotion/utils").SerializedStyles;
+    neutral: import("@emotion/utils").SerializedStyles;
+    'neutral.subtle': import("@emotion/utils").SerializedStyles;
+    'neutral.bold': import("@emotion/utils").SerializedStyles;
+    'brand.bold': import("@emotion/utils").SerializedStyles;
+    selected: import("@emotion/utils").SerializedStyles;
+    'selected.bold': import("@emotion/utils").SerializedStyles;
+    danger: import("@emotion/utils").SerializedStyles;
+    'danger.bold': import("@emotion/utils").SerializedStyles;
+    warning: import("@emotion/utils").SerializedStyles;
+    'warning.bold': import("@emotion/utils").SerializedStyles;
+    success: import("@emotion/utils").SerializedStyles;
+    'success.bold': import("@emotion/utils").SerializedStyles;
+    discovery: import("@emotion/utils").SerializedStyles;
+    'discovery.bold': import("@emotion/utils").SerializedStyles;
+    information: import("@emotion/utils").SerializedStyles;
+    'information.bold': import("@emotion/utils").SerializedStyles;
+    'color.blanket': import("@emotion/utils").SerializedStyles;
+    'color.blanket.selected': import("@emotion/utils").SerializedStyles;
+    'color.blanket.danger': import("@emotion/utils").SerializedStyles;
+    'elevation.surface': import("@emotion/utils").SerializedStyles;
+    'elevation.surface.sunken': import("@emotion/utils").SerializedStyles;
+    'elevation.surface.raised': import("@emotion/utils").SerializedStyles;
+    'elevation.surface.overlay': import("@emotion/utils").SerializedStyles;
+};
+declare type BackgroundColor = keyof typeof backgroundColorMap;
+/**
+ * @codegenEnd
+ */

package/dist/types/components/inline.partial.d.ts

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { GlobalSpacingToken } from '../constants';
+import { BasePrimitiveProps } from './types';
+interface InlineProps extends BasePrimitiveProps {
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: FlexAlignItems;
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: FlexJustifyContent;
+    /**
+     * Token representing gap between children.
+     */
+    gap: GlobalSpacingToken;
+    /**
+     * Renders a divider between children.
+     * If a string is provided it will automatically be wrapped in a `<Text>` component.
+     */
+    divider?: ReactNode;
+    /**
+     * Elements to be rendered inside the Inline.
+     */
+    children: ReactNode;
+}
+declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
+declare const flexAlignItemsMap: {
+    center: import("@emotion/utils").SerializedStyles;
+    baseline: import("@emotion/utils").SerializedStyles;
+    flexStart: import("@emotion/utils").SerializedStyles;
+    flexEnd: import("@emotion/utils").SerializedStyles;
+};
+declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+declare const flexJustifyContentMap: {
+    center: import("@emotion/utils").SerializedStyles;
+    flexStart: import("@emotion/utils").SerializedStyles;
+    flexEnd: import("@emotion/utils").SerializedStyles;
+};
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ * Renders a `div` by default.
+ *
+ */
+declare const Inline: import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Inline;
+/**
+ * @codegenEnd
+ */

package/dist/types/components/stack.partial.d.ts

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { GlobalSpacingToken } from '../constants';
+import { BasePrimitiveProps } from './types';
+interface StackProps extends BasePrimitiveProps {
+    /**
+     * Used to align children along the cross axis.
+     */
+    alignItems?: FlexAlignItems;
+    /**
+     * Used to align children along the main axis.
+     */
+    justifyContent?: FlexJustifyContent;
+    /**
+     * Token representing gap between children.
+     */
+    gap: GlobalSpacingToken;
+    /**
+     * Elements to be rendered inside the Stack.
+     */
+    children: ReactNode;
+}
+declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
+declare const flexAlignItemsMap: {
+    center: import("@emotion/utils").SerializedStyles;
+    baseline: import("@emotion/utils").SerializedStyles;
+    flexStart: import("@emotion/utils").SerializedStyles;
+    flexEnd: import("@emotion/utils").SerializedStyles;
+};
+declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+declare const flexJustifyContentMap: {
+    center: import("@emotion/utils").SerializedStyles;
+    flexStart: import("@emotion/utils").SerializedStyles;
+    flexEnd: import("@emotion/utils").SerializedStyles;
+};
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Renders a `div` by default.
+ *
+ */
+declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Stack;
+/**
+ * @codegenEnd
+ */