@workday/canvas-kit-react 11.2.13 → 11.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAyB,MAAM,kCAAkC,CAAC;AAKpG,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA0ID,eAAO,MAAM,MAAM;;CA+BjB,CAAC"}
1
+ {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAyB,MAAM,kCAAkC,CAAC;AAKpG,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA6ID,eAAO,MAAM,MAAM;;CA+BjB,CAAC"}
@@ -26,8 +26,8 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
26
26
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
27
27
  const layout_1 = require("../../layout");
28
28
  const switchContainerStencil = canvas_kit_styling_1.createStencil({
29
- base: { name: "aeab09", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
30
- }, "switch-container-e9661f");
29
+ base: { name: "3c93da", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
30
+ }, "switch-container-debbb0");
31
31
  const SwitchContainer = common_1.createComponent('div')({
32
32
  displayName: 'SwitchContainer',
33
33
  Component: ({ children, ...elemProps }, ref, Element) => {
@@ -35,14 +35,14 @@ const SwitchContainer = common_1.createComponent('div')({
35
35
  },
36
36
  });
37
37
  const switchInputStencil = canvas_kit_styling_1.createStencil({
38
- base: { name: "1c1c2b", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
38
+ base: { name: "509a50", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
39
39
  modifiers: {
40
40
  error: {
41
- error: { name: "786eb0", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n 0 0 0 0.3125rem transparent;}" },
42
- alert: { name: "a877d0", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
41
+ error: { name: "265278", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n 0 0 0 0.3125rem transparent;}" },
42
+ alert: { name: "535699", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
43
43
  }
44
44
  }
45
- }, "switch-input-001dec");
45
+ }, "switch-input-7f69d7");
46
46
  const SwitchInput = common_1.createComponent('input')({
47
47
  displayName: 'SwitchInput',
48
48
  Component: ({ error, ...elemProps }, ref, Element) => {
@@ -50,8 +50,8 @@ const SwitchInput = common_1.createComponent('input')({
50
50
  },
51
51
  });
52
52
  const switchBackgroundStencil = canvas_kit_styling_1.createStencil({
53
- base: { name: "f185ac", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
54
- }, "switch-background-17579c");
53
+ base: { name: "bc77b2", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
54
+ }, "switch-background-0e2846");
55
55
  const SwitchBackground = common_1.createComponent('div')({
56
56
  displayName: 'SwitchBackground',
57
57
  Component: ({ children, ...elemProps }, ref, Element) => {
@@ -59,13 +59,13 @@ const SwitchBackground = common_1.createComponent('div')({
59
59
  },
60
60
  });
61
61
  const switchCircleStencil = canvas_kit_styling_1.createStencil({
62
- base: { name: "7a2c97", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
62
+ base: { name: "216a89", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
63
63
  modifiers: {
64
64
  checked: {
65
- true: { name: "06e4c0", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
65
+ true: { name: "74a230", styles: "transform:translateX(var(--cnvs-sys-space-x4));:dir(rtl){transform:translateX(calc(var(--cnvs-sys-space-x4) * -1));}" }
66
66
  }
67
67
  }
68
- }, "switch-circle-2d1f0c");
68
+ }, "switch-circle-780885");
69
69
  const SwitchCircle = common_1.createComponent('div')({
70
70
  displayName: 'SwitchCircle',
71
71
  Component: ({ checked, ...elemProps }, ref, Element) => {
@@ -196,5 +196,5 @@ exports.InputGroup = common_1.createContainer('div')({
196
196
  }
197
197
  return child;
198
198
  });
199
- return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, position: "relative" }, elemProps), mappedChildren));
199
+ return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, position: "relative", alignItems: "center" }, elemProps), mappedChildren));
200
200
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAyB,MAAM,kCAAkC,CAAC;AAKpG,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA0ID,eAAO,MAAM,MAAM;;CA+BjB,CAAC"}
1
+ {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAyB,MAAM,kCAAkC,CAAC;AAKpG,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA6ID,eAAO,MAAM,MAAM;;CA+BjB,CAAC"}
@@ -1,11 +1,11 @@
1
1
  import * as React from 'react';
2
2
  import { createComponent, ErrorType, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
3
- import { createStencil, px2rem } from '@workday/canvas-kit-styling';
3
+ import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { brand, system } from '@workday/canvas-tokens-web';
5
5
  import { mergeStyles } from '../../layout';
6
6
  const switchContainerStencil = createStencil({
7
- base: { name: "aeab09", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
8
- }, "switch-container-e9661f");
7
+ base: { name: "3c93da", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
8
+ }, "switch-container-debbb0");
9
9
  const SwitchContainer = createComponent('div')({
10
10
  displayName: 'SwitchContainer',
11
11
  Component: ({ children, ...elemProps }, ref, Element) => {
@@ -13,14 +13,14 @@ const SwitchContainer = createComponent('div')({
13
13
  },
14
14
  });
15
15
  const switchInputStencil = createStencil({
16
- base: { name: "1c1c2b", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
16
+ base: { name: "509a50", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
17
17
  modifiers: {
18
18
  error: {
19
- error: { name: "786eb0", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n 0 0 0 0.3125rem transparent;}" },
20
- alert: { name: "a877d0", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
19
+ error: { name: "265278", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n 0 0 0 0.3125rem transparent;}" },
20
+ alert: { name: "535699", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
21
21
  }
22
22
  }
23
- }, "switch-input-001dec");
23
+ }, "switch-input-7f69d7");
24
24
  const SwitchInput = createComponent('input')({
25
25
  displayName: 'SwitchInput',
26
26
  Component: ({ error, ...elemProps }, ref, Element) => {
@@ -28,8 +28,8 @@ const SwitchInput = createComponent('input')({
28
28
  },
29
29
  });
30
30
  const switchBackgroundStencil = createStencil({
31
- base: { name: "f185ac", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
32
- }, "switch-background-17579c");
31
+ base: { name: "bc77b2", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
32
+ }, "switch-background-0e2846");
33
33
  const SwitchBackground = createComponent('div')({
34
34
  displayName: 'SwitchBackground',
35
35
  Component: ({ children, ...elemProps }, ref, Element) => {
@@ -37,13 +37,13 @@ const SwitchBackground = createComponent('div')({
37
37
  },
38
38
  });
39
39
  const switchCircleStencil = createStencil({
40
- base: { name: "7a2c97", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
40
+ base: { name: "216a89", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
41
41
  modifiers: {
42
42
  checked: {
43
- true: { name: "06e4c0", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
43
+ true: { name: "74a230", styles: "transform:translateX(var(--cnvs-sys-space-x4));:dir(rtl){transform:translateX(calc(var(--cnvs-sys-space-x4) * -1));}" }
44
44
  }
45
45
  }
46
- }, "switch-circle-2d1f0c");
46
+ }, "switch-circle-780885");
47
47
  const SwitchCircle = createComponent('div')({
48
48
  displayName: 'SwitchCircle',
49
49
  Component: ({ checked, ...elemProps }, ref, Element) => {
@@ -190,5 +190,5 @@ export const InputGroup = createContainer('div')({
190
190
  }
191
191
  return child;
192
192
  });
193
- return (React.createElement(Flex, Object.assign({ as: Element, position: "relative" }, elemProps), mappedChildren));
193
+ return (React.createElement(Flex, Object.assign({ as: Element, position: "relative", alignItems: "center" }, elemProps), mappedChildren));
194
194
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "11.2.13",
3
+ "version": "11.2.15",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,8 +49,8 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^11.2.13",
53
- "@workday/canvas-kit-styling": "^11.2.13",
52
+ "@workday/canvas-kit-popup-stack": "^11.2.15",
53
+ "@workday/canvas-kit-styling": "^11.2.15",
54
54
  "@workday/canvas-system-icons-web": "^3.0.0",
55
55
  "@workday/canvas-tokens-web": "^2.0.0",
56
56
  "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "e0f1da814e9fbcf66cc866020e39c3110e3df6c4"
70
+ "gitHead": "7070b588614891bf36ecfaf7dcedf872cc776afb"
71
71
  }
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import {createComponent, ErrorType, focusRing, useUniqueId} from '@workday/canvas-kit-react/common';
3
- import {createStencil, px2rem} from '@workday/canvas-kit-styling';
3
+ import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
4
4
  import {brand, system} from '@workday/canvas-tokens-web';
5
5
  import {mergeStyles} from '../../layout';
6
6
 
@@ -158,6 +158,9 @@ const switchCircleStencil = createStencil({
158
158
  checked: {
159
159
  true: {
160
160
  transform: `translateX(${system.space.x4})`,
161
+ ':dir(rtl)': {
162
+ transform: `translateX(${calc.negate(system.space.x4)})`,
163
+ },
161
164
  },
162
165
  },
163
166
  },
@@ -243,7 +243,7 @@ export const InputGroup = createContainer('div')({
243
243
  });
244
244
 
245
245
  return (
246
- <Flex as={Element} position="relative" {...elemProps}>
246
+ <Flex as={Element} position="relative" alignItems="center" {...elemProps}>
247
247
  {mappedChildren}
248
248
  </Flex>
249
249
  );