@atlaskit/ds-explorations 1.2.1 → 1.3.0

package/dist/es2019/components/box.partial.js

@@ -93,6 +93,10 @@ const borderRadiusMap = {
     borderRadius: '8px'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 const flexDirectionMap = {
   column: css({
     flexDirection: 'column'
@@ -101,6 +105,10 @@ const flexDirectionMap = {
     flexDirection: 'row'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 const flexAlignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -115,6 +123,10 @@ const flexAlignItemsMap = {
     alignItems: 'flex-end'
   })
 };
+/**
+ * @experimental - this is likely to be removed
+ */
+
 const flexJustifyContentMap = {
   center: css({
     justifyContent: 'center'
@@ -163,201 +175,207 @@ const baseStyles = css({
 });
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
- * @codegenId spacing
+ * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
+ * @codegenId dimensions
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
+ * @codegenParams ["width", "height"]
  */
 
-const paddingMap = {
-  'scale.0': css({
-    padding: "var(--ds-scale-0, 0px)"
-  }),
-  'scale.025': css({
-    padding: "var(--ds-scale-025, 2px)"
-  }),
-  'scale.050': css({
-    padding: "var(--ds-scale-050, 4px)"
-  }),
-  'scale.075': css({
-    padding: "var(--ds-scale-075, 6px)"
+const widthMap = {
+  '100%': css({
+    width: '100%'
   }),
-  'scale.100': css({
-    padding: "var(--ds-scale-100, 8px)"
+  'size.100': css({
+    width: '16px'
   }),
-  'scale.150': css({
-    padding: "var(--ds-scale-150, 12px)"
+  'size.1000': css({
+    width: '192px'
   }),
-  'scale.200': css({
-    padding: "var(--ds-scale-200, 16px)"
+  'size.200': css({
+    width: '24px'
   }),
-  'scale.250': css({
-    padding: "var(--ds-scale-250, 20px)"
+  'size.300': css({
+    width: '32px'
   }),
-  'scale.300': css({
-    padding: "var(--ds-scale-300, 24px)"
+  'size.400': css({
+    width: '40px'
   }),
-  'scale.400': css({
-    padding: "var(--ds-scale-400, 32px)"
+  'size.500': css({
+    width: '48px'
   }),
-  'scale.500': css({
-    padding: "var(--ds-scale-500, 40px)"
-  }),
-  'scale.600': css({
-    padding: "var(--ds-scale-600, 48px)"
+  'size.600': css({
+    width: '96px'
   })
 };
-const paddingBlockMap = {
-  'scale.0': css({
-    paddingBlock: "var(--ds-scale-0, 0px)"
-  }),
-  'scale.025': css({
-    paddingBlock: "var(--ds-scale-025, 2px)"
-  }),
-  'scale.050': css({
-    paddingBlock: "var(--ds-scale-050, 4px)"
+const heightMap = {
+  '100%': css({
+    height: '100%'
   }),
-  'scale.075': css({
-    paddingBlock: "var(--ds-scale-075, 6px)"
+  'size.100': css({
+    height: '16px'
   }),
-  'scale.100': css({
-    paddingBlock: "var(--ds-scale-100, 8px)"
+  'size.1000': css({
+    height: '192px'
   }),
-  'scale.150': css({
-    paddingBlock: "var(--ds-scale-150, 12px)"
+  'size.200': css({
+    height: '24px'
   }),
-  'scale.200': css({
-    paddingBlock: "var(--ds-scale-200, 16px)"
-  }),
-  'scale.250': css({
-    paddingBlock: "var(--ds-scale-250, 20px)"
-  }),
-  'scale.300': css({
-    paddingBlock: "var(--ds-scale-300, 24px)"
+  'size.300': css({
+    height: '32px'
   }),
-  'scale.400': css({
-    paddingBlock: "var(--ds-scale-400, 32px)"
+  'size.400': css({
+    height: '40px'
   }),
-  'scale.500': css({
-    paddingBlock: "var(--ds-scale-500, 40px)"
+  'size.500': css({
+    height: '48px'
   }),
-  'scale.600': css({
-    paddingBlock: "var(--ds-scale-600, 48px)"
+  'size.600': css({
+    height: '96px'
   })
 };
-const paddingInlineMap = {
+
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::41980a62e387c13a99802814a0f33d26>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["padding", "paddingBlock", "paddingInline"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
+ */
+const paddingMap = {
   'scale.0': css({
-    paddingInline: "var(--ds-scale-0, 0px)"
+    padding: "var(--ds-space-0, 0px)"
   }),
   'scale.025': css({
-    paddingInline: "var(--ds-scale-025, 2px)"
+    padding: "var(--ds-space-025, 2px)"
   }),
   'scale.050': css({
-    paddingInline: "var(--ds-scale-050, 4px)"
+    padding: "var(--ds-space-050, 4px)"
   }),
   'scale.075': css({
-    paddingInline: "var(--ds-scale-075, 6px)"
+    padding: "var(--ds-space-075, 6px)"
   }),
   'scale.100': css({
-    paddingInline: "var(--ds-scale-100, 8px)"
+    padding: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': css({
+    padding: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': css({
-    paddingInline: "var(--ds-scale-150, 12px)"
+    padding: "var(--ds-space-150, 12px)"
   }),
   'scale.200': css({
-    paddingInline: "var(--ds-scale-200, 16px)"
+    padding: "var(--ds-space-200, 16px)"
   }),
   'scale.250': css({
-    paddingInline: "var(--ds-scale-250, 20px)"
+    padding: "var(--ds-space-250, 20px)"
   }),
   'scale.300': css({
-    paddingInline: "var(--ds-scale-300, 24px)"
+    padding: "var(--ds-space-300, 24px)"
   }),
   'scale.400': css({
-    paddingInline: "var(--ds-scale-400, 32px)"
+    padding: "var(--ds-space-400, 32px)"
   }),
   'scale.500': css({
-    paddingInline: "var(--ds-scale-500, 40px)"
+    padding: "var(--ds-space-500, 40px)"
   }),
   'scale.600': css({
-    paddingInline: "var(--ds-scale-600, 48px)"
+    padding: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': css({
+    padding: "var(--ds-space-800, 64px)"
   })
 };
-const widthMap = {
+const paddingBlockMap = {
   'scale.0': css({
-    width: "var(--ds-scale-0, 0px)"
+    paddingBlock: "var(--ds-space-0, 0px)"
   }),
   'scale.025': css({
-    width: "var(--ds-scale-025, 2px)"
+    paddingBlock: "var(--ds-space-025, 2px)"
   }),
   'scale.050': css({
-    width: "var(--ds-scale-050, 4px)"
+    paddingBlock: "var(--ds-space-050, 4px)"
   }),
   'scale.075': css({
-    width: "var(--ds-scale-075, 6px)"
+    paddingBlock: "var(--ds-space-075, 6px)"
   }),
   'scale.100': css({
-    width: "var(--ds-scale-100, 8px)"
+    paddingBlock: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': css({
+    paddingBlock: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': css({
-    width: "var(--ds-scale-150, 12px)"
+    paddingBlock: "var(--ds-space-150, 12px)"
   }),
   'scale.200': css({
-    width: "var(--ds-scale-200, 16px)"
+    paddingBlock: "var(--ds-space-200, 16px)"
   }),
   'scale.250': css({
-    width: "var(--ds-scale-250, 20px)"
+    paddingBlock: "var(--ds-space-250, 20px)"
   }),
   'scale.300': css({
-    width: "var(--ds-scale-300, 24px)"
+    paddingBlock: "var(--ds-space-300, 24px)"
   }),
   'scale.400': css({
-    width: "var(--ds-scale-400, 32px)"
+    paddingBlock: "var(--ds-space-400, 32px)"
   }),
   'scale.500': css({
-    width: "var(--ds-scale-500, 40px)"
+    paddingBlock: "var(--ds-space-500, 40px)"
   }),
   'scale.600': css({
-    width: "var(--ds-scale-600, 48px)"
+    paddingBlock: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': css({
+    paddingBlock: "var(--ds-space-800, 64px)"
   })
 };
-const heightMap = {
+const paddingInlineMap = {
   'scale.0': css({
-    height: "var(--ds-scale-0, 0px)"
+    paddingInline: "var(--ds-space-0, 0px)"
   }),
   'scale.025': css({
-    height: "var(--ds-scale-025, 2px)"
+    paddingInline: "var(--ds-space-025, 2px)"
   }),
   'scale.050': css({
-    height: "var(--ds-scale-050, 4px)"
+    paddingInline: "var(--ds-space-050, 4px)"
   }),
   'scale.075': css({
-    height: "var(--ds-scale-075, 6px)"
+    paddingInline: "var(--ds-space-075, 6px)"
   }),
   'scale.100': css({
-    height: "var(--ds-scale-100, 8px)"
+    paddingInline: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': css({
+    paddingInline: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': css({
-    height: "var(--ds-scale-150, 12px)"
+    paddingInline: "var(--ds-space-150, 12px)"
   }),
   'scale.200': css({
-    height: "var(--ds-scale-200, 16px)"
+    paddingInline: "var(--ds-space-200, 16px)"
   }),
   'scale.250': css({
-    height: "var(--ds-scale-250, 20px)"
+    paddingInline: "var(--ds-space-250, 20px)"
   }),
   'scale.300': css({
-    height: "var(--ds-scale-300, 24px)"
+    paddingInline: "var(--ds-space-300, 24px)"
   }),
   'scale.400': css({
-    height: "var(--ds-scale-400, 32px)"
+    paddingInline: "var(--ds-space-400, 32px)"
   }),
   'scale.500': css({
-    height: "var(--ds-scale-500, 40px)"
+    paddingInline: "var(--ds-space-500, 40px)"
   }),
   'scale.600': css({
-    height: "var(--ds-scale-600, 48px)"
+    paddingInline: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': css({
+    paddingInline: "var(--ds-space-800, 64px)"
   })
 };
 

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

@@ -51,7 +51,8 @@ const baseStyles = css({
 const dividerStyles = css({
   margin: '0 -2px',
   color: "var(--ds-text-subtle, #42526E)",
-  pointerEvents: 'none'
+  pointerEvents: 'none',
+  userSelect: 'none'
 });
 
 const Divider = ({
@@ -84,27 +85,27 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   flexWrap,
   divider,
   UNSAFE_style,
-  children,
+  children: rawChildren,
   testId
 }, ref) => {
   const dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
-  const childrenArray = Children.toArray(children).filter(Boolean);
+  const children = divider ? Children.toArray(rawChildren).filter(Boolean).map((child, index) => {
+    return jsx(Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
+  }) : rawChildren;
   return jsx("div", {
     style: UNSAFE_style,
     css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
-  }, childrenArray.map((child, index) => {
-    return jsx(Fragment, {
-      key: index
-    }, divider && index > 0 ? dividerComponent : null, child);
-  }));
+  }, children);
 }));
 Inline.displayName = 'Inline';
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2dd7c6b8450b1bbd1fb8fabf12fffa33>>
+ * @codegen <<SignedSource::76168a57c8f10c9f325865d2189aa0ff>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
@@ -113,40 +114,46 @@ export default Inline;
 
 const columnGapMap = {
   'scale.0': css({
-    columnGap: "var(--ds-scale-0, 0px)"
+    columnGap: "var(--ds-space-0, 0px)"
   }),
   'scale.025': css({
-    columnGap: "var(--ds-scale-025, 2px)"
+    columnGap: "var(--ds-space-025, 2px)"
   }),
   'scale.050': css({
-    columnGap: "var(--ds-scale-050, 4px)"
+    columnGap: "var(--ds-space-050, 4px)"
   }),
   'scale.075': css({
-    columnGap: "var(--ds-scale-075, 6px)"
+    columnGap: "var(--ds-space-075, 6px)"
   }),
   'scale.100': css({
-    columnGap: "var(--ds-scale-100, 8px)"
+    columnGap: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': css({
+    columnGap: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': css({
-    columnGap: "var(--ds-scale-150, 12px)"
+    columnGap: "var(--ds-space-150, 12px)"
   }),
   'scale.200': css({
-    columnGap: "var(--ds-scale-200, 16px)"
+    columnGap: "var(--ds-space-200, 16px)"
   }),
   'scale.250': css({
-    columnGap: "var(--ds-scale-250, 20px)"
+    columnGap: "var(--ds-space-250, 20px)"
   }),
   'scale.300': css({
-    columnGap: "var(--ds-scale-300, 24px)"
+    columnGap: "var(--ds-space-300, 24px)"
   }),
   'scale.400': css({
-    columnGap: "var(--ds-scale-400, 32px)"
+    columnGap: "var(--ds-space-400, 32px)"
   }),
   'scale.500': css({
-    columnGap: "var(--ds-scale-500, 40px)"
+    columnGap: "var(--ds-space-500, 40px)"
   }),
   'scale.600': css({
-    columnGap: "var(--ds-scale-600, 48px)"
+    columnGap: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': css({
+    columnGap: "var(--ds-space-800, 64px)"
   })
 };
 /**

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

@@ -76,7 +76,7 @@ Stack.displayName = 'Stack';
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5d82d50cdeb38664c4c45d02608e447d>>
+ * @codegen <<SignedSource::2b10240c217de584b627a7e2f56d11a0>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
@@ -85,40 +85,46 @@ export default Stack;
 
 const rowGapMap = {
   'scale.0': css({
-    rowGap: "var(--ds-scale-0, 0px)"
+    rowGap: "var(--ds-space-0, 0px)"
   }),
   'scale.025': css({
-    rowGap: "var(--ds-scale-025, 2px)"
+    rowGap: "var(--ds-space-025, 2px)"
   }),
   'scale.050': css({
-    rowGap: "var(--ds-scale-050, 4px)"
+    rowGap: "var(--ds-space-050, 4px)"
   }),
   'scale.075': css({
-    rowGap: "var(--ds-scale-075, 6px)"
+    rowGap: "var(--ds-space-075, 6px)"
   }),
   'scale.100': css({
-    rowGap: "var(--ds-scale-100, 8px)"
+    rowGap: "var(--ds-space-100, 8px)"
+  }),
+  'scale.1000': css({
+    rowGap: "var(--ds-space-1000, 80px)"
   }),
   'scale.150': css({
-    rowGap: "var(--ds-scale-150, 12px)"
+    rowGap: "var(--ds-space-150, 12px)"
   }),
   'scale.200': css({
-    rowGap: "var(--ds-scale-200, 16px)"
+    rowGap: "var(--ds-space-200, 16px)"
   }),
   'scale.250': css({
-    rowGap: "var(--ds-scale-250, 20px)"
+    rowGap: "var(--ds-space-250, 20px)"
   }),
   'scale.300': css({
-    rowGap: "var(--ds-scale-300, 24px)"
+    rowGap: "var(--ds-space-300, 24px)"
   }),
   'scale.400': css({
-    rowGap: "var(--ds-scale-400, 32px)"
+    rowGap: "var(--ds-space-400, 32px)"
   }),
   'scale.500': css({
-    rowGap: "var(--ds-scale-500, 40px)"
+    rowGap: "var(--ds-space-500, 40px)"
   }),
   'scale.600': css({
-    rowGap: "var(--ds-scale-600, 48px)"
+    rowGap: "var(--ds-space-600, 48px)"
+  }),
+  'scale.800': css({
+    rowGap: "var(--ds-space-800, 64px)"
   })
 };
 /**

package/dist/es2019/internal/spacing-scale.js

@@ -1,9 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
  *
- * Some artifact
+ * Internal codegen of the spacing scale values. Only used for internal examples.
  *
- * @codegen <<SignedSource::caecb926afa82b027fba396074de5c2c>>
+ * @codegen <<SignedSource::d351e41acd06f256fb46554409694f31>>
  * @codegenCommand yarn codegen-styles
  */
-export const spacingScale = ['scale.0', 'scale.025', 'scale.050', 'scale.075', 'scale.100', 'scale.150', 'scale.200', 'scale.250', 'scale.300', 'scale.400', 'scale.500', 'scale.600'];
+export const spacingScale = ['scale.0', 'scale.025', 'scale.050', 'scale.075', 'scale.100', 'scale.150', 'scale.200', 'scale.250', 'scale.300', 'scale.400', 'scale.500', 'scale.600', 'scale.800', 'scale.1000'];

package/dist/es2019/version.json

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