@redsift/design-system 11.5.0 → 11.6.0-alpha.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.
- package/_internal/Alert2.js +197 -0
- package/_internal/Alert2.js.map +1 -0
- package/_internal/AppBar.js +248 -0
- package/_internal/AppBar.js.map +1 -0
- package/_internal/AppContainer.js +142 -0
- package/_internal/AppContainer.js.map +1 -0
- package/_internal/AppContent.js +92 -0
- package/_internal/AppContent.js.map +1 -0
- package/_internal/Badge2.js +142 -0
- package/_internal/Badge2.js.map +1 -0
- package/_internal/BreadcrumbItem.js +91 -0
- package/_internal/BreadcrumbItem.js.map +1 -0
- package/_internal/Breadcrumbs2.js +94 -0
- package/_internal/Breadcrumbs2.js.map +1 -0
- package/_internal/Button2.js +91 -0
- package/_internal/Button2.js.map +1 -0
- package/_internal/ButtonGroup.js +181 -0
- package/_internal/ButtonGroup.js.map +1 -0
- package/_internal/ButtonLink.js +84 -0
- package/_internal/ButtonLink.js.map +1 -0
- package/_internal/Card2.js +157 -0
- package/_internal/Card2.js.map +1 -0
- package/_internal/CardActions.js +44 -0
- package/_internal/CardActions.js.map +1 -0
- package/_internal/CardBody.js +42 -0
- package/_internal/CardBody.js.map +1 -0
- package/_internal/CardHeader.js +83 -0
- package/_internal/CardHeader.js.map +1 -0
- package/_internal/Checkbox2.js +244 -0
- package/_internal/Checkbox2.js.map +1 -0
- package/_internal/CheckboxGroup.js +188 -0
- package/_internal/CheckboxGroup.js.map +1 -0
- package/_internal/ConditionalWrapper.js +13 -0
- package/_internal/ConditionalWrapper.js.map +1 -0
- package/_internal/DetailedCard.js +6916 -0
- package/_internal/DetailedCard.js.map +1 -0
- package/_internal/DetailedCardCollapsibleSectionItems.js +64 -0
- package/_internal/DetailedCardCollapsibleSectionItems.js.map +1 -0
- package/_internal/DetailedCardHeader.js +67 -0
- package/_internal/DetailedCardHeader.js.map +1 -0
- package/_internal/DetailedCardSection.js +172 -0
- package/_internal/DetailedCardSection.js.map +1 -0
- package/_internal/DetailedCardSectionItem.js +94 -0
- package/_internal/DetailedCardSectionItem.js.map +1 -0
- package/_internal/Flexbox2.js +93 -0
- package/_internal/Flexbox2.js.map +1 -0
- package/_internal/Grid2.js +95 -0
- package/_internal/Grid2.js.map +1 -0
- package/_internal/GridItem.js +40 -0
- package/_internal/GridItem.js.map +1 -0
- package/_internal/Heading2.js +113 -0
- package/_internal/Heading2.js.map +1 -0
- package/_internal/Icon2.js +211 -0
- package/_internal/Icon2.js.map +1 -0
- package/_internal/IconButton.js +80 -0
- package/_internal/IconButton.js.map +1 -0
- package/_internal/IconButtonLink.js +75 -0
- package/_internal/IconButtonLink.js.map +1 -0
- package/_internal/Item2.js +399 -0
- package/_internal/Item2.js.map +1 -0
- package/_internal/Link2.js +67 -0
- package/_internal/Link2.js.map +1 -0
- package/_internal/LinkButton.js +66 -0
- package/_internal/LinkButton.js.map +1 -0
- package/_internal/Listbox2.js +274 -0
- package/_internal/Listbox2.js.map +1 -0
- package/_internal/Number2.js +111 -0
- package/_internal/Number2.js.map +1 -0
- package/_internal/NumberField.js +3974 -0
- package/_internal/NumberField.js.map +1 -0
- package/_internal/Pill2.js +405 -0
- package/_internal/Pill2.js.map +1 -0
- package/_internal/ProgressBar.js +69 -0
- package/_internal/ProgressBar.js.map +1 -0
- package/_internal/Radio2.js +237 -0
- package/_internal/Radio2.js.map +1 -0
- package/_internal/RadioGroup.js +176 -0
- package/_internal/RadioGroup.js.map +1 -0
- package/_internal/Shield2.js +225 -0
- package/_internal/Shield2.js.map +1 -0
- package/_internal/SideNavigationMenu.js +591 -0
- package/_internal/SideNavigationMenu.js.map +1 -0
- package/_internal/SideNavigationMenuItem.js +304 -0
- package/_internal/SideNavigationMenuItem.js.map +1 -0
- package/_internal/Skeleton2.js +42 -0
- package/_internal/Skeleton2.js.map +1 -0
- package/_internal/SkeletonCircle.js +58 -0
- package/_internal/SkeletonCircle.js.map +1 -0
- package/_internal/SkeletonText.js +77 -0
- package/_internal/SkeletonText.js.map +1 -0
- package/_internal/Spinner2.js +333 -0
- package/_internal/Spinner2.js.map +1 -0
- package/_internal/Switch2.js +320 -0
- package/_internal/Switch2.js.map +1 -0
- package/_internal/SwitchGroup.js +188 -0
- package/_internal/SwitchGroup.js.map +1 -0
- package/_internal/Text2.js +51 -0
- package/_internal/Text2.js.map +1 -0
- package/_internal/TextArea.js +444 -0
- package/_internal/TextArea.js.map +1 -0
- package/_internal/TextField.js +473 -0
- package/_internal/TextField.js.map +1 -0
- package/_internal/_rollupPluginBabelHelpers.js +133 -0
- package/_internal/_rollupPluginBabelHelpers.js.map +1 -0
- package/_internal/alert.js +2 -0
- package/_internal/alert.js.map +1 -0
- package/_internal/app-bar.js +2 -0
- package/_internal/app-bar.js.map +1 -0
- package/_internal/app-container.js +3 -0
- package/_internal/app-container.js.map +1 -0
- package/_internal/app-content.js +2 -0
- package/_internal/app-content.js.map +1 -0
- package/_internal/app-side-panel.js +3 -0
- package/_internal/app-side-panel.js.map +1 -0
- package/_internal/badge.js +2 -0
- package/_internal/badge.js.map +1 -0
- package/_internal/breadcrumb-item.js +2 -0
- package/_internal/breadcrumb-item.js.map +1 -0
- package/_internal/breadcrumbs.js +2 -0
- package/_internal/breadcrumbs.js.map +1 -0
- package/_internal/button-group.js +2 -0
- package/_internal/button-group.js.map +1 -0
- package/_internal/button-link.js +2 -0
- package/_internal/button-link.js.map +1 -0
- package/_internal/button.js +3 -0
- package/_internal/button.js.map +1 -0
- package/_internal/card-actions.js +2 -0
- package/_internal/card-actions.js.map +1 -0
- package/_internal/card-body.js +2 -0
- package/_internal/card-body.js.map +1 -0
- package/_internal/card-header.js +2 -0
- package/_internal/card-header.js.map +1 -0
- package/_internal/card.js +2 -0
- package/_internal/card.js.map +1 -0
- package/_internal/checkbox-group.js +2 -0
- package/_internal/checkbox-group.js.map +1 -0
- package/_internal/checkbox.js +2 -0
- package/_internal/checkbox.js.map +1 -0
- package/_internal/colors.js +98 -0
- package/_internal/colors.js.map +1 -0
- package/_internal/conditional-wrapper.js +2 -0
- package/_internal/conditional-wrapper.js.map +1 -0
- package/_internal/context.js +6 -0
- package/_internal/context.js.map +1 -0
- package/_internal/context2.js +300 -0
- package/_internal/context2.js.map +1 -0
- package/_internal/context3.js +6 -0
- package/_internal/context3.js.map +1 -0
- package/_internal/context4.js +6 -0
- package/_internal/context4.js.map +1 -0
- package/_internal/context5.js +6 -0
- package/_internal/context5.js.map +1 -0
- package/_internal/detailed-card-collapsible-section-items.js +2 -0
- package/_internal/detailed-card-collapsible-section-items.js.map +1 -0
- package/_internal/detailed-card-header.js +2 -0
- package/_internal/detailed-card-header.js.map +1 -0
- package/_internal/detailed-card-section-item.js +2 -0
- package/_internal/detailed-card-section-item.js.map +1 -0
- package/_internal/detailed-card-section.js +2 -0
- package/_internal/detailed-card-section.js.map +1 -0
- package/_internal/detailed-card.js +2 -0
- package/_internal/detailed-card.js.map +1 -0
- package/_internal/filterComponents.js +24 -0
- package/_internal/filterComponents.js.map +1 -0
- package/_internal/flexbox.js +2 -0
- package/_internal/flexbox.js.map +1 -0
- package/_internal/focus-within-group.js +3 -0
- package/_internal/focus-within-group.js.map +1 -0
- package/_internal/fonts.js +10 -0
- package/_internal/fonts.js.map +1 -0
- package/_internal/gradient-border.js +38 -0
- package/_internal/gradient-border.js.map +1 -0
- package/_internal/grid-item.js +2 -0
- package/_internal/grid-item.js.map +1 -0
- package/_internal/grid.js +2 -0
- package/_internal/grid.js.map +1 -0
- package/_internal/heading.js +3 -0
- package/_internal/heading.js.map +1 -0
- package/_internal/icon-button-link.js +2 -0
- package/_internal/icon-button-link.js.map +1 -0
- package/_internal/icon-button.js +3 -0
- package/_internal/icon-button.js.map +1 -0
- package/_internal/icon.js +2 -0
- package/_internal/icon.js.map +1 -0
- package/_internal/isComponent.js +15 -0
- package/_internal/isComponent.js.map +1 -0
- package/_internal/item.js +2 -0
- package/_internal/item.js.map +1 -0
- package/_internal/link-button.js +2 -0
- package/_internal/link-button.js.map +1 -0
- package/_internal/link.js +3 -0
- package/_internal/link.js.map +1 -0
- package/_internal/listbox.js +3 -0
- package/_internal/listbox.js.map +1 -0
- package/_internal/number-field.js +2 -0
- package/_internal/number-field.js.map +1 -0
- package/_internal/number.js +2 -0
- package/_internal/number.js.map +1 -0
- package/_internal/partitionComponents.js +26 -0
- package/_internal/partitionComponents.js.map +1 -0
- package/_internal/pill.js +2 -0
- package/_internal/pill.js.map +1 -0
- package/_internal/progress-bar.js +2 -0
- package/_internal/progress-bar.js.map +1 -0
- package/_internal/radio-group.js +2 -0
- package/_internal/radio-group.js.map +1 -0
- package/_internal/radio.js +2 -0
- package/_internal/radio.js.map +1 -0
- package/_internal/redsift-design-tokens.js +1391 -0
- package/_internal/redsift-design-tokens.js.map +1 -0
- package/_internal/shared.js +2 -0
- package/_internal/shared.js.map +1 -0
- package/_internal/shield.js +2 -0
- package/_internal/shield.js.map +1 -0
- package/_internal/side-navigation-menu-bar.js +3 -0
- package/_internal/side-navigation-menu-bar.js.map +1 -0
- package/_internal/side-navigation-menu-item.js +2 -0
- package/_internal/side-navigation-menu-item.js.map +1 -0
- package/_internal/side-navigation-menu.js +2 -0
- package/_internal/side-navigation-menu.js.map +1 -0
- package/_internal/skeleton-circle.js +2 -0
- package/_internal/skeleton-circle.js.map +1 -0
- package/_internal/skeleton-text.js +3 -0
- package/_internal/skeleton-text.js.map +1 -0
- package/_internal/skeleton.js +2 -0
- package/_internal/skeleton.js.map +1 -0
- package/_internal/spinner.js +2 -0
- package/_internal/spinner.js.map +1 -0
- package/_internal/styles.js +235 -0
- package/_internal/styles.js.map +1 -0
- package/_internal/styles2.js +47 -0
- package/_internal/styles2.js.map +1 -0
- package/_internal/styles3.js +145 -0
- package/_internal/styles3.js.map +1 -0
- package/_internal/styles4.js +250 -0
- package/_internal/styles4.js.map +1 -0
- package/_internal/styles5.js +143 -0
- package/_internal/styles5.js.map +1 -0
- package/_internal/styles6.js +84 -0
- package/_internal/styles6.js.map +1 -0
- package/_internal/switch-group.js +2 -0
- package/_internal/switch-group.js.map +1 -0
- package/_internal/switch.js +2 -0
- package/_internal/switch.js.map +1 -0
- package/_internal/text-area.js +2 -0
- package/_internal/text-area.js.map +1 -0
- package/_internal/text-field.js +2 -0
- package/_internal/text-field.js.map +1 -0
- package/_internal/text.js +3 -0
- package/_internal/text.js.map +1 -0
- package/_internal/theme.js +2 -0
- package/_internal/theme.js.map +1 -0
- package/_internal/types.js +15 -0
- package/_internal/types.js.map +1 -0
- package/_internal/types2.js +26 -0
- package/_internal/types2.js.map +1 -0
- package/_internal/types3.js +20 -0
- package/_internal/types3.js.map +1 -0
- package/_internal/useAppSidePanel.js +337 -0
- package/_internal/useAppSidePanel.js.map +1 -0
- package/_internal/useFocusOnList.js +541 -0
- package/_internal/useFocusOnList.js.map +1 -0
- package/_internal/useFocusOnListItem.js +203 -0
- package/_internal/useFocusOnListItem.js.map +1 -0
- package/_internal/useFocusRing.js +669 -0
- package/_internal/useFocusRing.js.map +1 -0
- package/_internal/useId.js +42 -0
- package/_internal/useId.js.map +1 -0
- package/_internal/useIsLoaded.js +14 -0
- package/_internal/useIsLoaded.js.map +1 -0
- package/_internal/useListboxItem.js +129 -0
- package/_internal/useListboxItem.js.map +1 -0
- package/_internal/useMessageFormatter.js +143 -0
- package/_internal/useMessageFormatter.js.map +1 -0
- package/_internal/useNumberFormatter.js +239 -0
- package/_internal/useNumberFormatter.js.map +1 -0
- package/_internal/useSideNavigationMenuBar.js +373 -0
- package/_internal/useSideNavigationMenuBar.js.map +1 -0
- package/_internal/useTheme.js +15 -0
- package/_internal/useTheme.js.map +1 -0
- package/_internal/warnIfNoAccessibleLabelFound.js +20 -0
- package/_internal/warnIfNoAccessibleLabelFound.js.map +1 -0
- package/index.js +315 -24243
- package/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
import { css } from 'styled-components';
|
|
2
|
+
|
|
3
|
+
const baseLayout = css`
|
|
4
|
+
${_ref => {
|
|
5
|
+
let {
|
|
6
|
+
flex,
|
|
7
|
+
flexGrow,
|
|
8
|
+
flexShrink,
|
|
9
|
+
flexBasis,
|
|
10
|
+
alignSelf,
|
|
11
|
+
justifySelf,
|
|
12
|
+
order,
|
|
13
|
+
gridArea,
|
|
14
|
+
gridColumn,
|
|
15
|
+
gridRow,
|
|
16
|
+
gridColumnStart,
|
|
17
|
+
gridColumnEnd,
|
|
18
|
+
gridRowStart,
|
|
19
|
+
gridRowEnd
|
|
20
|
+
} = _ref;
|
|
21
|
+
return css`
|
|
22
|
+
${flex ? `flex: ${flex};` : ''}
|
|
23
|
+
${flexGrow !== undefined ? `flex-grow: ${flexGrow};` : ''}
|
|
24
|
+
${flexShrink !== undefined ? `flex-shrink: ${flexShrink};` : ''}
|
|
25
|
+
${flexBasis ? `flex-basis: ${flexBasis};` : ''}
|
|
26
|
+
${alignSelf ? `align-self: ${alignSelf};` : ''}
|
|
27
|
+
${justifySelf ? `justify-self: ${justifySelf};` : ''}
|
|
28
|
+
${order !== undefined ? `order: ${order};` : ''}
|
|
29
|
+
${gridArea ? `grid-area: ${gridArea};` : ''}
|
|
30
|
+
${gridColumn ? `grid-column: ${gridColumn};` : ''}
|
|
31
|
+
${gridRow ? `grid-row: ${gridRow};` : ''}
|
|
32
|
+
${gridColumnStart ? `grid-column-start: ${gridColumnStart};` : ''}
|
|
33
|
+
${gridColumnEnd ? `grid-column-end: ${gridColumnEnd};` : ''}
|
|
34
|
+
${gridRowStart ? `grid-row-start: ${gridRowStart};` : ''}
|
|
35
|
+
${gridRowEnd ? `grid-row-end: ${gridRowEnd};` : ''}
|
|
36
|
+
`;
|
|
37
|
+
}}
|
|
38
|
+
`;
|
|
39
|
+
const baseSpacing = css`
|
|
40
|
+
${_ref2 => {
|
|
41
|
+
let {
|
|
42
|
+
margin,
|
|
43
|
+
marginBottom,
|
|
44
|
+
marginLeft,
|
|
45
|
+
marginRight,
|
|
46
|
+
marginTop
|
|
47
|
+
} = _ref2;
|
|
48
|
+
return css`
|
|
49
|
+
${margin ? `margin: ${margin};` : ''}
|
|
50
|
+
${marginBottom ? `margin-bottom: ${marginBottom};` : ''}
|
|
51
|
+
${marginLeft ? `margin-left: ${marginLeft};` : ''}
|
|
52
|
+
${marginRight ? `margin-right: ${marginRight};` : ''}
|
|
53
|
+
${marginTop ? `margin-top: ${marginTop};` : ''}
|
|
54
|
+
`;
|
|
55
|
+
}}
|
|
56
|
+
`;
|
|
57
|
+
const baseInternalSpacing = css`
|
|
58
|
+
${_ref3 => {
|
|
59
|
+
let {
|
|
60
|
+
padding,
|
|
61
|
+
paddingBottom,
|
|
62
|
+
paddingLeft,
|
|
63
|
+
paddingRight,
|
|
64
|
+
paddingTop
|
|
65
|
+
} = _ref3;
|
|
66
|
+
return css`
|
|
67
|
+
${padding ? `padding: ${padding};` : ''}
|
|
68
|
+
${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}
|
|
69
|
+
${paddingLeft ? `padding-left: ${paddingLeft};` : ''}
|
|
70
|
+
${paddingRight ? `padding-right: ${paddingRight};` : ''}
|
|
71
|
+
${paddingTop ? `padding-top: ${paddingTop};` : ''}
|
|
72
|
+
`;
|
|
73
|
+
}}
|
|
74
|
+
`;
|
|
75
|
+
const baseSizing = css`
|
|
76
|
+
${_ref4 => {
|
|
77
|
+
let {
|
|
78
|
+
height,
|
|
79
|
+
maxHeight,
|
|
80
|
+
maxWidth,
|
|
81
|
+
minHeight,
|
|
82
|
+
minWidth,
|
|
83
|
+
width
|
|
84
|
+
} = _ref4;
|
|
85
|
+
return css`
|
|
86
|
+
${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}
|
|
87
|
+
${maxHeight ? `max-height: ${maxHeight};` : ''}
|
|
88
|
+
${maxWidth ? `max-width: ${maxWidth};` : ''}
|
|
89
|
+
${minHeight ? `min-height: ${minHeight};` : ''}
|
|
90
|
+
${minWidth ? `min-width: ${minWidth};` : ''}
|
|
91
|
+
${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}
|
|
92
|
+
`;
|
|
93
|
+
}}
|
|
94
|
+
`;
|
|
95
|
+
const basePositioning = css`
|
|
96
|
+
${_ref5 => {
|
|
97
|
+
let {
|
|
98
|
+
position,
|
|
99
|
+
top,
|
|
100
|
+
bottom,
|
|
101
|
+
left,
|
|
102
|
+
right,
|
|
103
|
+
zIndex
|
|
104
|
+
} = _ref5;
|
|
105
|
+
return css`
|
|
106
|
+
${position ? `position: ${position};` : ''}
|
|
107
|
+
${top ? `top: ${top};` : ''}
|
|
108
|
+
${bottom ? `bottom: ${bottom};` : ''}
|
|
109
|
+
${left ? `left: ${left};` : ''}
|
|
110
|
+
${right ? `right: ${right};` : ''}
|
|
111
|
+
${zIndex ? `z-index: ${zIndex};` : ''}
|
|
112
|
+
`;
|
|
113
|
+
}}
|
|
114
|
+
`;
|
|
115
|
+
const baseBorder = css`
|
|
116
|
+
${_ref6 => {
|
|
117
|
+
let {
|
|
118
|
+
background,
|
|
119
|
+
backgroundColor,
|
|
120
|
+
border,
|
|
121
|
+
borderTop,
|
|
122
|
+
borderBottom,
|
|
123
|
+
borderLeft,
|
|
124
|
+
borderRight,
|
|
125
|
+
borderRadius,
|
|
126
|
+
boxShadow
|
|
127
|
+
} = _ref6;
|
|
128
|
+
return css`
|
|
129
|
+
${background ? `background: ${background};` : ''}
|
|
130
|
+
${backgroundColor ? `background-color: ${backgroundColor};` : ''}
|
|
131
|
+
${border ? `border: ${border};` : ''}
|
|
132
|
+
${borderTop ? `border-top: ${borderTop};` : ''}
|
|
133
|
+
${borderBottom ? `border-bottom: ${borderBottom};` : ''}
|
|
134
|
+
${borderLeft ? `border-left: ${borderLeft};` : ''}
|
|
135
|
+
${borderRight ? `border-right: ${borderRight};` : ''}
|
|
136
|
+
${borderRadius ? `border-radius: ${borderRadius};` : ''}
|
|
137
|
+
${boxShadow ? `box-shadow: ${boxShadow};` : ''}
|
|
138
|
+
`;
|
|
139
|
+
}}
|
|
140
|
+
`;
|
|
141
|
+
const baseFlexbox = css`
|
|
142
|
+
${_ref7 => {
|
|
143
|
+
let {
|
|
144
|
+
alignContent,
|
|
145
|
+
alignItems,
|
|
146
|
+
flexDirection,
|
|
147
|
+
flexWrap,
|
|
148
|
+
gap,
|
|
149
|
+
justifyContent
|
|
150
|
+
} = _ref7;
|
|
151
|
+
return css`
|
|
152
|
+
${alignContent ? `align-content: ${alignContent};` : ''}
|
|
153
|
+
${alignItems ? `align-items: ${alignItems};` : ''}
|
|
154
|
+
${flexDirection ? `flex-direction: ${flexDirection};` : ''}
|
|
155
|
+
${flexWrap ? `flex-wrap: ${flexWrap};` : ''}
|
|
156
|
+
gap: ${gap};
|
|
157
|
+
${justifyContent ? `justify-content: ${justifyContent};` : ''}
|
|
158
|
+
`;
|
|
159
|
+
}}
|
|
160
|
+
`;
|
|
161
|
+
const baseGrid = css`
|
|
162
|
+
${_ref8 => {
|
|
163
|
+
let {
|
|
164
|
+
alignContent,
|
|
165
|
+
alignItems,
|
|
166
|
+
gap,
|
|
167
|
+
gridAutoColumns,
|
|
168
|
+
gridAutoRows,
|
|
169
|
+
gridTemplateAreas,
|
|
170
|
+
gridTemplateColumns,
|
|
171
|
+
gridTemplateRows,
|
|
172
|
+
justifyContent,
|
|
173
|
+
justifyItems
|
|
174
|
+
} = _ref8;
|
|
175
|
+
return css`
|
|
176
|
+
${alignContent ? `align-content: ${alignContent};` : ''}
|
|
177
|
+
${alignItems ? `align-items: ${alignItems};` : ''}
|
|
178
|
+
${gap ? `gap: ${gap};` : ''}
|
|
179
|
+
${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}
|
|
180
|
+
${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}
|
|
181
|
+
${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}
|
|
182
|
+
${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}
|
|
183
|
+
${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}
|
|
184
|
+
${justifyContent ? `justify-content: ${justifyContent};` : ''}
|
|
185
|
+
${justifyItems ? `justify-items: ${justifyItems};` : ''}
|
|
186
|
+
`;
|
|
187
|
+
}}
|
|
188
|
+
`;
|
|
189
|
+
const baseStyling = css`
|
|
190
|
+
font-family: var(--redsift-typography-body-font-family);
|
|
191
|
+
font-size: var(--redsift-typography-body-font-size);
|
|
192
|
+
font-weight: var(--redsift-typography-body-font-weight);
|
|
193
|
+
line-height: var(--redsift-typography-body-line-height);
|
|
194
|
+
|
|
195
|
+
${baseLayout}
|
|
196
|
+
${baseSpacing}
|
|
197
|
+
${baseSizing}
|
|
198
|
+
${basePositioning}
|
|
199
|
+
`;
|
|
200
|
+
const baseContainer = css`
|
|
201
|
+
${_ref9 => {
|
|
202
|
+
let {
|
|
203
|
+
display
|
|
204
|
+
} = _ref9;
|
|
205
|
+
return display ? `display: ${display};` : '';
|
|
206
|
+
}}
|
|
207
|
+
font-family: var(--redsift-typography-body-font-family);
|
|
208
|
+
font-size: var(--redsift-typography-body-font-size);
|
|
209
|
+
font-weight: var(--redsift-typography-body-font-weight);
|
|
210
|
+
line-height: 20px;
|
|
211
|
+
|
|
212
|
+
${baseInternalSpacing}
|
|
213
|
+
${baseSpacing}
|
|
214
|
+
${baseSizing}
|
|
215
|
+
${basePositioning}
|
|
216
|
+
${baseGrid}
|
|
217
|
+
${baseFlexbox}
|
|
218
|
+
`;
|
|
219
|
+
const focusRing = css`
|
|
220
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
221
|
+
:focus-visible {
|
|
222
|
+
outline: 2px solid var(--redsift-color-primary-n);
|
|
223
|
+
transition: outline-offset 75ms ease-out;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
:not(:active):focus-visible {
|
|
227
|
+
transition-duration: 0.25s;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
:not(:active):focus-visible {
|
|
232
|
+
outline-offset: 0.2rem;
|
|
233
|
+
}
|
|
234
|
+
`;
|
|
235
|
+
const srOnly = css`
|
|
236
|
+
border: 0 !important;
|
|
237
|
+
clip: rect(1px, 1px, 1px, 1px) !important;
|
|
238
|
+
-webkit-clip-path: inset(50%) !important;
|
|
239
|
+
clip-path: inset(50%) !important;
|
|
240
|
+
height: 1px !important;
|
|
241
|
+
overflow: hidden !important;
|
|
242
|
+
margin: -1px !important;
|
|
243
|
+
padding: 0 !important;
|
|
244
|
+
position: absolute !important;
|
|
245
|
+
width: 1px !important;
|
|
246
|
+
white-space: nowrap !important;
|
|
247
|
+
`;
|
|
248
|
+
|
|
249
|
+
export { baseSpacing as a, baseLayout as b, baseInternalSpacing as c, baseSizing as d, basePositioning as e, baseBorder as f, baseFlexbox as g, baseGrid as h, baseStyling as i, baseContainer as j, focusRing as k, srOnly as s };
|
|
250
|
+
//# sourceMappingURL=styles4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles4.js","sources":["../../src/components/shared/styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport {\n LayoutProps,\n SpacingProps,\n SizingProps,\n PositioningProps,\n FlexLayoutProps,\n GridLayoutProps,\n StylingProps,\n ContainerProps,\n InternalSpacingProps,\n BorderProps,\n} from '../../types';\n\nexport const baseLayout = css<LayoutProps>`\n ${({\n flex,\n flexGrow,\n flexShrink,\n flexBasis,\n alignSelf,\n justifySelf,\n order,\n gridArea,\n gridColumn,\n gridRow,\n gridColumnStart,\n gridColumnEnd,\n gridRowStart,\n gridRowEnd,\n }) =>\n css`\n ${flex ? `flex: ${flex};` : ''}\n ${flexGrow !== undefined ? `flex-grow: ${flexGrow};` : ''}\n ${flexShrink !== undefined ? `flex-shrink: ${flexShrink};` : ''}\n ${flexBasis ? `flex-basis: ${flexBasis};` : ''}\n ${alignSelf ? `align-self: ${alignSelf};` : ''}\n ${justifySelf ? `justify-self: ${justifySelf};` : ''}\n ${order !== undefined ? `order: ${order};` : ''}\n ${gridArea ? `grid-area: ${gridArea};` : ''}\n ${gridColumn ? `grid-column: ${gridColumn};` : ''}\n ${gridRow ? `grid-row: ${gridRow};` : ''}\n ${gridColumnStart ? `grid-column-start: ${gridColumnStart};` : ''}\n ${gridColumnEnd ? `grid-column-end: ${gridColumnEnd};` : ''}\n ${gridRowStart ? `grid-row-start: ${gridRowStart};` : ''}\n ${gridRowEnd ? `grid-row-end: ${gridRowEnd};` : ''}\n `}\n`;\n\nexport const baseSpacing = css<SpacingProps>`\n ${({ margin, marginBottom, marginLeft, marginRight, marginTop }) =>\n css`\n ${margin ? `margin: ${margin};` : ''}\n ${marginBottom ? `margin-bottom: ${marginBottom};` : ''}\n ${marginLeft ? `margin-left: ${marginLeft};` : ''}\n ${marginRight ? `margin-right: ${marginRight};` : ''}\n ${marginTop ? `margin-top: ${marginTop};` : ''}\n `}\n`;\n\nexport const baseInternalSpacing = css<InternalSpacingProps>`\n ${({ padding, paddingBottom, paddingLeft, paddingRight, paddingTop }) =>\n css`\n ${padding ? `padding: ${padding};` : ''}\n ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}\n ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}\n ${paddingRight ? `padding-right: ${paddingRight};` : ''}\n ${paddingTop ? `padding-top: ${paddingTop};` : ''}\n `}\n`;\n\nexport const baseSizing = css<SizingProps>`\n ${({ height, maxHeight, maxWidth, minHeight, minWidth, width }) =>\n css`\n ${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}\n ${maxHeight ? `max-height: ${maxHeight};` : ''}\n ${maxWidth ? `max-width: ${maxWidth};` : ''}\n ${minHeight ? `min-height: ${minHeight};` : ''}\n ${minWidth ? `min-width: ${minWidth};` : ''}\n ${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}\n `}\n`;\n\nexport const basePositioning = css<PositioningProps>`\n ${({ position, top, bottom, left, right, zIndex }) =>\n css`\n ${position ? `position: ${position};` : ''}\n ${top ? `top: ${top};` : ''}\n ${bottom ? `bottom: ${bottom};` : ''}\n ${left ? `left: ${left};` : ''}\n ${right ? `right: ${right};` : ''}\n ${zIndex ? `z-index: ${zIndex};` : ''}\n `}\n`;\n\nexport const baseBorder = css<BorderProps>`\n ${({\n background,\n backgroundColor,\n border,\n borderTop,\n borderBottom,\n borderLeft,\n borderRight,\n borderRadius,\n boxShadow,\n }) =>\n css`\n ${background ? `background: ${background};` : ''}\n ${backgroundColor ? `background-color: ${backgroundColor};` : ''}\n ${border ? `border: ${border};` : ''}\n ${borderTop ? `border-top: ${borderTop};` : ''}\n ${borderBottom ? `border-bottom: ${borderBottom};` : ''}\n ${borderLeft ? `border-left: ${borderLeft};` : ''}\n ${borderRight ? `border-right: ${borderRight};` : ''}\n ${borderRadius ? `border-radius: ${borderRadius};` : ''}\n ${boxShadow ? `box-shadow: ${boxShadow};` : ''}\n `}\n`;\n\nexport const baseFlexbox = css<FlexLayoutProps>`\n ${({ alignContent, alignItems, flexDirection, flexWrap, gap, justifyContent }) =>\n css`\n ${alignContent ? `align-content: ${alignContent};` : ''}\n ${alignItems ? `align-items: ${alignItems};` : ''}\n ${flexDirection ? `flex-direction: ${flexDirection};` : ''}\n ${flexWrap ? `flex-wrap: ${flexWrap};` : ''}\n gap: ${gap};\n ${justifyContent ? `justify-content: ${justifyContent};` : ''}\n `}\n`;\n\nexport const baseGrid = css<GridLayoutProps>`\n ${({\n alignContent,\n alignItems,\n gap,\n gridAutoColumns,\n gridAutoRows,\n gridTemplateAreas,\n gridTemplateColumns,\n gridTemplateRows,\n justifyContent,\n justifyItems,\n }) =>\n css`\n ${alignContent ? `align-content: ${alignContent};` : ''}\n ${alignItems ? `align-items: ${alignItems};` : ''}\n ${gap ? `gap: ${gap};` : ''}\n ${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}\n ${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}\n ${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}\n ${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}\n ${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}\n ${justifyContent ? `justify-content: ${justifyContent};` : ''}\n ${justifyItems ? `justify-items: ${justifyItems};` : ''}\n `}\n`;\n\nexport const baseStyling = css<StylingProps>`\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: var(--redsift-typography-body-line-height);\n\n ${baseLayout}\n ${baseSpacing}\n ${baseSizing}\n ${basePositioning}\n`;\n\nexport const baseContainer = css<ContainerProps>`\n ${({ display }) => (display ? `display: ${display};` : '')}\n font-family: var(--redsift-typography-body-font-family);\n font-size: var(--redsift-typography-body-font-size);\n font-weight: var(--redsift-typography-body-font-weight);\n line-height: 20px;\n\n ${baseInternalSpacing}\n ${baseSpacing}\n ${baseSizing}\n ${basePositioning}\n ${baseGrid}\n ${baseFlexbox}\n`;\n\nexport const focusRing = css`\n @media (prefers-reduced-motion: no-preference) {\n :focus-visible {\n outline: 2px solid var(--redsift-color-primary-n);\n transition: outline-offset 75ms ease-out;\n }\n\n :not(:active):focus-visible {\n transition-duration: 0.25s;\n }\n }\n\n :not(:active):focus-visible {\n outline-offset: 0.2rem;\n }\n`;\n\nexport const srOnly = css`\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n overflow: hidden !important;\n margin: -1px !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n`;\n"],"names":["baseLayout","css","_ref","flex","flexGrow","flexShrink","flexBasis","alignSelf","justifySelf","order","gridArea","gridColumn","gridRow","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","undefined","baseSpacing","_ref2","margin","marginBottom","marginLeft","marginRight","marginTop","baseInternalSpacing","_ref3","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","baseSizing","_ref4","height","maxHeight","maxWidth","minHeight","minWidth","width","basePositioning","_ref5","position","top","bottom","left","right","zIndex","baseBorder","_ref6","background","backgroundColor","border","borderTop","borderBottom","borderLeft","borderRight","borderRadius","boxShadow","baseFlexbox","_ref7","alignContent","alignItems","flexDirection","flexWrap","gap","justifyContent","baseGrid","_ref8","gridAutoColumns","gridAutoRows","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","justifyItems","baseStyling","baseContainer","_ref9","display","focusRing","srOnly"],"mappings":";;AAcO,MAAMA,UAAU,GAAGC,GAAiB,CAAA;AAC3C,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IACDC,IAAI;IACJC,QAAQ;IACRC,UAAU;IACVC,SAAS;IACTC,SAAS;IACTC,WAAW;IACXC,KAAK;IACLC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,eAAe;IACfC,aAAa;IACbC,YAAY;AACZC,IAAAA,UAAAA;AACF,GAAC,GAAAd,IAAA,CAAA;AAAA,EAAA,OACCD,GAAI,CAAA;AACR,MAAA,EAAQE,IAAI,GAAI,CAAA,MAAA,EAAQA,IAAK,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrC,MAAQC,EAAAA,QAAQ,KAAKa,SAAS,GAAI,cAAab,QAAS,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAChE,MAAQC,EAAAA,UAAU,KAAKY,SAAS,GAAI,gBAAeZ,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACtE,MAAA,EAAQC,SAAS,GAAI,CAAA,YAAA,EAAcA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrD,MAAA,EAAQC,SAAS,GAAI,CAAA,YAAA,EAAcA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrD,MAAA,EAAQC,WAAW,GAAI,CAAA,cAAA,EAAgBA,WAAY,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3D,MAAQC,EAAAA,KAAK,KAAKQ,SAAS,GAAI,UAASR,KAAM,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACtD,MAAA,EAAQC,QAAQ,GAAI,CAAA,WAAA,EAAaA,QAAS,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClD,MAAA,EAAQC,UAAU,GAAI,CAAA,aAAA,EAAeA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxD,MAAA,EAAQC,OAAO,GAAI,CAAA,UAAA,EAAYA,OAAQ,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC/C,MAAA,EAAQC,eAAe,GAAI,CAAA,mBAAA,EAAqBA,eAAgB,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxE,MAAA,EAAQC,aAAa,GAAI,CAAA,iBAAA,EAAmBA,aAAc,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClE,MAAA,EAAQC,YAAY,GAAI,CAAA,gBAAA,EAAkBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC/D,MAAA,EAAQC,UAAU,GAAI,CAAA,cAAA,EAAgBA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACzD,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAME,WAAW,GAAGjB,GAAkB,CAAA;AAC7C,EAAA,EAAIkB,KAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,YAAY;IAAEC,UAAU;IAAEC,WAAW;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAL,KAAA,CAAA;AAAA,EAAA,OAC7DlB,GAAI,CAAA;AACR,MAAA,EAAQmB,MAAM,GAAI,CAAA,QAAA,EAAUA,MAAO,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3C,MAAA,EAAQC,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,MAAA,EAAQC,UAAU,GAAI,CAAA,aAAA,EAAeA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxD,MAAA,EAAQC,WAAW,GAAI,CAAA,cAAA,EAAgBA,WAAY,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3D,MAAA,EAAQC,SAAS,GAAI,CAAA,YAAA,EAAcA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrD,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAMC,mBAAmB,GAAGxB,GAA0B,CAAA;AAC7D,EAAA,EAAIyB,KAAA,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC,aAAa;IAAEC,WAAW;IAAEC,YAAY;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAL,KAAA,CAAA;AAAA,EAAA,OAClEzB,GAAI,CAAA;AACR,MAAA,EAAQ0B,OAAO,GAAI,CAAA,SAAA,EAAWA,OAAQ,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9C,MAAA,EAAQC,aAAa,GAAI,CAAA,gBAAA,EAAkBA,aAAc,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACjE,MAAA,EAAQC,WAAW,GAAI,CAAA,cAAA,EAAgBA,WAAY,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3D,MAAA,EAAQC,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,MAAA,EAAQC,UAAU,GAAI,CAAA,aAAA,EAAeA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxD,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAMC,UAAU,GAAG/B,GAAiB,CAAA;AAC3C,EAAA,EAAIgC,KAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,QAAQ;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAN,KAAA,CAAA;AAAA,EAAA,OAC5DhC,GAAI,CAAA;AACR,MAAA,EAAQiC,MAAM,KAAKjB,SAAS,GAAI,CAAA,QAAA,EAAU,OAAOiB,MAAM,KAAK,QAAQ,GAAI,GAAEA,MAAO,CAAA,EAAA,CAAG,GAAGA,MAAO,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACtG,MAAA,EAAQC,SAAS,GAAI,CAAA,YAAA,EAAcA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrD,MAAA,EAAQC,QAAQ,GAAI,CAAA,WAAA,EAAaA,QAAS,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClD,MAAA,EAAQC,SAAS,GAAI,CAAA,YAAA,EAAcA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrD,MAAA,EAAQC,QAAQ,GAAI,CAAA,WAAA,EAAaA,QAAS,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClD,MAAA,EAAQC,KAAK,KAAKtB,SAAS,GAAI,CAAA,OAAA,EAAS,OAAOsB,KAAK,KAAK,QAAQ,GAAI,GAAEA,KAAM,CAAA,EAAA,CAAG,GAAGA,KAAM,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACjG,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAMC,eAAe,GAAGvC,GAAsB,CAAA;AACrD,EAAA,EAAIwC,KAAA,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,GAAG;IAAEC,MAAM;IAAEC,IAAI;IAAEC,KAAK;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAN,KAAA,CAAA;AAAA,EAAA,OAC/CxC,GAAI,CAAA;AACR,MAAA,EAAQyC,QAAQ,GAAI,CAAA,UAAA,EAAYA,QAAS,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACjD,MAAA,EAAQC,GAAG,GAAI,CAAA,KAAA,EAAOA,GAAI,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClC,MAAA,EAAQC,MAAM,GAAI,CAAA,QAAA,EAAUA,MAAO,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3C,MAAA,EAAQC,IAAI,GAAI,CAAA,MAAA,EAAQA,IAAK,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrC,MAAA,EAAQC,KAAK,GAAI,CAAA,OAAA,EAASA,KAAM,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxC,MAAA,EAAQC,MAAM,GAAI,CAAA,SAAA,EAAWA,MAAO,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC5C,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAMC,UAAU,GAAG/C,GAAiB,CAAA;AAC3C,EAAA,EAAIgD,KAAA,IAAA;EAAA,IAAC;IACDC,UAAU;IACVC,eAAe;IACfC,MAAM;IACNC,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,WAAW;IACXC,YAAY;AACZC,IAAAA,SAAAA;AACF,GAAC,GAAAT,KAAA,CAAA;AAAA,EAAA,OACChD,GAAI,CAAA;AACR,MAAA,EAAQiD,UAAU,GAAI,CAAA,YAAA,EAAcA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACvD,MAAA,EAAQC,eAAe,GAAI,CAAA,kBAAA,EAAoBA,eAAgB,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACvE,MAAA,EAAQC,MAAM,GAAI,CAAA,QAAA,EAAUA,MAAO,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3C,MAAA,EAAQC,SAAS,GAAI,CAAA,YAAA,EAAcA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrD,MAAA,EAAQC,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,MAAA,EAAQC,UAAU,GAAI,CAAA,aAAA,EAAeA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxD,MAAA,EAAQC,WAAW,GAAI,CAAA,cAAA,EAAgBA,WAAY,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3D,MAAA,EAAQC,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,MAAA,EAAQC,SAAS,GAAI,CAAA,YAAA,EAAcA,SAAU,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACrD,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAMC,WAAW,GAAG1D,GAAqB,CAAA;AAChD,EAAA,EAAI2D,KAAA,IAAA;EAAA,IAAC;IAAEC,YAAY;IAAEC,UAAU;IAAEC,aAAa;IAAEC,QAAQ;IAAEC,GAAG;AAAEC,IAAAA,cAAAA;AAAe,GAAC,GAAAN,KAAA,CAAA;AAAA,EAAA,OAC3E3D,GAAI,CAAA;AACR,MAAA,EAAQ4D,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,MAAA,EAAQC,UAAU,GAAI,CAAA,aAAA,EAAeA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxD,MAAA,EAAQC,aAAa,GAAI,CAAA,gBAAA,EAAkBA,aAAc,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACjE,MAAA,EAAQC,QAAQ,GAAI,CAAA,WAAA,EAAaA,QAAS,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClD,WAAA,EAAaC,GAAI,CAAA;AACjB,MAAA,EAAQC,cAAc,GAAI,CAAA,iBAAA,EAAmBA,cAAe,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACpE,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAMC,QAAQ,GAAGlE,GAAqB,CAAA;AAC7C,EAAA,EAAImE,KAAA,IAAA;EAAA,IAAC;IACDP,YAAY;IACZC,UAAU;IACVG,GAAG;IACHI,eAAe;IACfC,YAAY;IACZC,iBAAiB;IACjBC,mBAAmB;IACnBC,gBAAgB;IAChBP,cAAc;AACdQ,IAAAA,YAAAA;AACF,GAAC,GAAAN,KAAA,CAAA;AAAA,EAAA,OACCnE,GAAI,CAAA;AACR,MAAA,EAAQ4D,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,MAAA,EAAQC,UAAU,GAAI,CAAA,aAAA,EAAeA,UAAW,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxD,MAAA,EAAQG,GAAG,GAAI,CAAA,KAAA,EAAOA,GAAI,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAClC,MAAA,EAAQI,eAAe,GAAI,CAAA,mBAAA,EAAqBA,eAAgB,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACxE,MAAA,EAAQC,YAAY,GAAI,CAAA,gBAAA,EAAkBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC/D,MAAA,EAAQC,iBAAiB,GAAI,CAAA,qBAAA,EAAuBA,iBAAkB,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9E,MAAA,EAAQC,mBAAmB,GAAI,CAAA,uBAAA,EAAyBA,mBAAoB,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACpF,MAAA,EAAQC,gBAAgB,GAAI,CAAA,oBAAA,EAAsBA,gBAAiB,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC3E,MAAA,EAAQP,cAAc,GAAI,CAAA,iBAAA,EAAmBA,cAAe,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AACpE,MAAA,EAAQQ,YAAY,GAAI,CAAA,eAAA,EAAiBA,YAAa,CAAA,CAAA,CAAE,GAAG,EAAG,CAAA;AAC9D,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN,EAAC;AAEM,MAAMC,WAAW,GAAG1E,GAAkB,CAAA;AAC7C;AACA;AACA;AACA;AACA;AACA,EAAA,EAAID,UAAW,CAAA;AACf,EAAA,EAAIkB,WAAY,CAAA;AAChB,EAAA,EAAIc,UAAW,CAAA;AACf,EAAA,EAAIQ,eAAgB,CAAA;AACpB,EAAC;AAEM,MAAMoC,aAAa,GAAG3E,GAAoB,CAAA;AACjD,EAAA,EAAI4E,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAMC,OAAO,GAAI,CAAA,SAAA,EAAWA,OAAQ,CAAA,CAAA,CAAE,GAAG,EAAE,CAAA;AAAA,CAAE,CAAA;AAC7D;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIrD,mBAAoB,CAAA;AACxB,EAAA,EAAIP,WAAY,CAAA;AAChB,EAAA,EAAIc,UAAW,CAAA;AACf,EAAA,EAAIQ,eAAgB,CAAA;AACpB,EAAA,EAAI2B,QAAS,CAAA;AACb,EAAA,EAAIR,WAAY,CAAA;AAChB,EAAC;AAEM,MAAMoB,SAAS,GAAG9E,GAAI,CAAA;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAM+E,MAAM,GAAG/E,GAAI,CAAA;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
import { N as NotificationsColorPalette, g as NeutralColorPalette, e as ProductColorPalette } from './colors.js';
|
|
3
|
+
import { i as baseStyling } from './styles4.js';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Component variant.
|
|
7
|
+
*/
|
|
8
|
+
const TextVariant = {
|
|
9
|
+
body: 'body',
|
|
10
|
+
button: 'button',
|
|
11
|
+
caption: 'caption',
|
|
12
|
+
helper: 'helper',
|
|
13
|
+
inherit: 'inherit'
|
|
14
|
+
};
|
|
15
|
+
const TextComponent = {
|
|
16
|
+
p: 'p',
|
|
17
|
+
b: 'b',
|
|
18
|
+
i: 'i',
|
|
19
|
+
u: 'u',
|
|
20
|
+
abbr: 'abbr',
|
|
21
|
+
cite: 'cite',
|
|
22
|
+
del: 'del',
|
|
23
|
+
em: 'em',
|
|
24
|
+
ins: 'ins',
|
|
25
|
+
kbd: 'kbd',
|
|
26
|
+
mark: 'mark',
|
|
27
|
+
s: 's',
|
|
28
|
+
samp: 'samp',
|
|
29
|
+
sub: 'sub',
|
|
30
|
+
sup: 'sup'
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Component props.
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Component style.
|
|
39
|
+
*/
|
|
40
|
+
const StyledText = styled.span`
|
|
41
|
+
${baseStyling}
|
|
42
|
+
|
|
43
|
+
${_ref => {
|
|
44
|
+
let {
|
|
45
|
+
$color
|
|
46
|
+
} = _ref;
|
|
47
|
+
return $color && $color === 'radar' ? css`
|
|
48
|
+
background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
|
|
49
|
+
background-clip: text;
|
|
50
|
+
color: transparent;
|
|
51
|
+
` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
|
|
52
|
+
color: var(--redsift-color-notifications-${$color}-primary);
|
|
53
|
+
` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
|
|
54
|
+
color: var(--redsift-color-neutral-${$color});
|
|
55
|
+
` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
|
|
56
|
+
color: var(--redsift-color-product-${$color});
|
|
57
|
+
` : css`
|
|
58
|
+
color: ${$color || css`inherit`};
|
|
59
|
+
`;
|
|
60
|
+
}}
|
|
61
|
+
|
|
62
|
+
${_ref2 => {
|
|
63
|
+
let {
|
|
64
|
+
$as
|
|
65
|
+
} = _ref2;
|
|
66
|
+
return css`
|
|
67
|
+
${$as === TextComponent.i || $as === TextComponent.cite || $as === TextComponent.em ? css`
|
|
68
|
+
font-style: italic;
|
|
69
|
+
` : $as === TextComponent.sub ? css`
|
|
70
|
+
vertical-align: sub;
|
|
71
|
+
` : $as === TextComponent.sup ? css`
|
|
72
|
+
vertical-align: super;
|
|
73
|
+
` : $as === TextComponent.mark ? css`
|
|
74
|
+
color: var(--redsift-color-neutral-x-dark-grey);
|
|
75
|
+
` : ''}
|
|
76
|
+
`;
|
|
77
|
+
}}
|
|
78
|
+
|
|
79
|
+
${_ref3 => {
|
|
80
|
+
let {
|
|
81
|
+
$as,
|
|
82
|
+
$fontFamily,
|
|
83
|
+
$fontSize,
|
|
84
|
+
$fontWeight,
|
|
85
|
+
$lineHeight,
|
|
86
|
+
$variant
|
|
87
|
+
} = _ref3;
|
|
88
|
+
return !$variant ? css`
|
|
89
|
+
${$fontFamily ? css`
|
|
90
|
+
font-family: var(--redsift-typography-font-family-${$fontFamily});
|
|
91
|
+
` : ''}
|
|
92
|
+
${$fontSize ? css`
|
|
93
|
+
font-size: ${$fontSize};
|
|
94
|
+
` : ''}
|
|
95
|
+
${$fontWeight ? css`
|
|
96
|
+
font-weight: ${$fontWeight};
|
|
97
|
+
` : ''}
|
|
98
|
+
${$lineHeight ? css`
|
|
99
|
+
line-height: ${$lineHeight};
|
|
100
|
+
` : ''}
|
|
101
|
+
${$as === TextComponent.b ? css`
|
|
102
|
+
font-weight: ${$fontWeight ? $fontWeight : 'var(--redsift-typography-font-weight-bold)'};
|
|
103
|
+
` : $as === TextComponent.sup || $as === TextComponent.sub ? css`
|
|
104
|
+
font-size: ${$fontSize ? $fontSize : '12px'};
|
|
105
|
+
` : ''}
|
|
106
|
+
` : $variant === TextVariant.inherit ? css`
|
|
107
|
+
font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`inherit`};
|
|
108
|
+
font-size: ${$fontSize ? $fontSize : $as === TextComponent.sup || $as === TextComponent.sub ? '12px' : css`inherit`};
|
|
109
|
+
font-weight: ${$fontWeight ? $fontWeight : $as === TextComponent.b ? 'var(--redsift-typography-font-weight-bold)' : 'inherit'};
|
|
110
|
+
line-height: ${$lineHeight ? $lineHeight : css`inherit`};
|
|
111
|
+
text-transform: inherit;
|
|
112
|
+
` : css`
|
|
113
|
+
font-family: ${$fontFamily ? css`var(--redsift-typography-font-family-${$fontFamily})` : css`var(--redsift-typography-${$variant}-font-family)`};
|
|
114
|
+
font-size: ${$fontSize ? $fontSize : css`var(--redsift-typography-${$variant}-font-size)`};
|
|
115
|
+
font-weight: ${$fontWeight ? $fontWeight : css`var(--redsift-typography-${$variant}-font-weight)`};
|
|
116
|
+
line-height: ${$lineHeight ? $lineHeight : css`var(--redsift-typography-${$variant}-line-height)`};
|
|
117
|
+
text-transform: var(--redsift-typography-${$variant}-text-transform);
|
|
118
|
+
`;
|
|
119
|
+
}}
|
|
120
|
+
|
|
121
|
+
${_ref4 => {
|
|
122
|
+
let {
|
|
123
|
+
$noWrap
|
|
124
|
+
} = _ref4;
|
|
125
|
+
return $noWrap ? css`
|
|
126
|
+
overflow: hidden;
|
|
127
|
+
text-overflow: ellipsis;
|
|
128
|
+
white-space: nowrap;
|
|
129
|
+
` : '';
|
|
130
|
+
}}
|
|
131
|
+
|
|
132
|
+
${_ref5 => {
|
|
133
|
+
let {
|
|
134
|
+
wordBreak
|
|
135
|
+
} = _ref5;
|
|
136
|
+
return wordBreak ? css`
|
|
137
|
+
word-break: ${wordBreak};
|
|
138
|
+
` : '';
|
|
139
|
+
}}
|
|
140
|
+
`;
|
|
141
|
+
|
|
142
|
+
export { StyledText as S, TextVariant as T, TextComponent as a };
|
|
143
|
+
//# sourceMappingURL=styles5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles5.js","sources":["../../src/components/text/types.ts","../../src/components/text/styles.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { NotificationsColorPalette, FontFamily, NeutralColorPalette, StylingProps, ValueOf, Theme } 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 type StyledTextProps = Omit<\n TextProps,\n 'as' | 'color' | 'fontFamily' | 'fontSize' | 'lineHeight' | 'noWrap' | 'variant'\n> & {\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 $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 './styles4.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=styles6.js.map
|
|
@@ -0,0 +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;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-area.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-field.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Component variant.
|
|
3
|
+
*/
|
|
4
|
+
const AppSidePanelVariant = {
|
|
5
|
+
shrinked: 'shrinked',
|
|
6
|
+
standard: 'standard',
|
|
7
|
+
hidden: 'hidden'
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Component props.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
export { AppSidePanelVariant as A };
|
|
15
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../src/components/app-side-panel/types.ts"],"sourcesContent":["import { ReactElement, ComponentProps, RefObject, MouseEvent } from 'react';\nimport { Theme, ValueOf } from '../../types';\nimport { IconButtonProps } from '../icon-button';\n\n/**\n * Component variant.\n */\nexport const AppSidePanelVariant = {\n shrinked: 'shrinked',\n standard: 'standard',\n hidden: 'hidden',\n} as const;\nexport type AppSidePanelVariant = ValueOf<typeof AppSidePanelVariant>;\n\n/**\n * Component props.\n */\nexport interface AppSidePanelProps extends ComponentProps<'div'> {\n /** Elements to display on top of the navigation menu. Usually a button. */\n featuredElements?: ReactElement | ReactElement[];\n /** Custom props to pass to the IconButton used to collapse the side panel. */\n iconButtonProps?: Omit<IconButtonProps, 'icon'>;\n /** Custom ref to pass to the IconButton used to collapse the side panel. */\n iconButtonRef?: RefObject<HTMLButtonElement>;\n /** Place to display the logo app. */\n logo?: ReactElement | ComponentProps<'img'>;\n /** Method called when a click occurs on the top open button - which is displayed only in shrinked variant. */\n onOpen?: (e: MouseEvent) => void;\n /** Theme. */\n theme?: Theme;\n /** Variant. */\n variant?: AppSidePanelVariant;\n}\n\nexport type StyledAppSidePanelProps = Omit<AppSidePanelProps, 'isCollapsed' | 'logo'> & {\n $variant: AppSidePanelProps['variant'];\n $theme: AppSidePanelProps['theme'];\n};\n"],"names":["AppSidePanelVariant","shrinked","standard","hidden"],"mappings":"AAIA;AACA;AACA;AACO,MAAMA,mBAAmB,GAAG;AACjCC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAU;;AAGV;AACA;AACA;;;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Component variant.
|
|
3
|
+
*/
|
|
4
|
+
const HeadingVariant = {
|
|
5
|
+
h1: 'h1',
|
|
6
|
+
h2: 'h2',
|
|
7
|
+
h3: 'h3',
|
|
8
|
+
h4: 'h4',
|
|
9
|
+
h5: 'h5',
|
|
10
|
+
body: 'body'
|
|
11
|
+
};
|
|
12
|
+
const HeadingComponent = {
|
|
13
|
+
h1: 'h1',
|
|
14
|
+
h2: 'h2',
|
|
15
|
+
h3: 'h3',
|
|
16
|
+
h4: 'h4',
|
|
17
|
+
h5: 'h5',
|
|
18
|
+
span: 'span'
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Component props.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
export { HeadingVariant as H, HeadingComponent as a };
|
|
26
|
+
//# sourceMappingURL=types2.js.map
|
|
@@ -0,0 +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;;;;"}
|