@workday/canvas-kit-react 8.0.0-alpha.150-next.2 → 8.0.0-alpha.155-next.0

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.
Files changed (167) hide show
  1. package/banner/lib/Banner.tsx +3 -6
  2. package/card/lib/CardBody.tsx +3 -6
  3. package/card/lib/CardHeading.tsx +13 -10
  4. package/checkbox/lib/Checkbox.tsx +9 -24
  5. package/common/lib/utils/useModalityType.ts +13 -13
  6. package/dist/commonjs/banner/lib/Banner.d.ts.map +1 -1
  7. package/dist/commonjs/banner/lib/Banner.js +2 -4
  8. package/dist/commonjs/card/lib/Card.d.ts +1 -1
  9. package/dist/commonjs/card/lib/CardBody.d.ts +1 -1
  10. package/dist/commonjs/card/lib/CardBody.d.ts.map +1 -1
  11. package/dist/commonjs/card/lib/CardBody.js +1 -6
  12. package/dist/commonjs/card/lib/CardHeading.d.ts.map +1 -1
  13. package/dist/commonjs/card/lib/CardHeading.js +2 -10
  14. package/dist/commonjs/checkbox/lib/Checkbox.d.ts.map +1 -1
  15. package/dist/commonjs/checkbox/lib/Checkbox.js +2 -13
  16. package/dist/commonjs/common/lib/utils/useModalityType.js +13 -13
  17. package/dist/commonjs/dialog/lib/Dialog.d.ts +1 -1
  18. package/dist/commonjs/form-field/lib/Hint.d.ts.map +1 -1
  19. package/dist/commonjs/form-field/lib/Hint.js +5 -13
  20. package/dist/commonjs/index.d.ts +1 -0
  21. package/dist/commonjs/index.d.ts.map +1 -1
  22. package/dist/commonjs/index.js +1 -0
  23. package/dist/commonjs/layout/index.d.ts +2 -0
  24. package/dist/commonjs/layout/index.d.ts.map +1 -1
  25. package/dist/commonjs/layout/index.js +2 -0
  26. package/dist/commonjs/layout/lib/Box.d.ts +4 -2
  27. package/dist/commonjs/layout/lib/Box.d.ts.map +1 -1
  28. package/dist/commonjs/layout/lib/Box.js +27 -3
  29. package/dist/commonjs/layout/lib/Flex.d.ts +1 -1
  30. package/dist/commonjs/layout/lib/Flex.d.ts.map +1 -1
  31. package/dist/commonjs/layout/lib/Grid.d.ts +2 -2
  32. package/dist/commonjs/layout/lib/Stack.d.ts +4 -4
  33. package/dist/commonjs/layout/lib/utils/color.d.ts.map +1 -1
  34. package/dist/commonjs/layout/lib/utils/color.js +1 -0
  35. package/dist/commonjs/layout/lib/utils/font.d.ts +29 -0
  36. package/dist/commonjs/layout/lib/utils/font.d.ts.map +1 -0
  37. package/dist/commonjs/layout/lib/utils/font.js +57 -0
  38. package/dist/commonjs/layout/lib/utils/text.d.ts +35 -0
  39. package/dist/commonjs/layout/lib/utils/text.d.ts.map +1 -0
  40. package/dist/commonjs/layout/lib/utils/text.js +48 -0
  41. package/dist/commonjs/modal/lib/Modal.d.ts +1 -1
  42. package/dist/commonjs/modal/lib/ModalCard.d.ts.map +1 -1
  43. package/dist/commonjs/modal/lib/ModalCard.js +15 -1
  44. package/dist/commonjs/modal/lib/ModalOverlay.d.ts.map +1 -1
  45. package/dist/commonjs/modal/lib/ModalOverlay.js +26 -16
  46. package/dist/commonjs/modal/lib/hooks/useCloseOnOverlayClick.d.ts.map +1 -1
  47. package/dist/commonjs/modal/lib/hooks/useCloseOnOverlayClick.js +3 -1
  48. package/dist/commonjs/pagination/lib/Pagination/AdditionalDetails.d.ts.map +1 -1
  49. package/dist/commonjs/pagination/lib/Pagination/AdditionalDetails.js +5 -4
  50. package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.d.ts.map +1 -1
  51. package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.js +2 -4
  52. package/dist/commonjs/popup/lib/Popup.d.ts +1 -1
  53. package/dist/commonjs/popup/lib/PopupBody.d.ts +1 -1
  54. package/dist/commonjs/popup/lib/PopupCard.d.ts.map +1 -1
  55. package/dist/commonjs/popup/lib/PopupCard.js +18 -10
  56. package/dist/commonjs/popup/lib/PopupPopper.d.ts +2 -3
  57. package/dist/commonjs/popup/lib/PopupPopper.d.ts.map +1 -1
  58. package/dist/commonjs/radio/lib/Radio.d.ts.map +1 -1
  59. package/dist/commonjs/radio/lib/Radio.js +2 -13
  60. package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
  61. package/dist/commonjs/side-panel/lib/SidePanel.js +2 -2
  62. package/dist/commonjs/tabs/lib/TabsItem.d.ts +1 -1
  63. package/dist/commonjs/text/index.d.ts +4 -0
  64. package/dist/commonjs/text/index.d.ts.map +1 -0
  65. package/dist/commonjs/text/index.js +15 -0
  66. package/dist/commonjs/text/lib/LabelText.d.ts +8 -0
  67. package/dist/commonjs/text/lib/LabelText.d.ts.map +1 -0
  68. package/dist/commonjs/text/lib/LabelText.js +51 -0
  69. package/dist/commonjs/text/lib/Text.d.ts +14 -0
  70. package/dist/commonjs/text/lib/Text.d.ts.map +1 -0
  71. package/dist/commonjs/text/lib/Text.js +90 -0
  72. package/dist/commonjs/text/lib/TypeLevelComponents.d.ts +13 -0
  73. package/dist/commonjs/text/lib/TypeLevelComponents.d.ts.map +1 -0
  74. package/dist/commonjs/text/lib/TypeLevelComponents.js +79 -0
  75. package/dist/es6/banner/lib/Banner.d.ts.map +1 -1
  76. package/dist/es6/banner/lib/Banner.js +2 -4
  77. package/dist/es6/card/lib/Card.d.ts +1 -1
  78. package/dist/es6/card/lib/CardBody.d.ts +1 -1
  79. package/dist/es6/card/lib/CardBody.d.ts.map +1 -1
  80. package/dist/es6/card/lib/CardBody.js +1 -3
  81. package/dist/es6/card/lib/CardHeading.d.ts.map +1 -1
  82. package/dist/es6/card/lib/CardHeading.js +2 -7
  83. package/dist/es6/checkbox/lib/Checkbox.d.ts.map +1 -1
  84. package/dist/es6/checkbox/lib/Checkbox.js +3 -14
  85. package/dist/es6/common/lib/utils/useModalityType.js +13 -13
  86. package/dist/es6/dialog/lib/Dialog.d.ts +1 -1
  87. package/dist/es6/form-field/lib/Hint.d.ts.map +1 -1
  88. package/dist/es6/form-field/lib/Hint.js +6 -14
  89. package/dist/es6/index.d.ts +1 -0
  90. package/dist/es6/index.d.ts.map +1 -1
  91. package/dist/es6/index.js +1 -0
  92. package/dist/es6/layout/index.d.ts +2 -0
  93. package/dist/es6/layout/index.d.ts.map +1 -1
  94. package/dist/es6/layout/index.js +2 -0
  95. package/dist/es6/layout/lib/Box.d.ts +4 -2
  96. package/dist/es6/layout/lib/Box.d.ts.map +1 -1
  97. package/dist/es6/layout/lib/Box.js +27 -3
  98. package/dist/es6/layout/lib/Flex.d.ts +1 -1
  99. package/dist/es6/layout/lib/Flex.d.ts.map +1 -1
  100. package/dist/es6/layout/lib/Grid.d.ts +2 -2
  101. package/dist/es6/layout/lib/Stack.d.ts +4 -4
  102. package/dist/es6/layout/lib/utils/color.d.ts.map +1 -1
  103. package/dist/es6/layout/lib/utils/color.js +2 -1
  104. package/dist/es6/layout/lib/utils/font.d.ts +29 -0
  105. package/dist/es6/layout/lib/utils/font.d.ts.map +1 -0
  106. package/dist/es6/layout/lib/utils/font.js +53 -0
  107. package/dist/es6/layout/lib/utils/text.d.ts +35 -0
  108. package/dist/es6/layout/lib/utils/text.d.ts.map +1 -0
  109. package/dist/es6/layout/lib/utils/text.js +44 -0
  110. package/dist/es6/modal/lib/Modal.d.ts +1 -1
  111. package/dist/es6/modal/lib/ModalCard.d.ts.map +1 -1
  112. package/dist/es6/modal/lib/ModalCard.js +16 -2
  113. package/dist/es6/modal/lib/ModalOverlay.d.ts.map +1 -1
  114. package/dist/es6/modal/lib/ModalOverlay.js +26 -16
  115. package/dist/es6/modal/lib/hooks/useCloseOnOverlayClick.d.ts.map +1 -1
  116. package/dist/es6/modal/lib/hooks/useCloseOnOverlayClick.js +4 -2
  117. package/dist/es6/pagination/lib/Pagination/AdditionalDetails.d.ts.map +1 -1
  118. package/dist/es6/pagination/lib/Pagination/AdditionalDetails.js +6 -5
  119. package/dist/es6/pagination/lib/Pagination/GoTo/Label.d.ts.map +1 -1
  120. package/dist/es6/pagination/lib/Pagination/GoTo/Label.js +2 -4
  121. package/dist/es6/popup/lib/Popup.d.ts +1 -1
  122. package/dist/es6/popup/lib/PopupBody.d.ts +1 -1
  123. package/dist/es6/popup/lib/PopupCard.d.ts.map +1 -1
  124. package/dist/es6/popup/lib/PopupCard.js +18 -10
  125. package/dist/es6/popup/lib/PopupPopper.d.ts +2 -3
  126. package/dist/es6/popup/lib/PopupPopper.d.ts.map +1 -1
  127. package/dist/es6/radio/lib/Radio.d.ts.map +1 -1
  128. package/dist/es6/radio/lib/Radio.js +3 -14
  129. package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
  130. package/dist/es6/side-panel/lib/SidePanel.js +3 -3
  131. package/dist/es6/tabs/lib/TabsItem.d.ts +1 -1
  132. package/dist/es6/text/index.d.ts +4 -0
  133. package/dist/es6/text/index.d.ts.map +1 -0
  134. package/dist/es6/text/index.js +3 -0
  135. package/dist/es6/text/lib/LabelText.d.ts +8 -0
  136. package/dist/es6/text/lib/LabelText.d.ts.map +1 -0
  137. package/dist/es6/text/lib/LabelText.js +29 -0
  138. package/dist/es6/text/lib/Text.d.ts +14 -0
  139. package/dist/es6/text/lib/Text.d.ts.map +1 -0
  140. package/dist/es6/text/lib/Text.js +68 -0
  141. package/dist/es6/text/lib/TypeLevelComponents.d.ts +13 -0
  142. package/dist/es6/text/lib/TypeLevelComponents.d.ts.map +1 -0
  143. package/dist/es6/text/lib/TypeLevelComponents.js +57 -0
  144. package/form-field/lib/Hint.tsx +8 -19
  145. package/index.ts +1 -0
  146. package/layout/index.ts +2 -0
  147. package/layout/lib/Box.tsx +34 -4
  148. package/layout/lib/utils/color.ts +7 -2
  149. package/layout/lib/utils/font.ts +67 -0
  150. package/layout/lib/utils/text.ts +57 -0
  151. package/modal/lib/ModalCard.tsx +17 -4
  152. package/modal/lib/ModalOverlay.tsx +11 -8
  153. package/modal/lib/hooks/useCloseOnOverlayClick.ts +4 -2
  154. package/package.json +3 -5
  155. package/pagination/lib/Pagination/AdditionalDetails.tsx +7 -8
  156. package/pagination/lib/Pagination/GoTo/Label.tsx +3 -11
  157. package/popup/lib/PopupCard.tsx +9 -1
  158. package/popup/lib/PopupPopper.tsx +2 -3
  159. package/radio/lib/Radio.tsx +9 -24
  160. package/side-panel/lib/SidePanel.tsx +7 -7
  161. package/text/LICENSE +52 -0
  162. package/text/README.md +5 -0
  163. package/text/index.ts +3 -0
  164. package/text/lib/LabelText.tsx +25 -0
  165. package/text/lib/Text.tsx +66 -0
  166. package/text/lib/TypeLevelComponents.tsx +43 -0
  167. package/text/package.json +6 -0
package/banner/lib/Banner.tsx CHANGED
@@ -26,14 +26,8 @@ export interface BannerProps extends ExtractProps<typeof Flex, never> {
26
26
  children?: React.ReactNode;
27
27
  }
28
28
 
29
- // Remove color from our type since it is set on the Flex style attribute
30
- const {color: _color, ...typeLevelsSubtextLarge} = type.levels.subtext.large;
31
-
32
29
  const styles: CSSProperties = {
33
- ...typeLevelsSubtextLarge,
34
30
  cursor: 'pointer',
35
- fontWeight: type.properties.fontWeights.medium,
36
- textAlign: 'left',
37
31
  transition: 'background-color 120ms',
38
32
  '&:focus': {
39
33
  outline: 'none',
@@ -75,6 +69,9 @@ export const Banner = createContainer('button')({
75
69
  return (
76
70
  <Flex
77
71
  as={Element}
72
+ {...type.levels.subtext.large}
73
+ fontWeight="medium"
74
+ textAlign="left"
78
75
  width={model.state.isSticky ? '222px' : '328px'}
79
76
  backgroundColor={palette.normal}
80
77
  color={palette.contrast}
package/card/lib/CardBody.tsx CHANGED
@@ -1,18 +1,15 @@
1
1
  import * as React from 'react';
2
- import styled from '@emotion/styled';
3
2
  import {type} from '@workday/canvas-kit-react/tokens';
4
- import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
3
+ import {createComponent} from '@workday/canvas-kit-react/common';
5
4
  import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
6
5
 
7
- const Body = styled(Box)<BoxProps & StyledType>(type.levels.subtext.large);
8
-
9
6
  export const CardBody = createComponent('div')({
10
7
  displayName: 'Card.Body',
11
8
  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
12
9
  return (
13
- <Body ref={ref} as={Element} {...elemProps}>
10
+ <Box ref={ref} as={Element} {...type.levels.subtext.large} {...elemProps}>
14
11
  {children}
15
- </Body>
12
+ </Box>
16
13
  );
17
14
  },
18
15
  });
package/card/lib/CardHeading.tsx CHANGED
@@ -1,8 +1,7 @@
1
1
  import * as React from 'react';
2
- import styled from '@emotion/styled';
3
- import {type} from '@workday/canvas-kit-react/tokens';
4
- import {StyledType, createComponent} from '@workday/canvas-kit-react/common';
5
- import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
2
+ import {createComponent} from '@workday/canvas-kit-react/common';
3
+ import {BoxProps} from '@workday/canvas-kit-react/layout';
4
+ import {Text} from '@workday/canvas-kit-react/text';
6
5
 
7
6
  export interface CardHeadingProps extends BoxProps {
8
7
  /**
@@ -13,17 +12,21 @@ export interface CardHeadingProps extends BoxProps {
13
12
  children?: React.ReactNode;
14
13
  }
15
14
 
16
- const Heading = styled(Box.as('h3'))<StyledType>(type.levels.body.large, {
17
- fontWeight: type.properties.fontWeights.bold,
18
- });
19
-
20
15
  export const CardHeading = createComponent('h3')({
21
16
  displayName: 'Card.Heading',
22
17
  Component: ({children, ...elemProps}: CardHeadingProps, ref, Element) => {
23
18
  return (
24
- <Heading ref={ref} marginBottom="m" marginTop={0} as={Element} {...elemProps}>
19
+ <Text
20
+ ref={ref}
21
+ typeLevel="body.large"
22
+ fontWeight="bold"
23
+ marginBottom="m"
24
+ marginTop={0}
25
+ as={Element}
26
+ {...elemProps}
27
+ >
25
28
  {children}
26
- </Heading>
29
+ </Text>
27
30
  );
28
31
  },
29
32
  });
package/checkbox/lib/Checkbox.tsx CHANGED
@@ -11,15 +11,10 @@ import {
11
11
  useTheme,
12
12
  Themeable,
13
13
  } from '@workday/canvas-kit-react/common';
14
- import {
15
- canvas,
16
- borderRadius,
17
- colors,
18
- inputColors,
19
- spaceNumbers,
20
- } from '@workday/canvas-kit-react/tokens';
14
+ import {borderRadius, colors, inputColors, spaceNumbers} from '@workday/canvas-kit-react/tokens';
21
15
  import {SystemIcon} from '@workday/canvas-kit-react/icon';
22
16
  import {checkSmallIcon} from '@workday/canvas-system-icons-web';
17
+ import {LabelText} from '@workday/canvas-kit-react/text';
23
18
 
24
19
  export interface CheckboxProps extends Themeable {
25
20
  /**
@@ -308,21 +303,6 @@ const IndeterminateBox = styled('div')<CheckboxProps>(
308
303
  })
309
304
  );
310
305
 
311
- const CheckboxLabel = styled('label')<{disabled?: boolean; variant?: string}>(
312
- {
313
- ...canvas.type.levels.subtext.large,
314
- paddingLeft: checkboxLabelDistance,
315
- },
316
- ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
317
- ({disabled, variant}) =>
318
- disabled
319
- ? {
320
- color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
321
- opacity: variant === 'inverse' ? '.4' : '1',
322
- }
323
- : {cursor: 'pointer'}
324
- );
325
-
326
306
  export const Checkbox = createComponent('input')({
327
307
  displayName: 'Checkbox',
328
308
  Component: (
@@ -381,9 +361,14 @@ export const Checkbox = createComponent('input')({
381
361
  </CheckboxBackground>
382
362
  </CheckboxInputWrapper>
383
363
  {label && (
384
- <CheckboxLabel variant={variant} htmlFor={inputId} disabled={disabled}>
364
+ <LabelText
365
+ htmlFor={inputId}
366
+ disabled={disabled}
367
+ variant={variant}
368
+ paddingLeft={checkboxLabelDistance}
369
+ >
385
370
  {label}
386
- </CheckboxLabel>
371
+ </LabelText>
387
372
  )}
388
373
  </CheckboxContainer>
389
374
  );
package/common/lib/utils/useModalityType.ts CHANGED
@@ -11,24 +11,24 @@ type Modality = 'mouse' | 'touch' | 'pen';
11
11
  // a. if localStorage isn't primed, use clientWidth of the browsers
12
12
  // b. if < 768, default to 'touch'
13
13
  // c. else default to 'mouse'
14
- const localStorageValue = 'mouse' as Modality; //((typeof localStorage !== 'undefined'
15
- // ? localStorage.getItem('modality')
16
- // : '') ||
17
- // (typeof document !== 'undefined'
18
- // ? document.documentElement.clientWidth < 768
19
- // ? 'touch'
20
- // : ''
21
- // : '') ||
22
- // 'mouse') as Modality;
14
+ let localStorageValue = ((typeof localStorage !== 'undefined'
15
+ ? localStorage.getItem('modality')
16
+ : '') ||
17
+ (typeof document !== 'undefined'
18
+ ? document.documentElement.clientWidth < 768
19
+ ? 'touch'
20
+ : ''
21
+ : '') ||
22
+ 'mouse') as Modality;
23
23
 
24
24
  // Update the `localStorageValue`, but conditionally update localStorage only if the value has
25
25
  // changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
26
26
  // drives
27
27
  const updateLocalStorage = (value: Modality) => {
28
- // if (localStorageValue !== value) {
29
- // localStorage.setItem('modality', value);
30
- // }
31
- // localStorageValue = value;
28
+ if (localStorageValue !== value) {
29
+ localStorage.setItem('modality', value);
30
+ }
31
+ localStorageValue = value;
32
32
  };
33
33
 
34
34
  /**
package/dist/commonjs/banner/lib/Banner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAkBD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CjB,CAAC"}
1
+ {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDjB,CAAC"}
package/dist/commonjs/banner/lib/Banner.js CHANGED
@@ -33,9 +33,7 @@ var hooks_1 = require("./hooks");
33
33
  var BannerIcon_1 = require("./BannerIcon");
34
34
  var BannerLabel_1 = require("./BannerLabel");
35
35
  var BannerActionText_1 = require("./BannerActionText");
36
- // Remove color from our type since it is set on the Flex style attribute
37
- var _a = tokens_1.type.levels.subtext.large, _color = _a.color, typeLevelsSubtextLarge = __rest(_a, ["color"]);
38
- var styles = __assign(__assign(__assign({}, typeLevelsSubtextLarge), { cursor: 'pointer', fontWeight: tokens_1.type.properties.fontWeights.medium, textAlign: 'left', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })) }), common_1.hideMouseFocus);
36
+ var styles = __assign({ cursor: 'pointer', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })) }, common_1.hideMouseFocus);
39
37
  exports.Banner = common_1.createContainer('button')({
40
38
  displayName: 'Banner',
41
39
  modelHook: hooks_1.useBannerModel,
@@ -65,5 +63,5 @@ exports.Banner = common_1.createContainer('button')({
65
63
  _b[borderBottomRightRadius] = model.state.isSticky ? 0 : tokens_1.borderRadius.m,
66
64
  _b[borderTopRightRadius] = model.state.isSticky ? 0 : tokens_1.borderRadius.m,
67
65
  _b);
68
- return (react_1.jsx(layout_1.Flex, __assign({ as: Element, width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: tokens_1.space.xxs + " " + tokens_1.space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, elemProps), children));
66
+ return (react_1.jsx(layout_1.Flex, __assign({ as: Element }, tokens_1.type.levels.subtext.large, { fontWeight: "medium", textAlign: "left", width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: tokens_1.space.xxs + " " + tokens_1.space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, elemProps), children));
69
67
  });
package/dist/commonjs/card/lib/Card.d.ts CHANGED
@@ -8,6 +8,6 @@ export interface CardProps extends BoxProps {
8
8
  }
9
9
  export declare const Card: import("../../common").ElementComponent<"div", CardProps> & {
10
10
  Heading: import("../../common").ElementComponent<"h3", import("./CardHeading").CardHeadingProps>;
11
- Body: import("../../common").ElementComponent<"div", import("../../layout").BorderShorthandStyleProps & import("../../layout").BorderColorStyleProps & import("../../layout").BorderRadiusStyleProps & import("../../layout").BorderLineStyleProps & import("../../layout").BorderWidthStyleProps & import("../../layout").BorderLogicalStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../../layout").PositionStandardProps & import("../../layout").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps>;
11
+ Body: import("../../common").ElementComponent<"div", import("../../layout").BorderShorthandStyleProps & import("../../layout").BorderColorStyleProps & import("../../layout").BorderRadiusStyleProps & import("../../layout").BorderLineStyleProps & import("../../layout").BorderWidthStyleProps & import("../../layout").BorderLogicalStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").FontStyleProps & import("../../layout").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../../layout").PositionStandardProps & import("../../layout").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & import("../../layout").TextStyleProps>;
12
12
  };
13
13
  //# sourceMappingURL=Card.d.ts.map
package/dist/commonjs/card/lib/CardBody.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const CardBody: import("../../common").ElementComponent<"div", import("../../layout").BorderShorthandStyleProps & import("../../layout").BorderColorStyleProps & import("../../layout").BorderRadiusStyleProps & import("../../layout").BorderLineStyleProps & import("../../layout").BorderWidthStyleProps & import("../../layout").BorderLogicalStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../../layout").PositionStandardProps & import("../../layout").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps>;
1
+ export declare const CardBody: import("../../common").ElementComponent<"div", import("../../layout").BorderShorthandStyleProps & import("../../layout").BorderColorStyleProps & import("../../layout").BorderRadiusStyleProps & import("../../layout").BorderLineStyleProps & import("../../layout").BorderWidthStyleProps & import("../../layout").BorderLogicalStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").FontStyleProps & import("../../layout").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../../layout").PositionStandardProps & import("../../layout").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & import("../../layout").TextStyleProps>;
2
2
  //# sourceMappingURL=CardBody.d.ts.map
package/dist/commonjs/card/lib/CardBody.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,QAAQ,owBASnB,CAAC"}
1
+ {"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,o1BASnB,CAAC"}
package/dist/commonjs/card/lib/CardBody.js CHANGED
@@ -40,21 +40,16 @@ var __rest = (this && this.__rest) || function (s, e) {
40
40
  }
41
41
  return t;
42
42
  };
43
- var __importDefault = (this && this.__importDefault) || function (mod) {
44
- return (mod && mod.__esModule) ? mod : { "default": mod };
45
- };
46
43
  Object.defineProperty(exports, "__esModule", { value: true });
47
44
  exports.CardBody = void 0;
48
45
  var React = __importStar(require("react"));
49
- var styled_1 = __importDefault(require("@emotion/styled"));
50
46
  var tokens_1 = require("@workday/canvas-kit-react/tokens");
51
47
  var common_1 = require("@workday/canvas-kit-react/common");
52
48
  var layout_1 = require("@workday/canvas-kit-react/layout");
53
- var Body = styled_1.default(layout_1.Box)(tokens_1.type.levels.subtext.large);
54
49
  exports.CardBody = common_1.createComponent('div')({
55
50
  displayName: 'Card.Body',
56
51
  Component: function (_a, ref, Element) {
57
52
  var children = _a.children, elemProps = __rest(_a, ["children"]);
58
- return (React.createElement(Body, __assign({ ref: ref, as: Element }, elemProps), children));
53
+ return (React.createElement(layout_1.Box, __assign({ ref: ref, as: Element }, tokens_1.type.levels.subtext.large, elemProps), children));
59
54
  },
60
55
  });
package/dist/commonjs/card/lib/CardHeading.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardHeading.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,WAAW,iEAStB,CAAC"}
1
+ {"version":3,"file":"CardHeading.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG1D,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,iEAiBtB,CAAC"}
package/dist/commonjs/card/lib/CardHeading.js CHANGED
@@ -40,23 +40,15 @@ var __rest = (this && this.__rest) || function (s, e) {
40
40
  }
41
41
  return t;
42
42
  };
43
- var __importDefault = (this && this.__importDefault) || function (mod) {
44
- return (mod && mod.__esModule) ? mod : { "default": mod };
45
- };
46
43
  Object.defineProperty(exports, "__esModule", { value: true });
47
44
  exports.CardHeading = void 0;
48
45
  var React = __importStar(require("react"));
49
- var styled_1 = __importDefault(require("@emotion/styled"));
50
- var tokens_1 = require("@workday/canvas-kit-react/tokens");
51
46
  var common_1 = require("@workday/canvas-kit-react/common");
52
- var layout_1 = require("@workday/canvas-kit-react/layout");
53
- var Heading = styled_1.default(layout_1.Box.as('h3'))(tokens_1.type.levels.body.large, {
54
- fontWeight: tokens_1.type.properties.fontWeights.bold,
55
- });
47
+ var text_1 = require("@workday/canvas-kit-react/text");
56
48
  exports.CardHeading = common_1.createComponent('h3')({
57
49
  displayName: 'Card.Heading',
58
50
  Component: function (_a, ref, Element) {
59
51
  var children = _a.children, elemProps = __rest(_a, ["children"]);
60
- return (React.createElement(Heading, __assign({ ref: ref, marginBottom: "m", marginTop: 0, as: Element }, elemProps), children));
52
+ return (React.createElement(text_1.Text, __assign({ ref: ref, typeLevel: "body.large", fontWeight: "bold", marginBottom: "m", marginTop: 0, as: Element }, elemProps), children));
61
53
  },
62
54
  });
package/dist/commonjs/checkbox/lib/Checkbox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAW1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;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;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAoQD,eAAO,MAAM,QAAQ;;CAoEnB,CAAC"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;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;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAqPD,eAAO,MAAM,QAAQ;;CAyEnB,CAAC"}
package/dist/commonjs/checkbox/lib/Checkbox.js CHANGED
@@ -47,6 +47,7 @@ var common_1 = require("@workday/canvas-kit-react/common");
47
47
  var tokens_1 = require("@workday/canvas-kit-react/tokens");
48
48
  var icon_1 = require("@workday/canvas-kit-react/icon");
49
49
  var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
50
+ var text_1 = require("@workday/canvas-kit-react/text");
50
51
  var checkboxHeight = 18;
51
52
  var checkboxTapArea = tokens_1.spaceNumbers.m;
52
53
  var checkboxContainerHeight = checkboxTapArea;
@@ -231,18 +232,6 @@ var IndeterminateBox = common_1.styled('div')({
231
232
  : theme.canvas.palette.primary.contrast,
232
233
  });
233
234
  });
234
- var CheckboxLabel = common_1.styled('label')(__assign(__assign({}, tokens_1.canvas.type.levels.subtext.large), { paddingLeft: checkboxLabelDistance }), function (_a) {
235
- var variant = _a.variant;
236
- return (variant === 'inverse' ? { color: tokens_1.colors.frenchVanilla100 } : undefined);
237
- }, function (_a) {
238
- var disabled = _a.disabled, variant = _a.variant;
239
- return disabled
240
- ? {
241
- color: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : tokens_1.inputColors.disabled.text,
242
- opacity: variant === 'inverse' ? '.4' : '1',
243
- }
244
- : { cursor: 'pointer' };
245
- });
246
235
  exports.Checkbox = common_1.createComponent('input')({
247
236
  displayName: 'Checkbox',
248
237
  Component: function (_a, ref, Element) {
@@ -262,7 +251,7 @@ exports.Checkbox = common_1.createComponent('input')({
262
251
  React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: variant === 'inverse'
263
252
  ? theme.canvas.palette.primary.main
264
253
  : theme.canvas.palette.primary.contrast }))))),
265
- label && (React.createElement(CheckboxLabel, { variant: variant, htmlFor: inputId, disabled: disabled }, label))));
254
+ label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingLeft: checkboxLabelDistance }, label))));
266
255
  },
267
256
  subComponents: {
268
257
  ErrorType: common_1.ErrorType,
package/dist/commonjs/common/lib/utils/useModalityType.js CHANGED
@@ -14,23 +14,23 @@ var react_1 = __importDefault(require("react"));
14
14
  // a. if localStorage isn't primed, use clientWidth of the browsers
15
15
  // b. if < 768, default to 'touch'
16
16
  // c. else default to 'mouse'
17
- var localStorageValue = 'mouse'; //((typeof localStorage !== 'undefined'
18
- // ? localStorage.getItem('modality')
19
- // : '') ||
20
- // (typeof document !== 'undefined'
21
- // ? document.documentElement.clientWidth < 768
22
- // ? 'touch'
23
- // : ''
24
- // : '') ||
25
- // 'mouse') as Modality;
17
+ var localStorageValue = ((typeof localStorage !== 'undefined'
18
+ ? localStorage.getItem('modality')
19
+ : '') ||
20
+ (typeof document !== 'undefined'
21
+ ? document.documentElement.clientWidth < 768
22
+ ? 'touch'
23
+ : ''
24
+ : '') ||
25
+ 'mouse');
26
26
  // Update the `localStorageValue`, but conditionally update localStorage only if the value has
27
27
  // changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
28
28
  // drives
29
29
  var updateLocalStorage = function (value) {
30
- // if (localStorageValue !== value) {
31
- // localStorage.setItem('modality', value);
32
- // }
33
- // localStorageValue = value;
30
+ if (localStorageValue !== value) {
31
+ localStorage.setItem('modality', value);
32
+ }
33
+ localStorageValue = value;
34
34
  };
35
35
  /**
36
36
  * Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook
package/dist/commonjs/dialog/lib/Dialog.d.ts CHANGED
@@ -88,7 +88,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
88
88
  hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
89
89
  };
90
90
  }> & {
91
- Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
91
+ Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").FontStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
92
92
  state: {
93
93
  stackRef: React.RefObject<HTMLDivElement>;
94
94
  targetRef: React.RefObject<HTMLButtonElement>;
package/dist/commonjs/form-field/lib/Hint.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAU,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAG9E,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAmBD,cAAM,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;IAC3C,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CAqBd;AAID,OAAO,EAAC,IAAI,EAAC,CAAC"}
1
+ {"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAE,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAI9E,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAMD,cAAM,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;IAC3C,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CAsBd;AAID,OAAO,EAAC,IAAI,EAAC,CAAC"}
package/dist/commonjs/form-field/lib/Hint.js CHANGED
@@ -47,16 +47,8 @@ exports.Hint = void 0;
47
47
  var React = __importStar(require("react"));
48
48
  var common_1 = require("@workday/canvas-kit-react/common");
49
49
  var tokens_1 = require("@workday/canvas-kit-react/tokens");
50
- var Label = common_1.styled('span')(tokens_1.type.levels.subtext.medium, {
51
- fontWeight: tokens_1.type.properties.fontWeights.medium,
52
- }, function (_a) {
53
- var error = _a.error, theme = _a.theme;
54
- return error === common_1.ErrorType.Error && { color: theme.canvas.palette.error.main };
55
- });
56
- var Message = common_1.styled('p')(tokens_1.type.levels.subtext.medium, {
57
- margin: tokens_1.space.xxs + " 0 0",
58
- width: '100%',
59
- }, function (_a) {
50
+ var text_1 = require("@workday/canvas-kit-react/text");
51
+ var Message = common_1.styled(text_1.Subtext)(function (_a) {
60
52
  var error = _a.error, theme = _a.theme;
61
53
  return error === common_1.ErrorType.Error && { color: theme.canvas.palette.error.main };
62
54
  });
@@ -77,10 +69,10 @@ var Hint = /** @class */ (function (_super) {
77
69
  break;
78
70
  default:
79
71
  }
80
- return (React.createElement(Message, __assign({}, this.props),
81
- typeof error !== 'undefined' && hintLabel && React.createElement(Label, { error: error },
72
+ return (React.createElement(Message, __assign({ size: "medium", margin: tokens_1.space.xxs + " 0 0", width: "100%" }, this.props),
73
+ typeof error !== 'undefined' && hintLabel && (React.createElement(text_1.Text, { fontWeight: "medium" },
82
74
  hintLabel,
83
- ": "),
75
+ ": ")),
84
76
  children));
85
77
  };
86
78
  Hint.ErrorType = common_1.ErrorType;
package/dist/commonjs/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export * from './status-indicator';
27
27
  export * from './switch';
28
28
  export * from './table';
29
29
  export * from './tabs';
30
+ export * from './text';
30
31
  export * from './text-area';
31
32
  export * from './text-input';
32
33
  export * from './toast';
package/dist/commonjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
package/dist/commonjs/index.js CHANGED
@@ -39,6 +39,7 @@ __exportStar(require("./status-indicator"), exports);
39
39
  __exportStar(require("./switch"), exports);
40
40
  __exportStar(require("./table"), exports);
41
41
  __exportStar(require("./tabs"), exports);
42
+ __exportStar(require("./text"), exports);
42
43
  __exportStar(require("./text-area"), exports);
43
44
  __exportStar(require("./text-input"), exports);
44
45
  __exportStar(require("./toast"), exports);
package/dist/commonjs/layout/index.d.ts CHANGED
@@ -6,9 +6,11 @@ export * from './lib/utils/border';
6
6
  export * from './lib/utils/color';
7
7
  export { DepthStyleProps } from './lib/utils/depth';
8
8
  export * from './lib/utils/flexItem';
9
+ export * from './lib/utils/font';
9
10
  export * from './lib/utils/layout';
10
11
  export * from './lib/utils/position';
11
12
  export { SpaceStyleProps } from './lib/utils/space';
13
+ export * from './lib/utils/text';
12
14
  export * from './lib/Flex';
13
15
  export * from './lib/Grid';
14
16
  export * from './lib/Stack';
package/dist/commonjs/layout/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
package/dist/commonjs/layout/index.js CHANGED
@@ -19,8 +19,10 @@ __exportStar(require("./lib/Box"), exports);
19
19
  __exportStar(require("./lib/utils/border"), exports);
20
20
  __exportStar(require("./lib/utils/color"), exports);
21
21
  __exportStar(require("./lib/utils/flexItem"), exports);
22
+ __exportStar(require("./lib/utils/font"), exports);
22
23
  __exportStar(require("./lib/utils/layout"), exports);
23
24
  __exportStar(require("./lib/utils/position"), exports);
25
+ __exportStar(require("./lib/utils/text"), exports);
24
26
  __exportStar(require("./lib/Flex"), exports);
25
27
  __exportStar(require("./lib/Grid"), exports);
26
28
  __exportStar(require("./lib/Stack"), exports);
package/dist/commonjs/layout/lib/Box.d.ts CHANGED
@@ -3,11 +3,13 @@ import { BorderStyleProps } from './utils/border';
3
3
  import { ColorStyleProps } from './utils/color';
4
4
  import { DepthStyleProps } from './utils/depth';
5
5
  import { FlexItemStyleProps } from './utils/flexItem';
6
+ import { FontStyleProps } from './utils/font';
6
7
  import { LayoutStyleProps } from './utils/layout';
7
8
  import { OtherStyleProps } from './utils/other';
8
9
  import { PositionStyleProps } from './utils/position';
9
10
  import { SpaceStyleProps } from './utils/space';
10
- export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
11
+ import { TextStyleProps } from './utils/text';
12
+ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & FontStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & TextStyleProps & {
11
13
  children?: React.ReactNode;
12
14
  };
13
15
  /**
@@ -44,5 +46,5 @@ export declare const boxStyleFn: <P extends BoxProps>(props: P) => {};
44
46
  * );
45
47
  *
46
48
  */
47
- export declare const Box: import("../../common").ElementComponent<"div", import("./utils/border").BorderShorthandStyleProps & import("./utils/border").BorderColorStyleProps & import("./utils/border").BorderRadiusStyleProps & import("./utils/border").BorderLineStyleProps & import("./utils/border").BorderWidthStyleProps & import("./utils/border").BorderLogicalStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
49
+ export declare const Box: import("../../common").ElementComponent<"div", import("./utils/border").BorderShorthandStyleProps & import("./utils/border").BorderColorStyleProps & import("./utils/border").BorderRadiusStyleProps & import("./utils/border").BorderLineStyleProps & import("./utils/border").BorderWidthStyleProps & import("./utils/border").BorderLogicalStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & FontStyleProps & LayoutStyleProps & OtherStyleProps & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & TextStyleProps>;
48
50
  //# sourceMappingURL=Box.d.ts.map
package/dist/commonjs/layout/lib/Box.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAQJ;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,sCAsBtB,CAAC;AA+BF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,unBAad,CAAC"}
1
+ {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,cAAc,GAAG;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA4BJ;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,sCAwBtB,CAAC;AAmCF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ypBAad,CAAC"}
package/dist/commonjs/layout/lib/Box.js CHANGED
@@ -54,11 +54,33 @@ var border_1 = require("./utils/border");
54
54
  var color_1 = require("./utils/color");
55
55
  var depth_1 = require("./utils/depth");
56
56
  var flexItem_1 = require("./utils/flexItem");
57
+ var font_1 = require("./utils/font");
57
58
  var layout_1 = require("./utils/layout");
58
59
  var other_1 = require("./utils/other");
59
60
  var position_1 = require("./utils/position");
60
61
  var space_1 = require("./utils/space");
61
- var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
62
+ var text_1 = require("./utils/text");
63
+ var omittedProps = [
64
+ 'display',
65
+ 'color',
66
+ 'height',
67
+ 'overflow',
68
+ 'width',
69
+ 'border',
70
+ 'background',
71
+ 'fontSize',
72
+ 'fontWeight',
73
+ 'fontFamily',
74
+ 'letterSpacing',
75
+ 'lineHeight',
76
+ 'textAlign',
77
+ 'textDecoration',
78
+ 'textOverflow',
79
+ 'textTransform',
80
+ 'textShadow',
81
+ 'whiteSpace',
82
+ 'wordBreak',
83
+ ];
62
84
  var shouldForwardProp = function (prop) {
63
85
  return is_prop_valid_1.default(prop) && !omittedProps.includes(prop);
64
86
  };
@@ -87,9 +109,11 @@ var boxStyleFn = function (props) {
87
109
  color_1.color,
88
110
  depth_1.depth,
89
111
  flexItem_1.flexItem,
112
+ font_1.font,
90
113
  layout_1.layout,
91
114
  position_1.position,
92
115
  space_1.space,
116
+ text_1.text,
93
117
  ].reduce(function (result, style) {
94
118
  // @ts-ignore
95
119
  var temp = typeof style === 'function' ? style(props) : style;
@@ -105,11 +129,11 @@ exports.boxStyleFn = boxStyleFn;
105
129
  // Meant to be used with elements. The `shouldForwardProps` will remove all style props
106
130
  var StyledBoxElement = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
107
131
  boxSizing: 'border-box',
108
- }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
132
+ }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, font_1.font, layout_1.layout, position_1.position, space_1.space, text_1.text);
109
133
  // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
110
134
  var StyledBoxComponent = styled_1.default('div')({
111
135
  boxSizing: 'border-box',
112
- }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, other_1.other, position_1.position, space_1.space);
136
+ }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, font_1.font, layout_1.layout, other_1.other, position_1.position, space_1.space, text_1.text);
113
137
  /**
114
138
  * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
115
139
  * It is highly flexible, and its primary purpose is to build other components.
package/dist/commonjs/layout/lib/Flex.d.ts CHANGED
@@ -22,5 +22,5 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
22
22
  * );
23
23
  *
24
24
  */
25
- export declare const Flex: import("../../common").ElementComponent<"div", import("..").BorderShorthandStyleProps & import("..").BorderColorStyleProps & import("..").BorderRadiusStyleProps & import("..").BorderLineStyleProps & import("..").BorderWidthStyleProps & import("..").BorderLogicalStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & FlexStyleProps>;
25
+ export declare const Flex: import("../../common").ElementComponent<"div", import("..").BorderShorthandStyleProps & import("..").BorderColorStyleProps & import("..").BorderRadiusStyleProps & import("..").BorderLineStyleProps & import("..").BorderWidthStyleProps & import("..").BorderLogicalStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").FontStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & import("..").TextStyleProps & FlexStyleProps>;
26
26
  //# sourceMappingURL=Flex.d.ts.map
package/dist/commonjs/layout/lib/Flex.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,gnBASf,CAAC"}
1
+ {"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,4qBASf,CAAC"}