@redsift/design-system 11.9.4-muiv5 → 12.0.0-muiv5

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 (112) hide show
  1. package/CONTRIBUTING.md +1 -5
  2. package/_internal/Alert2.js +9 -4
  3. package/_internal/Alert2.js.map +1 -1
  4. package/_internal/AppContent.js +9 -4
  5. package/_internal/AppContent.js.map +1 -1
  6. package/_internal/Badge2.js +9 -4
  7. package/_internal/Badge2.js.map +1 -1
  8. package/_internal/Breadcrumbs2.js +9 -4
  9. package/_internal/Breadcrumbs2.js.map +1 -1
  10. package/_internal/Button2.js +9 -4
  11. package/_internal/Button2.js.map +1 -1
  12. package/_internal/ButtonGroup.js +15 -6
  13. package/_internal/ButtonGroup.js.map +1 -1
  14. package/_internal/ButtonLink.js +1 -1
  15. package/_internal/Card2.js +9 -4
  16. package/_internal/Card2.js.map +1 -1
  17. package/_internal/CardActions.js +16 -12
  18. package/_internal/CardActions.js.map +1 -1
  19. package/_internal/CardBody.js +9 -4
  20. package/_internal/CardBody.js.map +1 -1
  21. package/_internal/CardHeader.js +13 -4
  22. package/_internal/CardHeader.js.map +1 -1
  23. package/_internal/Checkbox2.js +9 -4
  24. package/_internal/Checkbox2.js.map +1 -1
  25. package/_internal/CheckboxGroup.js +9 -4
  26. package/_internal/CheckboxGroup.js.map +1 -1
  27. package/_internal/DetailedCard.js +24 -12
  28. package/_internal/DetailedCard.js.map +1 -1
  29. package/_internal/Flexbox2.js +21 -16
  30. package/_internal/Flexbox2.js.map +1 -1
  31. package/_internal/Grid2.js +21 -16
  32. package/_internal/Grid2.js.map +1 -1
  33. package/_internal/GridItem.js +9 -4
  34. package/_internal/GridItem.js.map +1 -1
  35. package/_internal/Heading2.js +9 -4
  36. package/_internal/Heading2.js.map +1 -1
  37. package/_internal/Icon2.js +10 -5
  38. package/_internal/Icon2.js.map +1 -1
  39. package/_internal/IconButton.js +9 -4
  40. package/_internal/IconButton.js.map +1 -1
  41. package/_internal/IconButtonLink.js +1 -1
  42. package/_internal/Item2.js +16 -7
  43. package/_internal/Item2.js.map +1 -1
  44. package/_internal/Link2.js +9 -4
  45. package/_internal/Link2.js.map +1 -1
  46. package/_internal/LinkButton.js +2 -1
  47. package/_internal/LinkButton.js.map +1 -1
  48. package/_internal/Listbox2.js +14 -8
  49. package/_internal/Listbox2.js.map +1 -1
  50. package/_internal/Number2.js +10 -5
  51. package/_internal/Number2.js.map +1 -1
  52. package/_internal/NumberField.js +11 -6
  53. package/_internal/NumberField.js.map +1 -1
  54. package/_internal/Pill2.js +9 -4
  55. package/_internal/Pill2.js.map +1 -1
  56. package/_internal/ProgressBar.js +20 -11
  57. package/_internal/ProgressBar.js.map +1 -1
  58. package/_internal/Radio2.js +9 -4
  59. package/_internal/Radio2.js.map +1 -1
  60. package/_internal/RadioGroup.js +9 -4
  61. package/_internal/RadioGroup.js.map +1 -1
  62. package/_internal/Shield2.js +12 -7
  63. package/_internal/Shield2.js.map +1 -1
  64. package/_internal/SideNavigationMenu.js +1 -1
  65. package/_internal/Skeleton2.js +9 -4
  66. package/_internal/Skeleton2.js.map +1 -1
  67. package/_internal/SkeletonCircle.js +1 -1
  68. package/_internal/SkeletonText.js +1 -1
  69. package/_internal/Spinner2.js +9 -4
  70. package/_internal/Spinner2.js.map +1 -1
  71. package/_internal/Switch2.js +9 -4
  72. package/_internal/Switch2.js.map +1 -1
  73. package/_internal/SwitchGroup.js +9 -4
  74. package/_internal/SwitchGroup.js.map +1 -1
  75. package/_internal/Text2.js +13 -6
  76. package/_internal/Text2.js.map +1 -1
  77. package/_internal/TextArea.js +18 -12
  78. package/_internal/TextArea.js.map +1 -1
  79. package/_internal/TextField.js +12 -6
  80. package/_internal/TextField.js.map +1 -1
  81. package/_internal/_rollupPluginBabelHelpers.js +1 -1
  82. package/_internal/button.js +1 -1
  83. package/_internal/colors.js +1 -1
  84. package/_internal/icon-button.js +1 -1
  85. package/_internal/link.js +1 -1
  86. package/_internal/shared.js +1 -1
  87. package/_internal/styles.js +309 -217
  88. package/_internal/styles.js.map +1 -1
  89. package/_internal/styles2.js +202 -14
  90. package/_internal/styles2.js.map +1 -1
  91. package/_internal/styles3.js +30 -128
  92. package/_internal/styles3.js.map +1 -1
  93. package/_internal/styles4.js +129 -234
  94. package/_internal/styles4.js.map +1 -1
  95. package/_internal/styles5.js +227 -118
  96. package/_internal/styles5.js.map +1 -1
  97. package/_internal/styles6.js +128 -69
  98. package/_internal/styles6.js.map +1 -1
  99. package/_internal/styles7.js +84 -0
  100. package/_internal/styles7.js.map +1 -0
  101. package/_internal/text.js +1 -1
  102. package/_internal/types2.js.map +1 -1
  103. package/_internal/useFocusOnList.js +1 -1
  104. package/_internal/useFocusRing.js +1 -1
  105. package/_internal/useListboxItem.js.map +1 -1
  106. package/_internal/useLocalizedStringFormatter.js +1 -1
  107. package/_internal/useMessageFormatter.js +1 -1
  108. package/_internal/useNumberFormatter.js +1 -1
  109. package/index.d.ts +227 -136
  110. package/index.js +8 -164
  111. package/index.js.map +1 -1
  112. package/package.json +5 -6
@@ -1 +1 @@
1
- {"version":3,"file":"styles6.js","sources":["../../src/components/skeleton/styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { baseInternalSpacing, baseStyling } from '../shared';\nimport { StyledSkeletonProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nconst wave = keyframes`\n 0% {\n -webkit-transform: translateX(-100%);\n -moz-transform: translateX(-100%);\n -ms-transform: translateX(-100%);\n transform: translateX(-100%);\n }\n\n 50% {\n -webkit-transform: translateX(100%);\n -moz-transform: translateX(100%);\n -ms-transform: translateX(100%);\n transform: translateX(100%);\n }\n\n 100% {\n -webkit-transform: translateX(100%);\n -moz-transform: translateX(100%);\n -ms-transform: translateX(100%);\n transform: translateX(100%);\n }\n`;\n\nexport const StyledSkeleton = styled.div<StyledSkeletonProps>`\n height: fit-content;\n width: fit-content;\n\n * {\n visibility: hidden;\n }\n\n flex: 0 0 auto;\n\n ${baseStyling}\n ${baseInternalSpacing}\n\n display: block;\n background-color: ${({ $theme }) =>\n $theme === Theme.light ? css`rgba(0, 0, 0, 0.16)` : css`rgba(255, 255, 255, 0.16)`};\n border-radius: 4px;\n position: relative;\n overflow: hidden;\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n &::after {\n -webkit-animation: ${wave} 1.6s linear 0.5s infinite;\n animation: ${wave} 1.6s linear 0.5s infinite;\n background: linear-gradient(\n 90deg,\n transparent,\n ${({ $theme }) => ($theme === Theme.light ? css`rgba(0, 0, 0, 0.04)` : css`rgba(255, 255, 255, 0.04)`)},\n transparent\n );\n background-clip: content-box;\n content: '';\n position: absolute;\n -webkit-transform: translateX(-100%);\n -moz-transform: translateX(-100%);\n -ms-transform: translateX(-100%);\n transform: translateX(-100%);\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n }\n`;\n"],"names":["wave","keyframes","StyledSkeleton","styled","div","baseStyling","baseInternalSpacing","_ref","$theme","Theme","light","css","_ref2"],"mappings":";;;;AAKA;AACA;AACA;AACA,MAAMA,IAAI,GAAGC,SAAU,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAEYC,MAAAA,cAAc,GAAGC,MAAM,CAACC,GAAyB,CAAA;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,mBAAoB,CAAA;AACxB;AACA;AACA,oBAAA,EAAsBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAC7BC,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAGC,GAAI,CAAA,mBAAA,CAAoB,GAAGA,GAAI,CAA0B,yBAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,uBAAA,EAAyBX,IAAK,CAAA;AAC9B,eAAA,EAAiBA,IAAK,CAAA;AACtB;AACA;AACA;AACA,MAAA,EAAQY,KAAA,IAAA;EAAA,IAAC;AAAEJ,IAAAA,MAAAA;AAAO,GAAC,GAAAI,KAAA,CAAA;EAAA,OAAMJ,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAGC,GAAI,CAAA,mBAAA,CAAoB,GAAGA,GAAI,CAA0B,yBAAA,CAAA,CAAA;AAAA,CAAE,CAAA;AAC7G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
1
+ {"version":3,"file":"styles6.js","sources":["../../src/components/text/types.ts","../../src/components/text/styles.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport {\n NotificationsColorPalette,\n FontFamily,\n NeutralColorPalette,\n StylingProps,\n StylingTransientProps,\n ValueOf,\n Theme,\n} from '../../types';\n\n/**\n * Component variant.\n */\nexport const TextVariant = {\n body: 'body',\n button: 'button',\n caption: 'caption',\n helper: 'helper',\n inherit: 'inherit',\n} as const;\nexport type TextVariant = ValueOf<typeof TextVariant>;\n\nexport const TextComponent = {\n p: 'p',\n b: 'b',\n i: 'i',\n u: 'u',\n abbr: 'abbr',\n cite: 'cite',\n del: 'del',\n em: 'em',\n ins: 'ins',\n kbd: 'kbd',\n mark: 'mark',\n s: 's',\n samp: 'samp',\n sub: 'sub',\n sup: 'sup',\n} as const;\nexport type TextComponent = ValueOf<typeof TextComponent>;\n\n/**\n * Component props.\n */\nexport interface TextProps extends ComponentProps<'span'>, StylingProps {\n /** Override component. */\n as?: TextComponent;\n /** Color variant. Either from color palette or hex or rgb strings. */\n color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});\n /** Font family. */\n fontFamily?: FontFamily;\n /** Font size. */\n fontSize?: string;\n /** Font weight. */\n fontWeight?: string;\n /** Line height. */\n lineHeight?: string;\n /** Whether the text will truncate with a text overflow ellipsis or wrap. */\n noWrap?: boolean;\n /** Theme. */\n theme?: Theme;\n /** Variant. */\n variant?: TextVariant;\n /** Word break CSS properties */\n wordBreak?: string;\n}\n\nexport interface StyledTextProps extends ComponentProps<'span'>, StylingTransientProps {\n $as: TextProps['as'];\n $color: TextProps['color'];\n $fontFamily?: TextProps['fontFamily'];\n $fontSize: TextProps['fontSize'];\n $fontWeight: TextProps['fontWeight'];\n $lineHeight: TextProps['lineHeight'];\n $noWrap: TextProps['noWrap'];\n $variant: TextProps['variant'];\n $wordBreak?: TextProps['wordBreak'];\n $theme: TextProps['theme'];\n}\n","import styled, { css } from 'styled-components';\nimport { NotificationsColorPalette, NeutralColorPalette, ProductColorPalette } from '../../types';\nimport { baseStyling } from '../shared';\nimport { StyledTextProps, TextComponent, TextVariant } from './types';\n\n/**\n * Component style.\n */\nexport const StyledText = styled.span<StyledTextProps>`\n ${baseStyling}\n\n ${({ $color }) =>\n $color && $color === 'radar'\n ? css`\n background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);\n background-clip: text;\n color: transparent;\n `\n : Object.keys(NotificationsColorPalette).indexOf($color!) !== -1\n ? css`\n color: var(--redsift-color-notifications-${$color}-primary);\n `\n : Object.keys(NeutralColorPalette).indexOf($color!) !== -1\n ? css`\n color: var(--redsift-color-neutral-${$color});\n `\n : Object.keys(ProductColorPalette).indexOf($color!) !== -1\n ? css`\n color: var(--redsift-color-product-${$color});\n `\n : css`\n color: ${$color || css`inherit`};\n `}\n\n ${({ $as }) => css`\n ${$as === TextComponent.i || $as === TextComponent.cite || $as === TextComponent.em\n ? css`\n font-style: italic;\n `\n : $as === TextComponent.sub\n ? css`\n vertical-align: sub;\n `\n : $as === TextComponent.sup\n ? css`\n vertical-align: super;\n `\n : $as === TextComponent.mark\n ? css`\n color: var(--redsift-color-neutral-x-dark-grey);\n `\n : ''}\n `}\n\n ${({ $as, $fontFamily, $fontSize, $fontWeight, $lineHeight, $variant }) =>\n !$variant\n ? css`\n ${$fontFamily\n ? css`\n font-family: var(--redsift-typography-font-family-${$fontFamily});\n `\n : ''}\n ${$fontSize\n ? css`\n font-size: ${$fontSize};\n `\n : ''}\n ${$fontWeight\n ? css`\n font-weight: ${$fontWeight};\n `\n : ''}\n ${$lineHeight\n ? css`\n line-height: ${$lineHeight};\n `\n : ''}\n ${$as === TextComponent.b\n ? css`\n font-weight: ${$fontWeight ? $fontWeight : 'var(--redsift-typography-font-weight-bold)'};\n `\n : $as === TextComponent.sup || $as === TextComponent.sub\n ? css`\n font-size: ${$fontSize ? $fontSize : '12px'};\n `\n : ''}\n `\n : $variant === TextVariant.inherit\n ? css`\n font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`inherit`};\n font-size: ${$fontSize\n ? $fontSize\n : $as === TextComponent.sup || $as === TextComponent.sub\n ? '12px'\n : css`inherit`};\n font-weight: ${$fontWeight\n ? $fontWeight\n : $as === TextComponent.b\n ? 'var(--redsift-typography-font-weight-bold)'\n : 'inherit'};\n line-height: ${$lineHeight ? $lineHeight : css`inherit`};\n text-transform: inherit;\n `\n : css`\n font-family: ${$fontFamily\n ? css`var(--redsift-typography-font-family-${$fontFamily})`\n : css`var(--redsift-typography-${$variant}-font-family)`};\n font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};\n font-weight: ${$fontWeight ? $fontWeight : css`var(--redsift-typography-${$variant}-font-weight)`};\n line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant}-line-height)`};\n text-transform: var(--redsift-typography-${$variant}-text-transform);\n `}\n \n ${({ $noWrap }) =>\n $noWrap\n ? css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `\n : ''}\n\n ${({ $wordBreak }) =>\n $wordBreak\n ? css`\n word-break: ${$wordBreak};\n `\n : ''}\n`;\n"],"names":["TextVariant","body","button","caption","helper","inherit","TextComponent","p","b","i","u","abbr","cite","del","em","ins","kbd","mark","s","samp","sub","sup","StyledText","styled","span","baseStyling","_ref","$color","css","Object","keys","NotificationsColorPalette","indexOf","NeutralColorPalette","ProductColorPalette","_ref2","$as","_ref3","$fontFamily","$fontSize","$fontWeight","$lineHeight","$variant","_ref4","$noWrap","_ref5","$wordBreak"],"mappings":"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"}
@@ -0,0 +1,84 @@
1
+ import styled, { keyframes, css } from 'styled-components';
2
+ import { i as baseStyling, c as baseInternalSpacing } from './styles5.js';
3
+ import { T as Theme } from './colors.js';
4
+
5
+ /**
6
+ * Component style.
7
+ */
8
+ const wave = keyframes`
9
+ 0% {
10
+ -webkit-transform: translateX(-100%);
11
+ -moz-transform: translateX(-100%);
12
+ -ms-transform: translateX(-100%);
13
+ transform: translateX(-100%);
14
+ }
15
+
16
+ 50% {
17
+ -webkit-transform: translateX(100%);
18
+ -moz-transform: translateX(100%);
19
+ -ms-transform: translateX(100%);
20
+ transform: translateX(100%);
21
+ }
22
+
23
+ 100% {
24
+ -webkit-transform: translateX(100%);
25
+ -moz-transform: translateX(100%);
26
+ -ms-transform: translateX(100%);
27
+ transform: translateX(100%);
28
+ }
29
+ `;
30
+ const StyledSkeleton = styled.div`
31
+ height: fit-content;
32
+ width: fit-content;
33
+
34
+ * {
35
+ visibility: hidden;
36
+ }
37
+
38
+ flex: 0 0 auto;
39
+
40
+ ${baseStyling}
41
+ ${baseInternalSpacing}
42
+
43
+ display: block;
44
+ background-color: ${_ref => {
45
+ let {
46
+ $theme
47
+ } = _ref;
48
+ return $theme === Theme.light ? css`rgba(0, 0, 0, 0.16)` : css`rgba(255, 255, 255, 0.16)`;
49
+ }};
50
+ border-radius: 4px;
51
+ position: relative;
52
+ overflow: hidden;
53
+ -webkit-mask-image: -webkit-radial-gradient(white, black);
54
+
55
+ &::after {
56
+ -webkit-animation: ${wave} 1.6s linear 0.5s infinite;
57
+ animation: ${wave} 1.6s linear 0.5s infinite;
58
+ background: linear-gradient(
59
+ 90deg,
60
+ transparent,
61
+ ${_ref2 => {
62
+ let {
63
+ $theme
64
+ } = _ref2;
65
+ return $theme === Theme.light ? css`rgba(0, 0, 0, 0.04)` : css`rgba(255, 255, 255, 0.04)`;
66
+ }},
67
+ transparent
68
+ );
69
+ background-clip: content-box;
70
+ content: '';
71
+ position: absolute;
72
+ -webkit-transform: translateX(-100%);
73
+ -moz-transform: translateX(-100%);
74
+ -ms-transform: translateX(-100%);
75
+ transform: translateX(-100%);
76
+ bottom: 0;
77
+ left: 0;
78
+ right: 0;
79
+ top: 0;
80
+ }
81
+ `;
82
+
83
+ export { StyledSkeleton as S };
84
+ //# sourceMappingURL=styles7.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles7.js","sources":["../../src/components/skeleton/styles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { baseInternalSpacing, baseStyling } from '../shared';\nimport { StyledSkeletonProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nconst wave = keyframes`\n 0% {\n -webkit-transform: translateX(-100%);\n -moz-transform: translateX(-100%);\n -ms-transform: translateX(-100%);\n transform: translateX(-100%);\n }\n\n 50% {\n -webkit-transform: translateX(100%);\n -moz-transform: translateX(100%);\n -ms-transform: translateX(100%);\n transform: translateX(100%);\n }\n\n 100% {\n -webkit-transform: translateX(100%);\n -moz-transform: translateX(100%);\n -ms-transform: translateX(100%);\n transform: translateX(100%);\n }\n`;\n\nexport const StyledSkeleton = styled.div<StyledSkeletonProps>`\n height: fit-content;\n width: fit-content;\n\n * {\n visibility: hidden;\n }\n\n flex: 0 0 auto;\n\n ${baseStyling}\n ${baseInternalSpacing}\n\n display: block;\n background-color: ${({ $theme }) =>\n $theme === Theme.light ? css`rgba(0, 0, 0, 0.16)` : css`rgba(255, 255, 255, 0.16)`};\n border-radius: 4px;\n position: relative;\n overflow: hidden;\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n\n &::after {\n -webkit-animation: ${wave} 1.6s linear 0.5s infinite;\n animation: ${wave} 1.6s linear 0.5s infinite;\n background: linear-gradient(\n 90deg,\n transparent,\n ${({ $theme }) => ($theme === Theme.light ? css`rgba(0, 0, 0, 0.04)` : css`rgba(255, 255, 255, 0.04)`)},\n transparent\n );\n background-clip: content-box;\n content: '';\n position: absolute;\n -webkit-transform: translateX(-100%);\n -moz-transform: translateX(-100%);\n -ms-transform: translateX(-100%);\n transform: translateX(-100%);\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n }\n`;\n"],"names":["wave","keyframes","StyledSkeleton","styled","div","baseStyling","baseInternalSpacing","_ref","$theme","Theme","light","css","_ref2"],"mappings":";;;;AAKA;AACA;AACA;AACA,MAAMA,IAAI,GAAGC,SAAU,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAEYC,MAAAA,cAAc,GAAGC,MAAM,CAACC,GAAyB,CAAA;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,mBAAoB,CAAA;AACxB;AACA;AACA,oBAAA,EAAsBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAC7BC,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAGC,GAAI,CAAA,mBAAA,CAAoB,GAAGA,GAAI,CAA0B,yBAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,uBAAA,EAAyBX,IAAK,CAAA;AAC9B,eAAA,EAAiBA,IAAK,CAAA;AACtB;AACA;AACA;AACA,MAAA,EAAQY,KAAA,IAAA;EAAA,IAAC;AAAEJ,IAAAA,MAAAA;AAAO,GAAC,GAAAI,KAAA,CAAA;EAAA,OAAMJ,MAAM,KAAKC,KAAK,CAACC,KAAK,GAAGC,GAAI,CAAA,mBAAA,CAAoB,GAAGA,GAAI,CAA0B,yBAAA,CAAA,CAAA;AAAA,CAAE,CAAA;AAC7G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
package/_internal/text.js CHANGED
@@ -1,3 +1,3 @@
1
- export { a as TextComponent, T as TextVariant } from './styles5.js';
1
+ export { a as TextComponent, T as TextVariant } from './styles6.js';
2
2
  export { T as Text } from './Text2.js';
3
3
  //# sourceMappingURL=text.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"types2.js","sources":["../../src/components/heading/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { FontFamily, NeutralColorPalette, NotificationsColorPalette, Theme, ValueOf } from '../../types';\nimport { StylingProps } from '../../types';\n\n/**\n * Component variant.\n */\nexport const HeadingVariant = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n body: 'body',\n} as const;\nexport type HeadingVariant = ValueOf<typeof HeadingVariant>;\n\nexport const HeadingComponent = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n span: 'span',\n} as const;\nexport type HeadingComponent = ValueOf<typeof HeadingComponent>;\n\n/**\n * Component props.\n */\nexport interface HeadingProps extends ComponentProps<'span'>, StylingProps {\n /** The actual component rendered in the DOM. */\n as: HeadingComponent;\n /** Color variant. Either from color palette or hex or rgb strings. */\n color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});\n /** Font family. */\n fontFamily?: FontFamily;\n /** Font size. */\n fontSize?: string;\n /** Font weight. */\n fontWeight?: string;\n /** Line height. */\n lineHeight?: string;\n /** Whether the text will truncate with a text overflow ellipsis or wrap. */\n noWrap?: boolean;\n /** Theme. */\n theme?: Theme;\n /** The component the Heading will look like. */\n variant?: HeadingVariant;\n}\n\nexport type StyledHeadingProps = Omit<HeadingProps, 'color' | 'noWrap'> & {\n $color: HeadingProps['color'];\n $fontFamily?: HeadingProps['fontFamily'];\n $fontSize: HeadingProps['fontSize'];\n $fontWeight: HeadingProps['fontWeight'];\n $lineHeight: HeadingProps['lineHeight'];\n $noWrap: HeadingProps['noWrap'];\n $theme: HeadingProps['theme'];\n $variant: HeadingProps['variant'];\n};\n"],"names":["HeadingVariant","h1","h2","h3","h4","h5","body","HeadingComponent","span"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,cAAc,GAAG;AAC5BC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,IAAI,EAAE,MAAA;AACR,EAAU;AAGH,MAAMC,gBAAgB,GAAG;AAC9BN,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRG,EAAAA,IAAI,EAAE,MAAA;AACR,EAAU;;AAGV;AACA;AACA;;;;"}
1
+ {"version":3,"file":"types2.js","sources":["../../src/components/heading/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { FontFamily, NeutralColorPalette, NotificationsColorPalette, Theme, ValueOf } from '../../types';\nimport { StylingProps, StylingTransientProps } from '../../types';\n\n/**\n * Component variant.\n */\nexport const HeadingVariant = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n body: 'body',\n} as const;\nexport type HeadingVariant = ValueOf<typeof HeadingVariant>;\n\nexport const HeadingComponent = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n span: 'span',\n} as const;\nexport type HeadingComponent = ValueOf<typeof HeadingComponent>;\n\n/**\n * Component props.\n */\nexport interface HeadingProps extends ComponentProps<'span'>, StylingProps {\n /** The actual component rendered in the DOM. */\n as: HeadingComponent;\n /** Color variant. Either from color palette or hex or rgb strings. */\n color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});\n /** Font family. */\n fontFamily?: FontFamily;\n /** Font size. */\n fontSize?: string;\n /** Font weight. */\n fontWeight?: string;\n /** Line height. */\n lineHeight?: string;\n /** Whether the text will truncate with a text overflow ellipsis or wrap. */\n noWrap?: boolean;\n /** Theme. */\n theme?: Theme;\n /** The component the Heading will look like. */\n variant?: HeadingVariant;\n}\n\nexport interface StyledHeadingProps extends ComponentProps<'span'>, StylingTransientProps {\n $color: HeadingProps['color'];\n $fontFamily?: HeadingProps['fontFamily'];\n $fontSize: HeadingProps['fontSize'];\n $fontWeight: HeadingProps['fontWeight'];\n $lineHeight: HeadingProps['lineHeight'];\n $noWrap: HeadingProps['noWrap'];\n $theme: HeadingProps['theme'];\n $variant: HeadingProps['variant'];\n}\n"],"names":["HeadingVariant","h1","h2","h3","h4","h5","body","HeadingComponent","span"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,cAAc,GAAG;AAC5BC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,IAAI,EAAE,MAAA;AACR,EAAU;AAGH,MAAMC,gBAAgB,GAAG;AAC9BN,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,EAAE,EAAE,IAAI;AACRG,EAAAA,IAAI,EAAE,MAAA;AACR,EAAU;;AAGV;AACA;AACA;;;;"}
@@ -1,4 +1,4 @@
1
- import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
1
+ import { a as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
2
2
  import React__default, { useReducer, useEffect, useMemo, useContext, useCallback } from 'react';
3
3
  import { F as FocusWithinGroupActionType, N as Navigation, E as EventKey, a as FOCUS_WITHING_GROUP_INITIAL_STATE, b as FocusWithinGroupContext } from './useFocusOnListItem.js';
4
4
 
@@ -1,5 +1,5 @@
1
1
  import React__default, { useRef, useCallback, useEffect, useState } from 'react';
2
- import { a as _defineProperty } from './_rollupPluginBabelHelpers.js';
2
+ import { _ as _defineProperty } from './_rollupPluginBabelHelpers.js';
3
3
 
4
4
  /*
5
5
  * Copyright 2020 Adobe. All rights reserved.
@@ -1 +1 @@
1
- {"version":3,"file":"useListboxItem.js","sources":["../../src/components/listbox/context.ts","../../src/components/listbox/types.ts","../../src/components/listbox/useListboxItem.ts"],"sourcesContent":["import React from 'react';\nimport { ListboxContextProps, ListboxState } from './types';\n\nexport const LISTBOX_INITIAL_STATE: ListboxState = {\n isDisabled: false,\n isReadOnly: false,\n selectedValues: [],\n selectionMode: 'single',\n};\n\nexport const ListboxContext = React.createContext<ListboxContextProps>({\n state: LISTBOX_INITIAL_STATE,\n dispatch: () => {},\n});\n","import { ComponentProps } from 'react';\nimport { ContainerProps, ValueOf } from '../../types';\nimport { FocusWithinGroupOptions, UseFocusWithinGroupProps } from '../focus-within-group';\n\n/**\n * Component variant.\n */\nexport const ListboxSelectionMode = {\n single: 'single',\n multiple: 'multiple',\n} as const;\nexport type ListboxSelectionMode = ValueOf<typeof ListboxSelectionMode>;\n\n/**\n * Context props.\n */\n\nexport type ListboxState = Readonly<{\n isDisabled: boolean;\n isReadOnly: boolean;\n selectedValues: string[];\n selectionMode: ListboxSelectionMode;\n activedescendant?: [string, string];\n}>;\n\nexport enum ListboxActionType {\n TOGGLE = 'TOGGLE',\n SET = 'SET',\n UPDATE_OPTIONS = 'UPDATE_OPTIONS',\n}\n\nexport type ListboxAction =\n | {\n type: ListboxActionType.TOGGLE;\n payload: { value: string; activedescendant?: [string, string] };\n }\n | {\n type: ListboxActionType.SET;\n payload: { values: string[]; activedescendant?: [string, string] };\n }\n | {\n type: ListboxActionType.UPDATE_OPTIONS;\n payload: { isDisabled: boolean };\n };\n\nexport type UseListboxItemProps = UseFocusWithinGroupProps & {\n isSelected?: boolean;\n isDisabled?: boolean;\n};\n\nexport type ListboxContextProps = {\n state: ListboxState;\n dispatch: React.Dispatch<ListboxAction>;\n};\n\n/**\n * Component variant.\n */\nexport const ListboxVariant = {\n standalone: 'standalone',\n unstyled: 'unstyled',\n} as const;\nexport type ListboxVariant = ValueOf<typeof ListboxVariant>;\n\n/**\n * Component props.\n */\nexport interface ListboxProps extends Omit<ComponentProps<'div'>, 'onChange'>, ContainerProps, FocusWithinGroupOptions {\n /**\n * Default selected values.\n * Used for uncontrolled version.\n */\n defaultValues?: string[];\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the component is invalid or not. */\n isInvalid?: boolean;\n /** Whether the component is read only or not. */\n isReadOnly?: boolean;\n /** Whether the component is required or not. */\n isRequired?: boolean;\n /** Label of the switch group. */\n label?: string;\n /** Method to handle component change. */\n onChange?(values: string[]): void;\n /** Whether the listbox allows multiple selections or single ones. */\n selectionMode?: 'single' | 'multiple';\n /**\n * Currently selected values.\n * Used for controlled version.\n */\n values?: string[];\n /** Whether the Listbox is used as standalone or is unstyled within another component. */\n variant?: ListboxVariant;\n}\n\nexport type StyledListboxProps = Omit<ListboxProps, 'onChange'> & {\n $isDisabled: ListboxProps['isDisabled'];\n $isInvalid: ListboxProps['isInvalid'];\n $isReadOnly: ListboxProps['isReadOnly'];\n $variant: ListboxProps['variant'];\n};\n","import { useCallback, useContext, useEffect, RefObject, KeyboardEvent } from 'react';\nimport { ListboxContext } from './context';\nimport { ListboxActionType, UseListboxItemProps } from './types';\nimport { useFocusOnListItem } from '../focus-within-group';\n\nexport function useListboxItem(props: {\n domElementRef: RefObject<Element>;\n value: string;\n id?: string;\n isDisabled?: boolean;\n propsIsSelected?: boolean;\n}): UseListboxItemProps {\n const { domElementRef, value, id, isDisabled, propsIsSelected } = props;\n\n const {\n tabIndex,\n isFocused,\n handleKeyDown: handleFocusKeyDown,\n handleClick: handleFocusClick,\n } = useFocusOnListItem({ domElementRef, isDisabled: isDisabled!, id, value });\n\n const context = useContext(ListboxContext);\n\n const handleKeyDown = useCallback((event: KeyboardEvent) => {\n handleFocusKeyDown(event);\n const code = event.code;\n if (code === 'Enter' || code === 'Space') {\n if (context.state.selectionMode === 'multiple') {\n context.dispatch({\n type: ListboxActionType.TOGGLE,\n payload: { value, activedescendant: [id!, value] },\n });\n } else {\n context.dispatch({\n type: ListboxActionType.SET,\n payload: {\n values: [value],\n activedescendant: [id!, value],\n },\n });\n }\n }\n }, []);\n\n const handleClick = useCallback(() => {\n handleFocusClick();\n if (context.state.selectionMode === 'multiple') {\n if (value) {\n context.dispatch({\n type: ListboxActionType.TOGGLE,\n payload: { value, activedescendant: [id!, value] },\n });\n }\n } else {\n context.dispatch({\n type: ListboxActionType.SET,\n payload: {\n values: [value],\n activedescendant: [id!, value],\n },\n });\n }\n }, [value]);\n\n const isSelected =\n propsIsSelected ?? context?.state?.selectedValues?.find((selectedValue) => selectedValue === value) !== undefined;\n\n useEffect(() => {\n if (isFocused && domElementRef.current) {\n (domElementRef as RefObject<SVGElement | HTMLElement>).current?.focus();\n }\n }, [isFocused]);\n\n return {\n tabIndex,\n isFocused,\n isSelected,\n isDisabled,\n handleKeyDown,\n handleClick,\n };\n}\n"],"names":["LISTBOX_INITIAL_STATE","isDisabled","isReadOnly","selectedValues","selectionMode","ListboxContext","React","createContext","state","dispatch","ListboxSelectionMode","single","multiple","ListboxActionType","ListboxVariant","standalone","unstyled","useListboxItem","props","_context$state","_context$state$select","domElementRef","value","id","propsIsSelected","tabIndex","isFocused","handleKeyDown","handleFocusKeyDown","handleClick","handleFocusClick","useFocusOnListItem","context","useContext","useCallback","event","code","type","TOGGLE","payload","activedescendant","SET","values","isSelected","find","selectedValue","undefined","useEffect","current","_current","focus"],"mappings":"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"}
1
+ {"version":3,"file":"useListboxItem.js","sources":["../../src/components/listbox/context.ts","../../src/components/listbox/types.ts","../../src/components/listbox/useListboxItem.ts"],"sourcesContent":["import React from 'react';\nimport { ListboxContextProps, ListboxState } from './types';\n\nexport const LISTBOX_INITIAL_STATE: ListboxState = {\n isDisabled: false,\n isReadOnly: false,\n selectedValues: [],\n selectionMode: 'single',\n};\n\nexport const ListboxContext = React.createContext<ListboxContextProps>({\n state: LISTBOX_INITIAL_STATE,\n dispatch: () => {},\n});\n","import { ComponentProps } from 'react';\nimport { ContainerProps, ContainerTransientProps, ValueOf } from '../../types';\nimport { FocusWithinGroupOptions, UseFocusWithinGroupProps } from '../focus-within-group';\n\n/**\n * Component variant.\n */\nexport const ListboxSelectionMode = {\n single: 'single',\n multiple: 'multiple',\n} as const;\nexport type ListboxSelectionMode = ValueOf<typeof ListboxSelectionMode>;\n\n/**\n * Context props.\n */\n\nexport type ListboxState = Readonly<{\n isDisabled: boolean;\n isReadOnly: boolean;\n selectedValues: string[];\n selectionMode: ListboxSelectionMode;\n activedescendant?: [string, string];\n}>;\n\nexport enum ListboxActionType {\n TOGGLE = 'TOGGLE',\n SET = 'SET',\n UPDATE_OPTIONS = 'UPDATE_OPTIONS',\n}\n\nexport type ListboxAction =\n | {\n type: ListboxActionType.TOGGLE;\n payload: { value: string; activedescendant?: [string, string] };\n }\n | {\n type: ListboxActionType.SET;\n payload: { values: string[]; activedescendant?: [string, string] };\n }\n | {\n type: ListboxActionType.UPDATE_OPTIONS;\n payload: { isDisabled: boolean };\n };\n\nexport type UseListboxItemProps = UseFocusWithinGroupProps & {\n isSelected?: boolean;\n isDisabled?: boolean;\n};\n\nexport type ListboxContextProps = {\n state: ListboxState;\n dispatch: React.Dispatch<ListboxAction>;\n};\n\n/**\n * Component variant.\n */\nexport const ListboxVariant = {\n standalone: 'standalone',\n unstyled: 'unstyled',\n} as const;\nexport type ListboxVariant = ValueOf<typeof ListboxVariant>;\n\n/**\n * Component props.\n */\nexport interface ListboxProps extends Omit<ComponentProps<'div'>, 'onChange'>, ContainerProps, FocusWithinGroupOptions {\n /**\n * Default selected values.\n * Used for uncontrolled version.\n */\n defaultValues?: string[];\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the component is invalid or not. */\n isInvalid?: boolean;\n /** Whether the component is read only or not. */\n isReadOnly?: boolean;\n /** Whether the component is required or not. */\n isRequired?: boolean;\n /** Label of the switch group. */\n label?: string;\n /** Method to handle component change. */\n onChange?(values: string[]): void;\n /** Whether the listbox allows multiple selections or single ones. */\n selectionMode?: 'single' | 'multiple';\n /**\n * Currently selected values.\n * Used for controlled version.\n */\n values?: string[];\n /** Whether the Listbox is used as standalone or is unstyled within another component. */\n variant?: ListboxVariant;\n}\n\nexport interface StyledListboxProps extends ComponentProps<'div'>, ContainerTransientProps {\n $isDisabled: ListboxProps['isDisabled'];\n $isInvalid: ListboxProps['isInvalid'];\n $isReadOnly: ListboxProps['isReadOnly'];\n $variant: ListboxProps['variant'];\n}\n","import { useCallback, useContext, useEffect, RefObject, KeyboardEvent } from 'react';\nimport { ListboxContext } from './context';\nimport { ListboxActionType, UseListboxItemProps } from './types';\nimport { useFocusOnListItem } from '../focus-within-group';\n\nexport function useListboxItem(props: {\n domElementRef: RefObject<Element>;\n value: string;\n id?: string;\n isDisabled?: boolean;\n propsIsSelected?: boolean;\n}): UseListboxItemProps {\n const { domElementRef, value, id, isDisabled, propsIsSelected } = props;\n\n const {\n tabIndex,\n isFocused,\n handleKeyDown: handleFocusKeyDown,\n handleClick: handleFocusClick,\n } = useFocusOnListItem({ domElementRef, isDisabled: isDisabled!, id, value });\n\n const context = useContext(ListboxContext);\n\n const handleKeyDown = useCallback((event: KeyboardEvent) => {\n handleFocusKeyDown(event);\n const code = event.code;\n if (code === 'Enter' || code === 'Space') {\n if (context.state.selectionMode === 'multiple') {\n context.dispatch({\n type: ListboxActionType.TOGGLE,\n payload: { value, activedescendant: [id!, value] },\n });\n } else {\n context.dispatch({\n type: ListboxActionType.SET,\n payload: {\n values: [value],\n activedescendant: [id!, value],\n },\n });\n }\n }\n }, []);\n\n const handleClick = useCallback(() => {\n handleFocusClick();\n if (context.state.selectionMode === 'multiple') {\n if (value) {\n context.dispatch({\n type: ListboxActionType.TOGGLE,\n payload: { value, activedescendant: [id!, value] },\n });\n }\n } else {\n context.dispatch({\n type: ListboxActionType.SET,\n payload: {\n values: [value],\n activedescendant: [id!, value],\n },\n });\n }\n }, [value]);\n\n const isSelected =\n propsIsSelected ?? context?.state?.selectedValues?.find((selectedValue) => selectedValue === value) !== undefined;\n\n useEffect(() => {\n if (isFocused && domElementRef.current) {\n (domElementRef as RefObject<SVGElement | HTMLElement>).current?.focus();\n }\n }, [isFocused]);\n\n return {\n tabIndex,\n isFocused,\n isSelected,\n isDisabled,\n handleKeyDown,\n handleClick,\n };\n}\n"],"names":["LISTBOX_INITIAL_STATE","isDisabled","isReadOnly","selectedValues","selectionMode","ListboxContext","React","createContext","state","dispatch","ListboxSelectionMode","single","multiple","ListboxActionType","ListboxVariant","standalone","unstyled","useListboxItem","props","_context$state","_context$state$select","domElementRef","value","id","propsIsSelected","tabIndex","isFocused","handleKeyDown","handleFocusKeyDown","handleClick","handleFocusClick","useFocusOnListItem","context","useContext","useCallback","event","code","type","TOGGLE","payload","activedescendant","SET","values","isSelected","find","selectedValue","undefined","useEffect","current","_current","focus"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { u as useLocale } from './context.js';
2
2
  import { useMemo } from 'react';
3
- import { a as _defineProperty } from './_rollupPluginBabelHelpers.js';
3
+ import { _ as _defineProperty } from './_rollupPluginBabelHelpers.js';
4
4
 
5
5
  /* eslint-disable prefer-const */
6
6
  // @ts-nocheck
@@ -1,6 +1,6 @@
1
1
  import { useMemo, useCallback } from 'react';
2
2
  import { u as useLocale } from './context.js';
3
- import { a as _defineProperty } from './_rollupPluginBabelHelpers.js';
3
+ import { _ as _defineProperty } from './_rollupPluginBabelHelpers.js';
4
4
  import IntlMessageFormat from 'intl-messageformat';
5
5
 
6
6
  /* eslint-disable prefer-const */
@@ -1,6 +1,6 @@
1
1
  import { u as useLocale } from './context.js';
2
2
  import { useMemo } from 'react';
3
- import { a as _defineProperty, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
3
+ import { _ as _defineProperty, a as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
4
4
 
5
5
  /* eslint-disable prefer-const */
6
6
  // @ts-nocheck