@zendeskgarden/react-chrome 9.4.0 → 9.5.1
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/dist/esm/styled/StyledChrome.js +3 -3
- package/dist/esm/styled/StyledSkipNav.js +3 -3
- package/dist/esm/styled/StyledSkipNavIcon.js +3 -3
- package/dist/esm/styled/body/StyledBody.js +3 -3
- package/dist/esm/styled/body/StyledContent.js +3 -3
- package/dist/esm/styled/body/StyledMain.js +3 -3
- package/dist/esm/styled/footer/StyledFooter.js +3 -3
- package/dist/esm/styled/footer/StyledFooterItem.js +3 -3
- package/dist/esm/styled/header/StyledBaseHeaderItem.js +3 -3
- package/dist/esm/styled/header/StyledHeader.js +3 -3
- package/dist/esm/styled/header/StyledHeaderItem.js +3 -3
- package/dist/esm/styled/header/StyledHeaderItemIcon.js +3 -3
- package/dist/esm/styled/header/StyledHeaderItemText.js +3 -3
- package/dist/esm/styled/header/StyledHeaderItemWrapper.js +3 -3
- package/dist/esm/styled/header/StyledLogoHeaderItem.js +3 -3
- package/dist/esm/styled/nav/StyledBaseNavItem.js +1 -1
- package/dist/esm/styled/nav/StyledBrandmarkNavItem.js +1 -1
- package/dist/esm/styled/nav/StyledLogoNavItem.js +1 -1
- package/dist/esm/styled/nav/StyledNav.js +3 -3
- package/dist/esm/styled/nav/StyledNavButton.js +3 -3
- package/dist/esm/styled/nav/StyledNavItemIcon.js +3 -3
- package/dist/esm/styled/nav/StyledNavItemText.js +3 -3
- package/dist/esm/styled/nav/StyledNavList.js +3 -3
- package/dist/esm/styled/nav/StyledNavListItem.js +3 -3
- package/dist/esm/styled/sheet/StyledSheet.js +3 -3
- package/dist/esm/styled/sheet/StyledSheetBody.js +3 -3
- package/dist/esm/styled/sheet/StyledSheetClose.js +3 -3
- package/dist/esm/styled/sheet/StyledSheetDescription.js +3 -3
- package/dist/esm/styled/sheet/StyledSheetFooter.js +3 -3
- package/dist/esm/styled/sheet/StyledSheetFooterItem.js +3 -3
- package/dist/esm/styled/sheet/StyledSheetHeader.js +3 -3
- package/dist/esm/styled/sheet/StyledSheetTitle.js +3 -3
- package/dist/esm/styled/sheet/StyledSheetWrapper.js +3 -3
- package/dist/index.cjs.js +63 -63
- package/package.json +5 -5
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.chrome';
|
|
11
11
|
const StyledChrome = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledChrome",
|
|
16
16
|
componentId: "sc-1uqm6u6-0"
|
|
17
|
-
})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl',
|
|
17
|
+
})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledChrome };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { keyframes, css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { SELECTOR_FOCUS_VISIBLE,
|
|
9
|
+
import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getHeaderHeight } from './utils.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'chrome.skipnav';
|
|
@@ -55,10 +55,10 @@ const sizeStyles = _ref2 => {
|
|
|
55
55
|
};
|
|
56
56
|
const StyledSkipNav = styled.a.attrs({
|
|
57
57
|
'data-garden-id': COMPONENT_ID,
|
|
58
|
-
'data-garden-version': '9.
|
|
58
|
+
'data-garden-version': '9.5.1'
|
|
59
59
|
}).withConfig({
|
|
60
60
|
displayName: "StyledSkipNav",
|
|
61
61
|
componentId: "sc-1tsro34-0"
|
|
62
|
-
})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.$zIndex, props => props.theme.borderRadii.md, sizeStyles, SELECTOR_FOCUS_VISIBLE, colorStyles,
|
|
62
|
+
})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.$zIndex, props => props.theme.borderRadii.md, sizeStyles, SELECTOR_FOCUS_VISIBLE, colorStyles, componentStyles);
|
|
63
63
|
|
|
64
64
|
export { StyledSkipNav };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import SvgLinkStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/link-stroke.svg.js';
|
|
9
|
-
import { getColor,
|
|
9
|
+
import { getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.skipnav_icon';
|
|
12
12
|
const sizeStyles = _ref => {
|
|
@@ -19,13 +19,13 @@ const sizeStyles = _ref => {
|
|
|
19
19
|
};
|
|
20
20
|
const StyledSkipNavIcon = styled(SvgLinkStroke).attrs({
|
|
21
21
|
'data-garden-id': COMPONENT_ID,
|
|
22
|
-
'data-garden-version': '9.
|
|
22
|
+
'data-garden-version': '9.5.1'
|
|
23
23
|
}).withConfig({
|
|
24
24
|
displayName: "StyledSkipNavIcon",
|
|
25
25
|
componentId: "sc-1ika5z4-0"
|
|
26
26
|
})(["transform:", ";color:", ";", ";", ";"], p => p.theme.rtl && 'scaleX(-1)', p => getColor({
|
|
27
27
|
theme: p.theme,
|
|
28
28
|
variable: 'foreground.subtle'
|
|
29
|
-
}), sizeStyles,
|
|
29
|
+
}), sizeStyles, componentStyles);
|
|
30
30
|
|
|
31
31
|
export { StyledSkipNavIcon };
|
|
@@ -5,18 +5,18 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getColor,
|
|
8
|
+
import { getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.body';
|
|
11
11
|
const StyledBody = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledBody",
|
|
16
16
|
componentId: "sc-c7h9kv-0"
|
|
17
17
|
})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => getColor({
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: 'background.default'
|
|
20
|
-
}),
|
|
20
|
+
}), componentStyles);
|
|
21
21
|
|
|
22
22
|
export { StyledBody };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { getColor,
|
|
9
|
+
import { getColor, componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { getHeaderHeight, getFooterHeight } from '../utils.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'chrome.content';
|
|
@@ -22,13 +22,13 @@ const sizeStyles = _ref => {
|
|
|
22
22
|
};
|
|
23
23
|
const StyledContent = styled.div.attrs({
|
|
24
24
|
'data-garden-id': COMPONENT_ID,
|
|
25
|
-
'data-garden-version': '9.
|
|
25
|
+
'data-garden-version': '9.5.1'
|
|
26
26
|
}).withConfig({
|
|
27
27
|
displayName: "StyledContent",
|
|
28
28
|
componentId: "sc-qcuzxn-0"
|
|
29
29
|
})(["display:flex;color-scheme:only ", ";color:", ";", ";&:focus{outline:none;}", ";"], p => p.theme.colors.base, props => getColor({
|
|
30
30
|
theme: props.theme,
|
|
31
31
|
variable: 'foreground.default'
|
|
32
|
-
}), sizeStyles,
|
|
32
|
+
}), sizeStyles, componentStyles);
|
|
33
33
|
|
|
34
34
|
export { StyledContent };
|
|
@@ -5,18 +5,18 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getColor,
|
|
8
|
+
import { getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.main';
|
|
11
11
|
const StyledMain = styled.main.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledMain",
|
|
16
16
|
componentId: "sc-t61cre-0"
|
|
17
17
|
})(["flex:1;order:1;background-color:", ";overflow:auto;&:focus{outline:none;}", ";"], props => getColor({
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: 'background.default'
|
|
20
|
-
}),
|
|
20
|
+
}), componentStyles);
|
|
21
21
|
|
|
22
22
|
export { StyledMain };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { getFooterHeight } from '../utils.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.footer';
|
|
@@ -34,10 +34,10 @@ const sizeStyles = _ref2 => {
|
|
|
34
34
|
};
|
|
35
35
|
const StyledFooter = styled.footer.attrs({
|
|
36
36
|
'data-garden-id': COMPONENT_ID,
|
|
37
|
-
'data-garden-version': '9.
|
|
37
|
+
'data-garden-version': '9.5.1'
|
|
38
38
|
}).withConfig({
|
|
39
39
|
displayName: "StyledFooter",
|
|
40
40
|
componentId: "sc-v7lib2-0"
|
|
41
|
-
})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles, colorStyles,
|
|
41
|
+
})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
|
|
42
42
|
|
|
43
43
|
export { StyledFooter };
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.footer_item';
|
|
11
11
|
const StyledFooterItem = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFooterItem",
|
|
16
16
|
componentId: "sc-1cktm85-0"
|
|
17
|
-
})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`,
|
|
17
|
+
})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledFooterItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { getHeaderItemSize } from '../utils.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.base_header_item';
|
|
@@ -32,10 +32,10 @@ const sizeStyles = _ref => {
|
|
|
32
32
|
};
|
|
33
33
|
const StyledBaseHeaderItem = styled.button.attrs({
|
|
34
34
|
'data-garden-id': COMPONENT_ID,
|
|
35
|
-
'data-garden-version': '9.
|
|
35
|
+
'data-garden-version': '9.5.1'
|
|
36
36
|
}).withConfig({
|
|
37
37
|
displayName: "StyledBaseHeaderItem",
|
|
38
38
|
componentId: "sc-1qua7h6-0"
|
|
39
|
-
})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;border:none;background:transparent;text-decoration:none;white-space:nowrap;color:inherit;", ";", ";"], props => props.$maxX && '1', props => props.$maxX ? 'start' : 'center', sizeStyles,
|
|
39
|
+
})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;border:none;background:transparent;text-decoration:none;white-space:nowrap;color:inherit;", ";", ";"], props => props.$maxX && '1', props => props.$maxX ? 'start' : 'center', sizeStyles, componentStyles);
|
|
40
40
|
|
|
41
41
|
export { StyledBaseHeaderItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledLogoHeaderItem } from './StyledLogoHeaderItem.js';
|
|
10
10
|
import { getHeaderHeight } from '../utils.js';
|
|
11
11
|
|
|
@@ -46,10 +46,10 @@ const sizeStyles = _ref2 => {
|
|
|
46
46
|
};
|
|
47
47
|
const StyledHeader = styled.header.attrs({
|
|
48
48
|
'data-garden-id': COMPONENT_ID,
|
|
49
|
-
'data-garden-version': '9.
|
|
49
|
+
'data-garden-version': '9.5.1'
|
|
50
50
|
}).withConfig({
|
|
51
51
|
displayName: "StyledHeader",
|
|
52
52
|
componentId: "sc-1cexpz-0"
|
|
53
|
-
})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.$isStandalone && 'relative', sizeStyles, colorStyles, StyledLogoHeaderItem, props => props.$isStandalone && 'inline-flex',
|
|
53
|
+
})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.$isStandalone && 'relative', sizeStyles, colorStyles, StyledLogoHeaderItem, props => props.$isStandalone && 'inline-flex', componentStyles);
|
|
54
54
|
|
|
55
55
|
export { StyledHeader };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
|
|
11
11
|
import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
|
|
12
12
|
import { StyledHeaderItemText } from './StyledHeaderItemText.js';
|
|
@@ -57,10 +57,10 @@ const sizeStyles = _ref2 => {
|
|
|
57
57
|
};
|
|
58
58
|
const StyledHeaderItem = styled(StyledBaseHeaderItem).attrs({
|
|
59
59
|
'data-garden-id': COMPONENT_ID,
|
|
60
|
-
'data-garden-version': '9.
|
|
60
|
+
'data-garden-version': '9.5.1'
|
|
61
61
|
}).withConfig({
|
|
62
62
|
displayName: "StyledHeaderItem",
|
|
63
63
|
componentId: "sc-14sft6n-0"
|
|
64
|
-
})(["cursor:pointer;&:hover,&:focus{text-decoration:none;}", ";", ";& ", ",& ", "{transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;}", ";"], sizeStyles, colorStyles, StyledHeaderItemIcon, StyledHeaderItemText,
|
|
64
|
+
})(["cursor:pointer;&:hover,&:focus{text-decoration:none;}", ";", ";& ", ",& ", "{transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;}", ";"], sizeStyles, colorStyles, StyledHeaderItemIcon, StyledHeaderItemText, componentStyles);
|
|
65
65
|
|
|
66
66
|
export { StyledHeaderItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { StyledBaseIcon,
|
|
8
|
+
import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.header_item_icon';
|
|
11
11
|
const sizeStyles = _ref => {
|
|
@@ -18,10 +18,10 @@ const sizeStyles = _ref => {
|
|
|
18
18
|
};
|
|
19
19
|
const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs({
|
|
20
20
|
'data-garden-id': COMPONENT_ID,
|
|
21
|
-
'data-garden-version': '9.
|
|
21
|
+
'data-garden-version': '9.5.1'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledHeaderItemIcon",
|
|
24
24
|
componentId: "sc-1jhhp6z-0"
|
|
25
|
-
})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles,
|
|
25
|
+
})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles, componentStyles);
|
|
26
26
|
|
|
27
27
|
export { StyledHeaderItemIcon };
|
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { hideVisually } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.header_item_text';
|
|
12
12
|
const StyledHeaderItemText = styled.span.attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.5.1'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledHeaderItemText",
|
|
17
17
|
componentId: "sc-goz7la-0"
|
|
18
|
-
})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.$isClipped && hideVisually(),
|
|
18
|
+
})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.$isClipped && hideVisually(), componentStyles);
|
|
19
19
|
|
|
20
20
|
export { StyledHeaderItemText };
|
|
@@ -5,17 +5,17 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.header_item_wrapper';
|
|
12
12
|
const StyledHeaderItemWrapper = styled(StyledBaseHeaderItem).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.5.1',
|
|
15
15
|
as: 'div'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledHeaderItemWrapper",
|
|
18
18
|
componentId: "sc-1uieu55-0"
|
|
19
|
-
})(["", ";"],
|
|
19
|
+
})(["", ";"], componentStyles);
|
|
20
20
|
|
|
21
21
|
export { StyledHeaderItemWrapper };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { hideVisually } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledHeaderItemIcon } from './StyledHeaderItemIcon.js';
|
|
11
11
|
import { StyledBaseHeaderItem } from './StyledBaseHeaderItem.js';
|
|
12
12
|
import { StyledHeaderItemText } from './StyledHeaderItemText.js';
|
|
@@ -42,11 +42,11 @@ const sizeStyles = _ref2 => {
|
|
|
42
42
|
};
|
|
43
43
|
const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({
|
|
44
44
|
'data-garden-id': COMPONENT_ID,
|
|
45
|
-
'data-garden-version': '9.
|
|
45
|
+
'data-garden-version': '9.5.1',
|
|
46
46
|
as: 'div'
|
|
47
47
|
}).withConfig({
|
|
48
48
|
displayName: "StyledLogoHeaderItem",
|
|
49
49
|
componentId: "sc-1n1d1yv-0"
|
|
50
|
-
})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles, colorStyles, StyledHeaderItemText, hideVisually(),
|
|
50
|
+
})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles, colorStyles, StyledHeaderItemText, hideVisually(), componentStyles);
|
|
51
51
|
|
|
52
52
|
export { StyledLogoHeaderItem };
|
|
@@ -20,7 +20,7 @@ const sizeStyles = _ref => {
|
|
|
20
20
|
};
|
|
21
21
|
const StyledBaseNavItem = styled.div.attrs({
|
|
22
22
|
'data-garden-id': COMPONENT_ID,
|
|
23
|
-
'data-garden-version': '9.
|
|
23
|
+
'data-garden-version': '9.5.1'
|
|
24
24
|
}).withConfig({
|
|
25
25
|
displayName: "StyledBaseNavItem",
|
|
26
26
|
componentId: "sc-zvo43f-0"
|
|
@@ -10,7 +10,7 @@ import { StyledBaseNavItem } from './StyledBaseNavItem.js';
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.brandmark_nav_list_item';
|
|
11
11
|
const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledBrandmarkNavItem",
|
|
16
16
|
componentId: "sc-8kynd4-0"
|
|
@@ -25,7 +25,7 @@ const colorStyles = _ref => {
|
|
|
25
25
|
};
|
|
26
26
|
const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
|
|
27
27
|
'data-garden-id': COMPONENT_ID,
|
|
28
|
-
'data-garden-version': '9.
|
|
28
|
+
'data-garden-version': '9.5.1'
|
|
29
29
|
}).withConfig({
|
|
30
30
|
displayName: "StyledLogoNavItem",
|
|
31
31
|
componentId: "sc-saaydx-0"
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { getNavWidthExpanded, getNavWidth } from '../utils.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.nav';
|
|
@@ -42,10 +42,10 @@ const sizeStyles = _ref2 => {
|
|
|
42
42
|
};
|
|
43
43
|
const StyledNav = styled.nav.attrs({
|
|
44
44
|
'data-garden-id': COMPONENT_ID,
|
|
45
|
-
'data-garden-version': '9.
|
|
45
|
+
'data-garden-version': '9.5.1'
|
|
46
46
|
}).withConfig({
|
|
47
47
|
displayName: "StyledNav",
|
|
48
48
|
componentId: "sc-6j462r-0"
|
|
49
|
-
})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles, sizeStyles,
|
|
49
|
+
})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles, sizeStyles, componentStyles);
|
|
50
50
|
|
|
51
51
|
export { StyledNav };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledBaseNavItem } from './StyledBaseNavItem.js';
|
|
11
11
|
import { StyledNavItemIcon } from './StyledNavItemIcon.js';
|
|
12
12
|
import { getNavWidth } from '../utils.js';
|
|
@@ -81,11 +81,11 @@ const sizeStyles = _ref2 => {
|
|
|
81
81
|
};
|
|
82
82
|
const StyledNavButton = styled(StyledBaseNavItem).attrs({
|
|
83
83
|
'data-garden-id': COMPONENT_ID,
|
|
84
|
-
'data-garden-version': '9.
|
|
84
|
+
'data-garden-version': '9.5.1',
|
|
85
85
|
as: 'button'
|
|
86
86
|
}).withConfig({
|
|
87
87
|
displayName: "StyledNavButton",
|
|
88
88
|
componentId: "sc-f5ux3-0"
|
|
89
|
-
})(["flex:1;justify-content:", ";cursor:pointer;text-align:", ";text-decoration:none;", ";&:hover,&:focus{text-decoration:none;}&[aria-current='true']{cursor:default;}", ";", ";"], props => props.$isExpanded && 'start', props => props.$isExpanded && 'inherit', sizeStyles, colorStyles,
|
|
89
|
+
})(["flex:1;justify-content:", ";cursor:pointer;text-align:", ";text-decoration:none;", ";&:hover,&:focus{text-decoration:none;}&[aria-current='true']{cursor:default;}", ";", ";"], props => props.$isExpanded && 'start', props => props.$isExpanded && 'inherit', sizeStyles, colorStyles, componentStyles);
|
|
90
90
|
|
|
91
91
|
export { StyledNavButton };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { StyledBaseIcon,
|
|
8
|
+
import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.nav_item_icon';
|
|
11
11
|
const sizeStyles = _ref => {
|
|
@@ -17,10 +17,10 @@ const sizeStyles = _ref => {
|
|
|
17
17
|
};
|
|
18
18
|
const StyledNavItemIcon = styled(StyledBaseIcon).attrs({
|
|
19
19
|
'data-garden-id': COMPONENT_ID,
|
|
20
|
-
'data-garden-version': '9.
|
|
20
|
+
'data-garden-version': '9.5.1'
|
|
21
21
|
}).withConfig({
|
|
22
22
|
displayName: "StyledNavItemIcon",
|
|
23
23
|
componentId: "sc-7w9rpt-0"
|
|
24
|
-
})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles,
|
|
24
|
+
})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles, componentStyles);
|
|
25
25
|
|
|
26
26
|
export { StyledNavItemIcon };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import {
|
|
9
|
+
import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledNavButton } from './StyledNavButton.js';
|
|
11
11
|
import { getNavWidth } from '../utils.js';
|
|
12
12
|
|
|
@@ -27,10 +27,10 @@ const sizeStyles = _ref => {
|
|
|
27
27
|
};
|
|
28
28
|
const StyledNavItemText = styled.span.attrs({
|
|
29
29
|
'data-garden-id': COMPONENT_ID,
|
|
30
|
-
'data-garden-version': '9.
|
|
30
|
+
'data-garden-version': '9.5.1'
|
|
31
31
|
}).withConfig({
|
|
32
32
|
displayName: "StyledNavItemText",
|
|
33
33
|
componentId: "sc-13m84xl-0"
|
|
34
|
-
})(["position:absolute;order:1;overflow:hidden;", " > &&{position:", ";flex:", ";text-overflow:", ";}", ";", ";"], StyledNavButton, props => props.$isExpanded ? 'static' : undefined, props => props.$isExpanded ? 1 : undefined, props => props.$isExpanded ? 'ellipsis' : undefined, sizeStyles,
|
|
34
|
+
})(["position:absolute;order:1;overflow:hidden;", " > &&{position:", ";flex:", ";text-overflow:", ";}", ";", ";"], StyledNavButton, props => props.$isExpanded ? 'static' : undefined, props => props.$isExpanded ? 1 : undefined, props => props.$isExpanded ? 'ellipsis' : undefined, sizeStyles, componentStyles);
|
|
35
35
|
|
|
36
36
|
export { StyledNavItemText };
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.nav_list';
|
|
11
11
|
const StyledNavList = styled.ul.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledNavList",
|
|
16
16
|
componentId: "sc-1s0nkfb-0"
|
|
17
|
-
})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"],
|
|
17
|
+
})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledNavList };
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.nav_list_item';
|
|
11
11
|
const StyledNavListItem = styled.li.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledNavListItem",
|
|
16
16
|
componentId: "sc-18cj2v7-0"
|
|
17
|
-
})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"],
|
|
17
|
+
})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledNavListItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -44,10 +44,10 @@ const sizeStyles = _ref2 => {
|
|
|
44
44
|
};
|
|
45
45
|
const StyledSheet = styled.aside.attrs({
|
|
46
46
|
'data-garden-id': COMPONENT_ID,
|
|
47
|
-
'data-garden-version': '9.
|
|
47
|
+
'data-garden-version': '9.5.1'
|
|
48
48
|
}).withConfig({
|
|
49
49
|
displayName: "StyledSheet",
|
|
50
50
|
componentId: "sc-dx8ijk-0"
|
|
51
|
-
})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.$isAnimated && 'width 250ms ease-in-out', sizeStyles, colorStyles,
|
|
51
|
+
})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.$isAnimated && 'width 250ms ease-in-out', sizeStyles, colorStyles, componentStyles);
|
|
52
52
|
|
|
53
53
|
export { StyledSheet };
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_body';
|
|
11
11
|
const StyledSheetBody = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetBody",
|
|
16
16
|
componentId: "sc-bt4eoj-0"
|
|
17
|
-
})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base,
|
|
17
|
+
})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledSheetBody };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { IconButton } from '@zendeskgarden/react-buttons';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'chrome.sheet_close';
|
|
@@ -19,10 +19,10 @@ const positionStyles = _ref => {
|
|
|
19
19
|
};
|
|
20
20
|
const StyledSheetClose = styled(IconButton).attrs({
|
|
21
21
|
'data-garden-id': COMPONENT_ID,
|
|
22
|
-
'data-garden-version': '9.
|
|
22
|
+
'data-garden-version': '9.5.1'
|
|
23
23
|
}).withConfig({
|
|
24
24
|
displayName: "StyledSheetClose",
|
|
25
25
|
componentId: "sc-1ab02oq-0"
|
|
26
|
-
})(["position:absolute;", ";", ";"], positionStyles,
|
|
26
|
+
})(["position:absolute;", ";", ";"], positionStyles, componentStyles);
|
|
27
27
|
|
|
28
28
|
export { StyledSheetClose };
|
|
@@ -5,18 +5,18 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getLineHeight, getColor,
|
|
8
|
+
import { getLineHeight, getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_description';
|
|
11
11
|
const StyledSheetDescription = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetDescription",
|
|
16
16
|
componentId: "sc-1puglb6-0"
|
|
17
17
|
})(["line-height:", ";color:", ";", ";"], p => getLineHeight(p.theme.space.base * 4, p.theme.fontSizes.md), p => getColor({
|
|
18
18
|
theme: p.theme,
|
|
19
19
|
variable: 'foreground.subtle'
|
|
20
|
-
}),
|
|
20
|
+
}), componentStyles);
|
|
21
21
|
|
|
22
22
|
export { StyledSheetDescription };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_footer';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -29,10 +29,10 @@ const sizeStyles = _ref2 => {
|
|
|
29
29
|
};
|
|
30
30
|
const StyledSheetFooter = styled.footer.attrs({
|
|
31
31
|
'data-garden-id': COMPONENT_ID,
|
|
32
|
-
'data-garden-version': '9.
|
|
32
|
+
'data-garden-version': '9.5.1'
|
|
33
33
|
}).withConfig({
|
|
34
34
|
displayName: "StyledSheetFooter",
|
|
35
35
|
componentId: "sc-2cktos-0"
|
|
36
|
-
})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.$isCompact ? 'center' : 'flex-end', sizeStyles, colorStyles,
|
|
36
|
+
})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.$isCompact ? 'center' : 'flex-end', sizeStyles, colorStyles, componentStyles);
|
|
37
37
|
|
|
38
38
|
export { StyledSheetFooter };
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_footer_item';
|
|
11
11
|
const StyledSheetFooterItem = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetFooterItem",
|
|
16
16
|
componentId: "sc-r9ixh-0"
|
|
17
|
-
})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`,
|
|
17
|
+
})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledSheetFooterItem };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_header';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -33,10 +33,10 @@ const sizeStyles = _ref2 => {
|
|
|
33
33
|
};
|
|
34
34
|
const StyledSheetHeader = styled.header.attrs({
|
|
35
35
|
'data-garden-id': COMPONENT_ID,
|
|
36
|
-
'data-garden-version': '9.
|
|
36
|
+
'data-garden-version': '9.5.1'
|
|
37
37
|
}).withConfig({
|
|
38
38
|
displayName: "StyledSheetHeader",
|
|
39
39
|
componentId: "sc-o2ry8i-0"
|
|
40
|
-
})(["", ";", ";", ";"], sizeStyles, colorStyles,
|
|
40
|
+
})(["", ";", ";", ";"], sizeStyles, colorStyles, componentStyles);
|
|
41
41
|
|
|
42
42
|
export { StyledSheetHeader };
|
|
@@ -5,18 +5,18 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getColor,
|
|
8
|
+
import { getColor, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_title';
|
|
11
11
|
const StyledSheetTitle = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSheetTitle",
|
|
16
16
|
componentId: "sc-1gogk75-0"
|
|
17
17
|
})(["color:", ";font-weight:", ";", ";"], p => getColor({
|
|
18
18
|
theme: p.theme,
|
|
19
19
|
variable: 'foreground.default'
|
|
20
|
-
}), props => props.theme.fontWeights.semibold,
|
|
20
|
+
}), props => props.theme.fontWeights.semibold, componentStyles);
|
|
21
21
|
|
|
22
22
|
export { StyledSheetTitle };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'chrome.sheet_wrapper';
|
|
11
11
|
const transformStyles = _ref => {
|
|
@@ -28,10 +28,10 @@ const transformStyles = _ref => {
|
|
|
28
28
|
};
|
|
29
29
|
const StyledSheetWrapper = styled.div.attrs({
|
|
30
30
|
'data-garden-id': COMPONENT_ID,
|
|
31
|
-
'data-garden-version': '9.
|
|
31
|
+
'data-garden-version': '9.5.1'
|
|
32
32
|
}).withConfig({
|
|
33
33
|
displayName: "StyledSheetWrapper",
|
|
34
34
|
componentId: "sc-f6x9zb-0"
|
|
35
|
-
})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.$size, transformStyles,
|
|
35
|
+
})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.$size, transformStyles, componentStyles);
|
|
36
36
|
|
|
37
37
|
export { StyledSheetWrapper };
|
package/dist/index.cjs.js
CHANGED
|
@@ -47,11 +47,11 @@ const PRODUCTS = ['chat', 'explore', 'guide', 'support', 'talk'];
|
|
|
47
47
|
const COMPONENT_ID$w = 'chrome.chrome';
|
|
48
48
|
const StyledChrome = styled__default.default.div.attrs({
|
|
49
49
|
'data-garden-id': COMPONENT_ID$w,
|
|
50
|
-
'data-garden-version': '9.
|
|
50
|
+
'data-garden-version': '9.5.1'
|
|
51
51
|
}).withConfig({
|
|
52
52
|
displayName: "StyledChrome",
|
|
53
53
|
componentId: "sc-1uqm6u6-0"
|
|
54
|
-
})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl',
|
|
54
|
+
})(["display:flex;position:relative;margin:0;height:100vh;overflow-y:hidden;font-family:", ";direction:", ";", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', reactTheming.componentStyles);
|
|
55
55
|
|
|
56
56
|
const getFooterHeight = theme => `${theme.space.base * 20}px`;
|
|
57
57
|
const getHeaderHeight = theme => `${theme.space.base * 13}px`;
|
|
@@ -110,11 +110,11 @@ const sizeStyles$g = _ref2 => {
|
|
|
110
110
|
};
|
|
111
111
|
const StyledSkipNav = styled__default.default.a.attrs({
|
|
112
112
|
'data-garden-id': COMPONENT_ID$v,
|
|
113
|
-
'data-garden-version': '9.
|
|
113
|
+
'data-garden-version': '9.5.1'
|
|
114
114
|
}).withConfig({
|
|
115
115
|
displayName: "StyledSkipNav",
|
|
116
116
|
componentId: "sc-1tsro34-0"
|
|
117
|
-
})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.$zIndex, props => props.theme.borderRadii.md, sizeStyles$g, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$a,
|
|
117
|
+
})(["", ";display:inline-flex;position:absolute;left:50%;align-items:center;justify-content:center;transform:translateX(-50%);direction:", ";z-index:", ";border-radius:", ";text-decoration:underline;white-space:nowrap;", ";", "{text-decoration:none;}&:hover{text-decoration:underline;}", ";", ";"], animationStyles(), props => props.theme.rtl && 'rtl', props => props.$zIndex, props => props.theme.borderRadii.md, sizeStyles$g, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$a, reactTheming.componentStyles);
|
|
118
118
|
|
|
119
119
|
var _path$1;
|
|
120
120
|
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
@@ -143,26 +143,26 @@ const sizeStyles$f = _ref => {
|
|
|
143
143
|
};
|
|
144
144
|
const StyledSkipNavIcon = styled__default.default(SvgLinkStroke).attrs({
|
|
145
145
|
'data-garden-id': COMPONENT_ID$u,
|
|
146
|
-
'data-garden-version': '9.
|
|
146
|
+
'data-garden-version': '9.5.1'
|
|
147
147
|
}).withConfig({
|
|
148
148
|
displayName: "StyledSkipNavIcon",
|
|
149
149
|
componentId: "sc-1ika5z4-0"
|
|
150
150
|
})(["transform:", ";color:", ";", ";", ";"], p => p.theme.rtl && 'scaleX(-1)', p => reactTheming.getColor({
|
|
151
151
|
theme: p.theme,
|
|
152
152
|
variable: 'foreground.subtle'
|
|
153
|
-
}), sizeStyles$f,
|
|
153
|
+
}), sizeStyles$f, reactTheming.componentStyles);
|
|
154
154
|
|
|
155
155
|
const COMPONENT_ID$t = 'chrome.body';
|
|
156
156
|
const StyledBody = styled__default.default.div.attrs({
|
|
157
157
|
'data-garden-id': COMPONENT_ID$t,
|
|
158
|
-
'data-garden-version': '9.
|
|
158
|
+
'data-garden-version': '9.5.1'
|
|
159
159
|
}).withConfig({
|
|
160
160
|
displayName: "StyledBody",
|
|
161
161
|
componentId: "sc-c7h9kv-0"
|
|
162
162
|
})(["flex:1;order:1;background-color:", ";min-width:0;", ";"], props => reactTheming.getColor({
|
|
163
163
|
theme: props.theme,
|
|
164
164
|
variable: 'background.default'
|
|
165
|
-
}),
|
|
165
|
+
}), reactTheming.componentStyles);
|
|
166
166
|
|
|
167
167
|
const COMPONENT_ID$s = 'chrome.content';
|
|
168
168
|
const sizeStyles$e = _ref => {
|
|
@@ -177,26 +177,26 @@ const sizeStyles$e = _ref => {
|
|
|
177
177
|
};
|
|
178
178
|
const StyledContent = styled__default.default.div.attrs({
|
|
179
179
|
'data-garden-id': COMPONENT_ID$s,
|
|
180
|
-
'data-garden-version': '9.
|
|
180
|
+
'data-garden-version': '9.5.1'
|
|
181
181
|
}).withConfig({
|
|
182
182
|
displayName: "StyledContent",
|
|
183
183
|
componentId: "sc-qcuzxn-0"
|
|
184
184
|
})(["display:flex;color-scheme:only ", ";color:", ";", ";&:focus{outline:none;}", ";"], p => p.theme.colors.base, props => reactTheming.getColor({
|
|
185
185
|
theme: props.theme,
|
|
186
186
|
variable: 'foreground.default'
|
|
187
|
-
}), sizeStyles$e,
|
|
187
|
+
}), sizeStyles$e, reactTheming.componentStyles);
|
|
188
188
|
|
|
189
189
|
const COMPONENT_ID$r = 'chrome.main';
|
|
190
190
|
const StyledMain = styled__default.default.main.attrs({
|
|
191
191
|
'data-garden-id': COMPONENT_ID$r,
|
|
192
|
-
'data-garden-version': '9.
|
|
192
|
+
'data-garden-version': '9.5.1'
|
|
193
193
|
}).withConfig({
|
|
194
194
|
displayName: "StyledMain",
|
|
195
195
|
componentId: "sc-t61cre-0"
|
|
196
196
|
})(["flex:1;order:1;background-color:", ";overflow:auto;&:focus{outline:none;}", ";"], props => reactTheming.getColor({
|
|
197
197
|
theme: props.theme,
|
|
198
198
|
variable: 'background.default'
|
|
199
|
-
}),
|
|
199
|
+
}), reactTheming.componentStyles);
|
|
200
200
|
|
|
201
201
|
const COMPONENT_ID$q = 'chrome.footer';
|
|
202
202
|
const colorStyles$9 = _ref => {
|
|
@@ -224,20 +224,20 @@ const sizeStyles$d = _ref2 => {
|
|
|
224
224
|
};
|
|
225
225
|
const StyledFooter = styled__default.default.footer.attrs({
|
|
226
226
|
'data-garden-id': COMPONENT_ID$q,
|
|
227
|
-
'data-garden-version': '9.
|
|
227
|
+
'data-garden-version': '9.5.1'
|
|
228
228
|
}).withConfig({
|
|
229
229
|
displayName: "StyledFooter",
|
|
230
230
|
componentId: "sc-v7lib2-0"
|
|
231
|
-
})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles$d, colorStyles$9,
|
|
231
|
+
})(["display:flex;align-items:center;justify-content:flex-end;", ";", ";", ";"], sizeStyles$d, colorStyles$9, reactTheming.componentStyles);
|
|
232
232
|
|
|
233
233
|
const COMPONENT_ID$p = 'chrome.footer_item';
|
|
234
234
|
const StyledFooterItem = styled__default.default.div.attrs({
|
|
235
235
|
'data-garden-id': COMPONENT_ID$p,
|
|
236
|
-
'data-garden-version': '9.
|
|
236
|
+
'data-garden-version': '9.5.1'
|
|
237
237
|
}).withConfig({
|
|
238
238
|
displayName: "StyledFooterItem",
|
|
239
239
|
componentId: "sc-1cktm85-0"
|
|
240
|
-
})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`,
|
|
240
|
+
})(["margin:", ";", ";"], props => `0 ${props.theme.space.base}px`, reactTheming.componentStyles);
|
|
241
241
|
|
|
242
242
|
const COMPONENT_ID$o = 'chrome.header_item_icon';
|
|
243
243
|
const sizeStyles$c = _ref => {
|
|
@@ -250,11 +250,11 @@ const sizeStyles$c = _ref => {
|
|
|
250
250
|
};
|
|
251
251
|
const StyledHeaderItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
252
252
|
'data-garden-id': COMPONENT_ID$o,
|
|
253
|
-
'data-garden-version': '9.
|
|
253
|
+
'data-garden-version': '9.5.1'
|
|
254
254
|
}).withConfig({
|
|
255
255
|
displayName: "StyledHeaderItemIcon",
|
|
256
256
|
componentId: "sc-1jhhp6z-0"
|
|
257
|
-
})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles$c,
|
|
257
|
+
})(["transition:transform 0.25s ease-in-out;", ";", ";"], sizeStyles$c, reactTheming.componentStyles);
|
|
258
258
|
|
|
259
259
|
const COMPONENT_ID$n = 'chrome.base_header_item';
|
|
260
260
|
const sizeStyles$b = _ref => {
|
|
@@ -280,20 +280,20 @@ const sizeStyles$b = _ref => {
|
|
|
280
280
|
};
|
|
281
281
|
const StyledBaseHeaderItem = styled__default.default.button.attrs({
|
|
282
282
|
'data-garden-id': COMPONENT_ID$n,
|
|
283
|
-
'data-garden-version': '9.
|
|
283
|
+
'data-garden-version': '9.5.1'
|
|
284
284
|
}).withConfig({
|
|
285
285
|
displayName: "StyledBaseHeaderItem",
|
|
286
286
|
componentId: "sc-1qua7h6-0"
|
|
287
|
-
})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;border:none;background:transparent;text-decoration:none;white-space:nowrap;color:inherit;", ";", ";"], props => props.$maxX && '1', props => props.$maxX ? 'start' : 'center', sizeStyles$b,
|
|
287
|
+
})(["display:inline-flex;position:relative;flex:", ";align-items:center;justify-content:", ";order:1;transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;z-index:0;border:none;background:transparent;text-decoration:none;white-space:nowrap;color:inherit;", ";", ";"], props => props.$maxX && '1', props => props.$maxX ? 'start' : 'center', sizeStyles$b, reactTheming.componentStyles);
|
|
288
288
|
|
|
289
289
|
const COMPONENT_ID$m = 'chrome.header_item_text';
|
|
290
290
|
const StyledHeaderItemText = styled__default.default.span.attrs({
|
|
291
291
|
'data-garden-id': COMPONENT_ID$m,
|
|
292
|
-
'data-garden-version': '9.
|
|
292
|
+
'data-garden-version': '9.5.1'
|
|
293
293
|
}).withConfig({
|
|
294
294
|
displayName: "StyledHeaderItemText",
|
|
295
295
|
componentId: "sc-goz7la-0"
|
|
296
|
-
})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.$isClipped && polished.hideVisually(),
|
|
296
|
+
})(["margin:", ";", " ", ";"], props => `0 ${props.theme.space.base * 0.75}px`, props => props.$isClipped && polished.hideVisually(), reactTheming.componentStyles);
|
|
297
297
|
|
|
298
298
|
const COMPONENT_ID$l = 'chrome.header_item';
|
|
299
299
|
const colorStyles$8 = _ref => {
|
|
@@ -325,12 +325,12 @@ const sizeStyles$a = _ref2 => {
|
|
|
325
325
|
};
|
|
326
326
|
const StyledLogoHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
|
|
327
327
|
'data-garden-id': COMPONENT_ID$l,
|
|
328
|
-
'data-garden-version': '9.
|
|
328
|
+
'data-garden-version': '9.5.1',
|
|
329
329
|
as: 'div'
|
|
330
330
|
}).withConfig({
|
|
331
331
|
displayName: "StyledLogoHeaderItem",
|
|
332
332
|
componentId: "sc-1n1d1yv-0"
|
|
333
|
-
})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles$a, colorStyles$8, StyledHeaderItemText, polished.hideVisually(),
|
|
333
|
+
})(["display:none;order:0;border-radius:0;padding:0;overflow:hidden;text-decoration:none;", ";", ";", "{", "}", ";"], sizeStyles$a, colorStyles$8, StyledHeaderItemText, polished.hideVisually(), reactTheming.componentStyles);
|
|
334
334
|
|
|
335
335
|
const COMPONENT_ID$k = 'chrome.header';
|
|
336
336
|
const colorStyles$7 = _ref => {
|
|
@@ -369,11 +369,11 @@ const sizeStyles$9 = _ref2 => {
|
|
|
369
369
|
};
|
|
370
370
|
const StyledHeader = styled__default.default.header.attrs({
|
|
371
371
|
'data-garden-id': COMPONENT_ID$k,
|
|
372
|
-
'data-garden-version': '9.
|
|
372
|
+
'data-garden-version': '9.5.1'
|
|
373
373
|
}).withConfig({
|
|
374
374
|
displayName: "StyledHeader",
|
|
375
375
|
componentId: "sc-1cexpz-0"
|
|
376
|
-
})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.$isStandalone && 'relative', sizeStyles$9, colorStyles$7, StyledLogoHeaderItem, props => props.$isStandalone && 'inline-flex',
|
|
376
|
+
})(["display:flex;position:", ";align-items:center;justify-content:flex-end;", ";", ";", "{display:", ";}", ";"], props => props.$isStandalone && 'relative', sizeStyles$9, colorStyles$7, StyledLogoHeaderItem, props => props.$isStandalone && 'inline-flex', reactTheming.componentStyles);
|
|
377
377
|
|
|
378
378
|
const COMPONENT_ID$j = 'chrome.header_item';
|
|
379
379
|
const colorStyles$6 = _ref => {
|
|
@@ -420,21 +420,21 @@ const sizeStyles$8 = _ref2 => {
|
|
|
420
420
|
};
|
|
421
421
|
const StyledHeaderItem = styled__default.default(StyledBaseHeaderItem).attrs({
|
|
422
422
|
'data-garden-id': COMPONENT_ID$j,
|
|
423
|
-
'data-garden-version': '9.
|
|
423
|
+
'data-garden-version': '9.5.1'
|
|
424
424
|
}).withConfig({
|
|
425
425
|
displayName: "StyledHeaderItem",
|
|
426
426
|
componentId: "sc-14sft6n-0"
|
|
427
|
-
})(["cursor:pointer;&:hover,&:focus{text-decoration:none;}", ";", ";& ", ",& ", "{transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;}", ";"], sizeStyles$8, colorStyles$6, StyledHeaderItemIcon, StyledHeaderItemText,
|
|
427
|
+
})(["cursor:pointer;&:hover,&:focus{text-decoration:none;}", ";", ";& ", ",& ", "{transition:box-shadow 0.1s ease-in-out,color 0.1s ease-in-out;}", ";"], sizeStyles$8, colorStyles$6, StyledHeaderItemIcon, StyledHeaderItemText, reactTheming.componentStyles);
|
|
428
428
|
|
|
429
429
|
const COMPONENT_ID$i = 'chrome.header_item_wrapper';
|
|
430
430
|
const StyledHeaderItemWrapper = styled__default.default(StyledBaseHeaderItem).attrs({
|
|
431
431
|
'data-garden-id': COMPONENT_ID$i,
|
|
432
|
-
'data-garden-version': '9.
|
|
432
|
+
'data-garden-version': '9.5.1',
|
|
433
433
|
as: 'div'
|
|
434
434
|
}).withConfig({
|
|
435
435
|
displayName: "StyledHeaderItemWrapper",
|
|
436
436
|
componentId: "sc-1uieu55-0"
|
|
437
|
-
})(["", ";"],
|
|
437
|
+
})(["", ";"], reactTheming.componentStyles);
|
|
438
438
|
|
|
439
439
|
const COMPONENT_ID$h = 'chrome.nav';
|
|
440
440
|
const colorStyles$5 = _ref => {
|
|
@@ -470,29 +470,29 @@ const sizeStyles$7 = _ref2 => {
|
|
|
470
470
|
};
|
|
471
471
|
const StyledNav = styled__default.default.nav.attrs({
|
|
472
472
|
'data-garden-id': COMPONENT_ID$h,
|
|
473
|
-
'data-garden-version': '9.
|
|
473
|
+
'data-garden-version': '9.5.1'
|
|
474
474
|
}).withConfig({
|
|
475
475
|
displayName: "StyledNav",
|
|
476
476
|
componentId: "sc-6j462r-0"
|
|
477
|
-
})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles$5, sizeStyles$7,
|
|
477
|
+
})(["display:flex;position:relative;flex-direction:column;flex-shrink:0;order:-1;", ";", ";", ";"], colorStyles$5, sizeStyles$7, reactTheming.componentStyles);
|
|
478
478
|
|
|
479
479
|
const COMPONENT_ID$g = 'chrome.nav_list';
|
|
480
480
|
const StyledNavList = styled__default.default.ul.attrs({
|
|
481
481
|
'data-garden-id': COMPONENT_ID$g,
|
|
482
|
-
'data-garden-version': '9.
|
|
482
|
+
'data-garden-version': '9.5.1'
|
|
483
483
|
}).withConfig({
|
|
484
484
|
displayName: "StyledNavList",
|
|
485
485
|
componentId: "sc-1s0nkfb-0"
|
|
486
|
-
})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"],
|
|
486
|
+
})(["display:flex;flex:1;flex-direction:column;order:0;margin:0;padding:0;list-style:none;", ";"], reactTheming.componentStyles);
|
|
487
487
|
|
|
488
488
|
const COMPONENT_ID$f = 'chrome.nav_list_item';
|
|
489
489
|
const StyledNavListItem = styled__default.default.li.attrs({
|
|
490
490
|
'data-garden-id': COMPONENT_ID$f,
|
|
491
|
-
'data-garden-version': '9.
|
|
491
|
+
'data-garden-version': '9.5.1'
|
|
492
492
|
}).withConfig({
|
|
493
493
|
displayName: "StyledNavListItem",
|
|
494
494
|
componentId: "sc-18cj2v7-0"
|
|
495
|
-
})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"],
|
|
495
|
+
})(["display:flex;order:1;margin:0;padding:0;list-style-type:none;", ";"], reactTheming.componentStyles);
|
|
496
496
|
|
|
497
497
|
const COMPONENT_ID$e = 'chrome.base_nav_item';
|
|
498
498
|
const sizeStyles$6 = _ref => {
|
|
@@ -506,7 +506,7 @@ const sizeStyles$6 = _ref => {
|
|
|
506
506
|
};
|
|
507
507
|
const StyledBaseNavItem = styled__default.default.div.attrs({
|
|
508
508
|
'data-garden-id': COMPONENT_ID$e,
|
|
509
|
-
'data-garden-version': '9.
|
|
509
|
+
'data-garden-version': '9.5.1'
|
|
510
510
|
}).withConfig({
|
|
511
511
|
displayName: "StyledBaseNavItem",
|
|
512
512
|
componentId: "sc-zvo43f-0"
|
|
@@ -528,7 +528,7 @@ const colorStyles$4 = _ref => {
|
|
|
528
528
|
};
|
|
529
529
|
const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
|
|
530
530
|
'data-garden-id': COMPONENT_ID$d,
|
|
531
|
-
'data-garden-version': '9.
|
|
531
|
+
'data-garden-version': '9.5.1'
|
|
532
532
|
}).withConfig({
|
|
533
533
|
displayName: "StyledLogoNavItem",
|
|
534
534
|
componentId: "sc-saaydx-0"
|
|
@@ -537,7 +537,7 @@ const StyledLogoNavItem = styled__default.default(StyledBaseNavItem).attrs({
|
|
|
537
537
|
const COMPONENT_ID$c = 'chrome.brandmark_nav_list_item';
|
|
538
538
|
const StyledBrandmarkNavItem = styled__default.default(StyledBaseNavItem).attrs({
|
|
539
539
|
'data-garden-id': COMPONENT_ID$c,
|
|
540
|
-
'data-garden-version': '9.
|
|
540
|
+
'data-garden-version': '9.5.1'
|
|
541
541
|
}).withConfig({
|
|
542
542
|
displayName: "StyledBrandmarkNavItem",
|
|
543
543
|
componentId: "sc-8kynd4-0"
|
|
@@ -553,11 +553,11 @@ const sizeStyles$5 = _ref => {
|
|
|
553
553
|
};
|
|
554
554
|
const StyledNavItemIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
555
555
|
'data-garden-id': COMPONENT_ID$b,
|
|
556
|
-
'data-garden-version': '9.
|
|
556
|
+
'data-garden-version': '9.5.1'
|
|
557
557
|
}).withConfig({
|
|
558
558
|
displayName: "StyledNavItemIcon",
|
|
559
559
|
componentId: "sc-7w9rpt-0"
|
|
560
|
-
})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles$5,
|
|
560
|
+
})(["align-self:flex-start;order:0;border-radius:", ";", ";", ";"], props => props.theme.borderRadii.md, sizeStyles$5, reactTheming.componentStyles);
|
|
561
561
|
|
|
562
562
|
const COMPONENT_ID$a = 'chrome.nav_button';
|
|
563
563
|
const colorStyles$3 = _ref => {
|
|
@@ -629,12 +629,12 @@ const sizeStyles$4 = _ref2 => {
|
|
|
629
629
|
};
|
|
630
630
|
const StyledNavButton = styled__default.default(StyledBaseNavItem).attrs({
|
|
631
631
|
'data-garden-id': COMPONENT_ID$a,
|
|
632
|
-
'data-garden-version': '9.
|
|
632
|
+
'data-garden-version': '9.5.1',
|
|
633
633
|
as: 'button'
|
|
634
634
|
}).withConfig({
|
|
635
635
|
displayName: "StyledNavButton",
|
|
636
636
|
componentId: "sc-f5ux3-0"
|
|
637
|
-
})(["flex:1;justify-content:", ";cursor:pointer;text-align:", ";text-decoration:none;", ";&:hover,&:focus{text-decoration:none;}&[aria-current='true']{cursor:default;}", ";", ";"], props => props.$isExpanded && 'start', props => props.$isExpanded && 'inherit', sizeStyles$4, colorStyles$3,
|
|
637
|
+
})(["flex:1;justify-content:", ";cursor:pointer;text-align:", ";text-decoration:none;", ";&:hover,&:focus{text-decoration:none;}&[aria-current='true']{cursor:default;}", ";", ";"], props => props.$isExpanded && 'start', props => props.$isExpanded && 'inherit', sizeStyles$4, colorStyles$3, reactTheming.componentStyles);
|
|
638
638
|
|
|
639
639
|
const COMPONENT_ID$9 = 'chrome.nav_item_text';
|
|
640
640
|
const sizeStyles$3 = _ref => {
|
|
@@ -653,11 +653,11 @@ const sizeStyles$3 = _ref => {
|
|
|
653
653
|
};
|
|
654
654
|
const StyledNavItemText = styled__default.default.span.attrs({
|
|
655
655
|
'data-garden-id': COMPONENT_ID$9,
|
|
656
|
-
'data-garden-version': '9.
|
|
656
|
+
'data-garden-version': '9.5.1'
|
|
657
657
|
}).withConfig({
|
|
658
658
|
displayName: "StyledNavItemText",
|
|
659
659
|
componentId: "sc-13m84xl-0"
|
|
660
|
-
})(["position:absolute;order:1;overflow:hidden;", " > &&{position:", ";flex:", ";text-overflow:", ";}", ";", ";"], StyledNavButton, props => props.$isExpanded ? 'static' : undefined, props => props.$isExpanded ? 1 : undefined, props => props.$isExpanded ? 'ellipsis' : undefined, sizeStyles$3,
|
|
660
|
+
})(["position:absolute;order:1;overflow:hidden;", " > &&{position:", ";flex:", ";text-overflow:", ";}", ";", ";"], StyledNavButton, props => props.$isExpanded ? 'static' : undefined, props => props.$isExpanded ? 1 : undefined, props => props.$isExpanded ? 'ellipsis' : undefined, sizeStyles$3, reactTheming.componentStyles);
|
|
661
661
|
|
|
662
662
|
const COMPONENT_ID$8 = 'chrome.sheet';
|
|
663
663
|
const colorStyles$2 = _ref => {
|
|
@@ -696,11 +696,11 @@ const sizeStyles$2 = _ref2 => {
|
|
|
696
696
|
};
|
|
697
697
|
const StyledSheet = styled__default.default.aside.attrs({
|
|
698
698
|
'data-garden-id': COMPONENT_ID$8,
|
|
699
|
-
'data-garden-version': '9.
|
|
699
|
+
'data-garden-version': '9.5.1'
|
|
700
700
|
}).withConfig({
|
|
701
701
|
displayName: "StyledSheet",
|
|
702
702
|
componentId: "sc-dx8ijk-0"
|
|
703
|
-
})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.$isAnimated && 'width 250ms ease-in-out', sizeStyles$2, colorStyles$2,
|
|
703
|
+
})(["display:flex;order:1;transition:", ";overflow:hidden;", ";&:focus{outline:none;}", ";", ";"], props => props.$isAnimated && 'width 250ms ease-in-out', sizeStyles$2, colorStyles$2, reactTheming.componentStyles);
|
|
704
704
|
|
|
705
705
|
const COMPONENT_ID$7 = 'chrome.sheet_wrapper';
|
|
706
706
|
const transformStyles = _ref => {
|
|
@@ -723,44 +723,44 @@ const transformStyles = _ref => {
|
|
|
723
723
|
};
|
|
724
724
|
const StyledSheetWrapper = styled__default.default.div.attrs({
|
|
725
725
|
'data-garden-id': COMPONENT_ID$7,
|
|
726
|
-
'data-garden-version': '9.
|
|
726
|
+
'data-garden-version': '9.5.1'
|
|
727
727
|
}).withConfig({
|
|
728
728
|
displayName: "StyledSheetWrapper",
|
|
729
729
|
componentId: "sc-f6x9zb-0"
|
|
730
|
-
})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.$size, transformStyles,
|
|
730
|
+
})(["display:flex;position:relative;flex-direction:column;min-width:", ";", ";", ";"], props => props.$size, transformStyles, reactTheming.componentStyles);
|
|
731
731
|
|
|
732
732
|
const COMPONENT_ID$6 = 'chrome.sheet_title';
|
|
733
733
|
const StyledSheetTitle = styled__default.default.div.attrs({
|
|
734
734
|
'data-garden-id': COMPONENT_ID$6,
|
|
735
|
-
'data-garden-version': '9.
|
|
735
|
+
'data-garden-version': '9.5.1'
|
|
736
736
|
}).withConfig({
|
|
737
737
|
displayName: "StyledSheetTitle",
|
|
738
738
|
componentId: "sc-1gogk75-0"
|
|
739
739
|
})(["color:", ";font-weight:", ";", ";"], p => reactTheming.getColor({
|
|
740
740
|
theme: p.theme,
|
|
741
741
|
variable: 'foreground.default'
|
|
742
|
-
}), props => props.theme.fontWeights.semibold,
|
|
742
|
+
}), props => props.theme.fontWeights.semibold, reactTheming.componentStyles);
|
|
743
743
|
|
|
744
744
|
const COMPONENT_ID$5 = 'chrome.sheet_description';
|
|
745
745
|
const StyledSheetDescription = styled__default.default.div.attrs({
|
|
746
746
|
'data-garden-id': COMPONENT_ID$5,
|
|
747
|
-
'data-garden-version': '9.
|
|
747
|
+
'data-garden-version': '9.5.1'
|
|
748
748
|
}).withConfig({
|
|
749
749
|
displayName: "StyledSheetDescription",
|
|
750
750
|
componentId: "sc-1puglb6-0"
|
|
751
751
|
})(["line-height:", ";color:", ";", ";"], p => reactTheming.getLineHeight(p.theme.space.base * 4, p.theme.fontSizes.md), p => reactTheming.getColor({
|
|
752
752
|
theme: p.theme,
|
|
753
753
|
variable: 'foreground.subtle'
|
|
754
|
-
}),
|
|
754
|
+
}), reactTheming.componentStyles);
|
|
755
755
|
|
|
756
756
|
const COMPONENT_ID$4 = 'chrome.sheet_body';
|
|
757
757
|
const StyledSheetBody = styled__default.default.div.attrs({
|
|
758
758
|
'data-garden-id': COMPONENT_ID$4,
|
|
759
|
-
'data-garden-version': '9.
|
|
759
|
+
'data-garden-version': '9.5.1'
|
|
760
760
|
}).withConfig({
|
|
761
761
|
displayName: "StyledSheetBody",
|
|
762
762
|
componentId: "sc-bt4eoj-0"
|
|
763
|
-
})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base,
|
|
763
|
+
})(["flex:1;overflow-y:auto;padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, reactTheming.componentStyles);
|
|
764
764
|
|
|
765
765
|
const COMPONENT_ID$3 = 'chrome.sheet_close';
|
|
766
766
|
const positionStyles = _ref => {
|
|
@@ -773,11 +773,11 @@ const positionStyles = _ref => {
|
|
|
773
773
|
};
|
|
774
774
|
const StyledSheetClose = styled__default.default(reactButtons.IconButton).attrs({
|
|
775
775
|
'data-garden-id': COMPONENT_ID$3,
|
|
776
|
-
'data-garden-version': '9.
|
|
776
|
+
'data-garden-version': '9.5.1'
|
|
777
777
|
}).withConfig({
|
|
778
778
|
displayName: "StyledSheetClose",
|
|
779
779
|
componentId: "sc-1ab02oq-0"
|
|
780
|
-
})(["position:absolute;", ";", ";"], positionStyles,
|
|
780
|
+
})(["position:absolute;", ";", ";"], positionStyles, reactTheming.componentStyles);
|
|
781
781
|
|
|
782
782
|
const COMPONENT_ID$2 = 'chrome.sheet_footer';
|
|
783
783
|
const colorStyles$1 = _ref => {
|
|
@@ -801,20 +801,20 @@ const sizeStyles$1 = _ref2 => {
|
|
|
801
801
|
};
|
|
802
802
|
const StyledSheetFooter = styled__default.default.footer.attrs({
|
|
803
803
|
'data-garden-id': COMPONENT_ID$2,
|
|
804
|
-
'data-garden-version': '9.
|
|
804
|
+
'data-garden-version': '9.5.1'
|
|
805
805
|
}).withConfig({
|
|
806
806
|
displayName: "StyledSheetFooter",
|
|
807
807
|
componentId: "sc-2cktos-0"
|
|
808
|
-
})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.$isCompact ? 'center' : 'flex-end', sizeStyles$1, colorStyles$1,
|
|
808
|
+
})(["display:flex;flex-flow:row wrap;align-items:center;justify-content:", ";", ";", ";", ";"], props => props.$isCompact ? 'center' : 'flex-end', sizeStyles$1, colorStyles$1, reactTheming.componentStyles);
|
|
809
809
|
|
|
810
810
|
const COMPONENT_ID$1 = 'chrome.sheet_footer_item';
|
|
811
811
|
const StyledSheetFooterItem = styled__default.default.div.attrs({
|
|
812
812
|
'data-garden-id': COMPONENT_ID$1,
|
|
813
|
-
'data-garden-version': '9.
|
|
813
|
+
'data-garden-version': '9.5.1'
|
|
814
814
|
}).withConfig({
|
|
815
815
|
displayName: "StyledSheetFooterItem",
|
|
816
816
|
componentId: "sc-r9ixh-0"
|
|
817
|
-
})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`,
|
|
817
|
+
})(["", " ", ";"], props => `margin-${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 5}px;`, reactTheming.componentStyles);
|
|
818
818
|
|
|
819
819
|
const COMPONENT_ID = 'chrome.sheet_header';
|
|
820
820
|
const colorStyles = _ref => {
|
|
@@ -842,11 +842,11 @@ const sizeStyles = _ref2 => {
|
|
|
842
842
|
};
|
|
843
843
|
const StyledSheetHeader = styled__default.default.header.attrs({
|
|
844
844
|
'data-garden-id': COMPONENT_ID,
|
|
845
|
-
'data-garden-version': '9.
|
|
845
|
+
'data-garden-version': '9.5.1'
|
|
846
846
|
}).withConfig({
|
|
847
847
|
displayName: "StyledSheetHeader",
|
|
848
848
|
componentId: "sc-o2ry8i-0"
|
|
849
|
-
})(["", ";", ";", ";"], sizeStyles, colorStyles,
|
|
849
|
+
})(["", ";", ";", ";"], sizeStyles, colorStyles, reactTheming.componentStyles);
|
|
850
850
|
|
|
851
851
|
const HeaderItem = React__namespace.default.forwardRef((_ref, ref) => {
|
|
852
852
|
let {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-chrome",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.1",
|
|
4
4
|
"description": "Components relating to Chrome within the Garden Design System.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"types": "dist/typings/index.d.ts",
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@zendeskgarden/container-utilities": "^2.0.0",
|
|
25
|
-
"@zendeskgarden/react-buttons": "^9.
|
|
25
|
+
"@zendeskgarden/react-buttons": "^9.5.1",
|
|
26
26
|
"dom-helpers": "^5.2.1",
|
|
27
27
|
"polished": "^4.3.1",
|
|
28
28
|
"prop-types": "^15.5.7",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"styled-components": "^5.3.1 || ^6.0.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@zendeskgarden/react-theming": "^9.
|
|
39
|
-
"@zendeskgarden/svg-icons": "7.
|
|
38
|
+
"@zendeskgarden/react-theming": "^9.5.1",
|
|
39
|
+
"@zendeskgarden/svg-icons": "7.5.0"
|
|
40
40
|
},
|
|
41
41
|
"keywords": [
|
|
42
42
|
"components",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
50
|
"zendeskgarden:src": "src/index.ts",
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "2571d0225b784bb7c765316ed584d289d35d4605"
|
|
52
52
|
}
|