@procore/core-react 12.23.0 → 12.25.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/CHANGELOG.md +26 -0
- package/dist/AnchorNavigation/AnchorNavigation.styles.js +3 -3
- package/dist/Avatar/Avatar.styles.js +5 -5
- package/dist/AvatarStack/AvatarStack.styles.js +7 -7
- package/dist/Badge/Badge.styles.js +2 -2
- package/dist/BadgePill/BadgePill.styles.js +4 -4
- package/dist/Banner/Banner.styles.js +10 -10
- package/dist/Box/Box.styles.js +1 -1
- package/dist/Breadcrumbs/Breadcrumbs.styles.js +4 -4
- package/dist/Button/Button.styles.js +5 -5
- package/dist/Calendar/Calendar.styles.js +8 -8
- package/dist/Card/Card.styles.js +1 -1
- package/dist/Checkbox/Checkbox.styles.js +6 -6
- package/dist/Checkbox/CheckboxTooltip.js +1 -1
- package/dist/ContactItem/ContactItem.styles.js +5 -5
- package/dist/Content/Content.styles.js +2 -2
- package/dist/DateInput/DateInput.styles.js +6 -6
- package/dist/DetailPage/DetailPage.styles.js +7 -7
- package/dist/Dropdown/Dropdown.styles.js +3 -3
- package/dist/DropdownFlyout/DropdownFlyout.styles.js +4 -4
- package/dist/Dropzone/Dropzone.js +1 -1
- package/dist/Dropzone/Dropzone.styles.js +9 -9
- package/dist/EmptyState/EmptyState.styles.js +6 -6
- package/dist/Field/Field.styles.js +3 -3
- package/dist/FileList/FileList.styles.js +4 -4
- package/dist/FileSelect/FileExplorer/FileExplorer.styles.js +9 -9
- package/dist/FileSelect/FileExplorer/FileExplorerSidebar.styles.js +3 -3
- package/dist/FileSelect/FileSelect.styles.js +2 -2
- package/dist/FileSelect/FileSelectDropzone/FileSelectDropzone.styles.js +3 -3
- package/dist/FileSelect/FileTokenList/FileTokenList.styles.js +2 -2
- package/dist/FileSelect/GridSource/GridSource.styles.js +6 -6
- package/dist/FileSelect/LocalSource/LocalSource.styles.js +4 -4
- package/dist/FileSelect/SourceItem/SourceItem.styles.js +3 -3
- package/dist/FileSelect/ThumbnailList/ThumbnailList.styles.js +6 -6
- package/dist/FileSelect/TreeSource/TreeSource.styles.js +1 -1
- package/dist/FileToken/FileToken.styles.js +4 -4
- package/dist/FilterToken/FilterToken.styles.js +5 -5
- package/dist/FlexList/FlexList.styles.js +1 -1
- package/dist/Form/Form.styles.js +14 -14
- package/dist/Form/StyledFormikForm.styles.js +2 -2
- package/dist/Form/stories/util.js +3 -0
- package/dist/Form/stories/util.js.map +1 -1
- package/dist/GhostPlaceholder/GhostPlaceholder.styles.js +2 -2
- package/dist/Grid/Grid.styles.js +2 -2
- package/dist/GroupSelect/GroupSelect.styles.js +1 -1
- package/dist/Input/Input.styles.js +1 -1
- package/dist/Link/Link.styles.js +1 -1
- package/dist/ListPage/ListPage.styles.js +8 -8
- package/dist/Loader/Loader.styles.js +2 -2
- package/dist/Loader/Loader.types.d.ts +3 -2
- package/dist/Loader/Loader.types.js.map +1 -1
- package/dist/Menu/Menu.js +2 -0
- package/dist/Menu/Menu.js.map +1 -1
- package/dist/MenuImperative/MenuImperative.styles.js +10 -10
- package/dist/Modal/Modal.js +1 -0
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/Modal/Modal.styles.js +13 -13
- package/dist/Modal/storyHelpers.d.ts +1 -0
- package/dist/Modal/storyHelpers.js +160 -85
- package/dist/Modal/storyHelpers.js.map +1 -1
- package/dist/MultiSelect/MultiSelect.styles.js +6 -6
- package/dist/NextMenu/NextMenu.styles.js +3 -3
- package/dist/NextTile/NextTile.js +29 -4
- package/dist/NextTile/NextTile.js.map +1 -1
- package/dist/NextTile/NextTile.types.d.ts +15 -0
- package/dist/NextTile/NextTile.types.js.map +1 -1
- package/dist/NextTile/index.d.ts +2 -0
- package/dist/NextTile/index.js +2 -0
- package/dist/NextTile/index.js.map +1 -0
- package/dist/Notation/Notation.js +1 -1
- package/dist/NumberInput/NumberInput.js +2 -0
- package/dist/NumberInput/NumberInput.js.map +1 -1
- package/dist/NumberInput/NumberInput.styles.js +7 -7
- package/dist/Overlay/OverlayArrow.styles.js +1 -1
- package/dist/OverlayTrigger/OverlayTrigger.js +6 -2
- package/dist/OverlayTrigger/OverlayTrigger.js.map +1 -1
- package/dist/OverlayTrigger/OverlayTrigger.types.d.ts +7 -2
- package/dist/OverlayTrigger/OverlayTrigger.types.js.map +1 -1
- package/dist/PageLayout/PageLayout.styles.js +16 -16
- package/dist/PageTemplate/PageFooterTemplate/PageFooterTemplate.styles.js +1 -1
- package/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.styles.js +3 -3
- package/dist/PageTemplate/PagePaneTemplate/PagePaneTemplate.styles.js +2 -2
- package/dist/PageTemplate/PageTemplate/PageTemplate.styles.js +3 -3
- package/dist/Pagination/Pagination.styles.js +5 -5
- package/dist/Pagination/PaginationSelect.js +1 -0
- package/dist/Pagination/PaginationSelect.js.map +1 -1
- package/dist/Panel/Panel.js +6 -4
- package/dist/Panel/Panel.js.map +1 -1
- package/dist/Panel/Panel.styles.js +11 -11
- package/dist/Pill/Pill.styles.js +2 -2
- package/dist/PillSelect/PillSelect.styles.js +4 -4
- package/dist/Popover/Popover.styles.js +2 -2
- package/dist/Portal/Portal.styles.js +1 -1
- package/dist/ProgressBar/ProgressBar.styles.js +2 -2
- package/dist/ProgressBar/ProgressBar.types.d.ts +1 -1
- package/dist/ProgressBar/ProgressBar.types.js.map +1 -1
- package/dist/RadioButton/RadioButton.styles.js +3 -3
- package/dist/Required/Required.styles.js +3 -3
- package/dist/Search/Search.styles.js +5 -5
- package/dist/Section/Section.styles.js +7 -7
- package/dist/SegmentedController/SegmentedController.d.ts +5 -0
- package/dist/SegmentedController/SegmentedController.js +49 -30
- package/dist/SegmentedController/SegmentedController.js.map +1 -1
- package/dist/SegmentedController/SegmentedController.styles.js +4 -4
- package/dist/Select/Select.styles.js +7 -7
- package/dist/Semantic/Semantic.styles.js +9 -9
- package/dist/Slider/Slider.styles.js +5 -5
- package/dist/Spinner/Spinner.js +14 -5
- package/dist/Spinner/Spinner.js.map +1 -1
- package/dist/Spinner/Spinner.styles.js +7 -7
- package/dist/SplitViewCard/SplitViewCard.styles.js +8 -8
- package/dist/SuperSelect/SuperSelect.js +1 -1
- package/dist/SuperSelect/SuperSelect.js.map +1 -1
- package/dist/SuperSelect/SuperSelect.presets.styles.js +1 -1
- package/dist/SuperSelect/SuperSelect.styles.js +37 -37
- package/dist/Switch/Switch.styles.js +4 -4
- package/dist/Table/Table.styles.js +28 -28
- package/dist/TableShelf/TableShelf.styles.js +5 -5
- package/dist/Tabs/Tabs.styles.js +15 -15
- package/dist/Tearsheet/Tearsheet.styles.js +5 -5
- package/dist/TextArea/TextArea.styles.js +1 -1
- package/dist/TextEditorOutput/TextEditorOutput.styles.js +1 -1
- package/dist/Thumbnail/Thumbnail.styles.js +17 -17
- package/dist/ThumbnailGrid/ThumbnailGrid.styles.js +7 -7
- package/dist/TieredSelect/TieredSelect.styles.js +9 -9
- package/dist/Tile/Tile.styles.d.ts +1 -0
- package/dist/Tile/Tile.styles.js +19 -12
- package/dist/Tile/Tile.styles.js.map +1 -1
- package/dist/Tile/index.d.ts +1 -1
- package/dist/Tile/index.js.map +1 -1
- package/dist/Title/Title.styles.js +7 -7
- package/dist/Toast/Toast.styles.js +3 -3
- package/dist/ToggleButton/ToggleButton.styles.js +1 -1
- package/dist/Token/Token.styles.js +3 -3
- package/dist/ToolHeader/ToolHeader.styles.js +6 -6
- package/dist/ToolLandingPage/ToolLandingPage.styles.js +3 -3
- package/dist/Tooltip/Tooltip.styles.js +2 -2
- package/dist/Tree/Tree.styles.js +9 -9
- package/dist/Typeahead/Typeahead.styles.js +3 -3
- package/dist/Typography/Typography.styles.js +1 -1
- package/dist/Typography/Typography.table.story.js +2 -2
- package/dist/_hooks/I18n.d.ts +48 -0
- package/dist/_locales/de-DE.json +4 -1
- package/dist/_locales/en-AU.json +3 -0
- package/dist/_locales/en-CA.json +3 -0
- package/dist/_locales/en-GB.json +3 -0
- package/dist/_locales/en.json +3 -0
- package/dist/_locales/es-ES.json +4 -1
- package/dist/_locales/es.json +3 -0
- package/dist/_locales/fr-CA.json +6 -3
- package/dist/_locales/fr-FR.json +4 -1
- package/dist/_locales/is-IS.json +3 -0
- package/dist/_locales/it-IT.json +3 -0
- package/dist/_locales/ja-JP.json +3 -0
- package/dist/_locales/pl-PL.json +3 -0
- package/dist/_locales/pseudo.json +3 -0
- package/dist/_locales/pt-BR.json +3 -0
- package/dist/_locales/th-TH.json +3 -0
- package/dist/_locales/zh-SG.json +3 -0
- package/dist/_locales/zh-TW.json +375 -0
- package/dist/_typedoc/AnchorNavigation/AnchorNavigation.types.json +3 -3
- package/dist/_typedoc/Avatar/Avatar.types.json +20 -20
- package/dist/_typedoc/AvatarStack/AvatarStack.types.json +24 -24
- package/dist/_typedoc/Badge/Badge.types.json +6 -6
- package/dist/_typedoc/Banner/Banner.types.json +13 -13
- package/dist/_typedoc/Box/Box.types.json +68 -68
- package/dist/_typedoc/Breadcrumbs/Breadcrumbs.types.json +10 -10
- package/dist/_typedoc/Button/Button.types.json +13 -13
- package/dist/_typedoc/Calendar/Calendar.types.json +80 -80
- package/dist/_typedoc/Card/Card.types.json +6 -6
- package/dist/_typedoc/Checkbox/Checkbox.types.json +9 -9
- package/dist/_typedoc/ContactItem/ContactItem.types.json +9 -9
- package/dist/_typedoc/DateInput/DateInput.types.json +35 -35
- package/dist/_typedoc/DateSelect/DateSelect.types.json +13 -13
- package/dist/_typedoc/DetailPage/DetailPage.types.json +5 -5
- package/dist/_typedoc/Dropdown/Dropdown.types.json +37 -37
- package/dist/_typedoc/DropdownFlyout/DropdownFlyout.types.json +30 -30
- package/dist/_typedoc/Dropzone/Dropzone.types.json +44 -44
- package/dist/_typedoc/EmptyState/EmptyState.types.json +16 -16
- package/dist/_typedoc/FileList/FileList.types.json +9 -9
- package/dist/_typedoc/FileSelect/FileSelect.types.json +27 -27
- package/dist/_typedoc/FileSelect/GridSource/GridSource.types.json +20 -20
- package/dist/_typedoc/FileSelect/LocalSource/LocalSource.types.json +14 -14
- package/dist/_typedoc/FileSelect/TreeSource/TreeSource.types.json +9 -9
- package/dist/_typedoc/Flex/Flex.types.json +27 -27
- package/dist/_typedoc/FlexList/FlexList.types.json +30 -30
- package/dist/_typedoc/Form/Form.types.json +741 -741
- package/dist/_typedoc/GhostPlaceholder/GhostPlaceholder.types.json +12 -12
- package/dist/_typedoc/Grid/Grid.types.json +8 -8
- package/dist/_typedoc/GroupSelect/GroupSelect.types.json +52 -52
- package/dist/_typedoc/Input/Input.types.json +2 -2
- package/dist/_typedoc/Link/Link.types.json +4 -4
- package/dist/_typedoc/ListPage/ListPage.types.json +13 -13
- package/dist/_typedoc/Menu/Menu.types.json +62 -62
- package/dist/_typedoc/MenuImperative/MenuImperative.types.json +74 -74
- package/dist/_typedoc/Modal/Modal.types.json +46 -46
- package/dist/_typedoc/MultiSelect/MultiSelect.types.json +31 -31
- package/dist/_typedoc/NextTile/NextTile.types.json +363 -0
- package/dist/_typedoc/Notation/Notation.types.json +4 -4
- package/dist/_typedoc/NumberInput/NumberInput.types.json +37 -37
- package/dist/_typedoc/OverlayTrigger/OverlayTrigger.types.json +41 -31
- package/dist/_typedoc/PageLayout/PageLayout.types.json +29 -29
- package/dist/_typedoc/Pagination/Pagination.types.json +7 -7
- package/dist/_typedoc/Panel/Panel.types.json +28 -28
- package/dist/_typedoc/Pill/Pill.types.json +2 -2
- package/dist/_typedoc/PillSelect/PillSelect.types.json +49 -49
- package/dist/_typedoc/Popover/Popover.types.json +15 -15
- package/dist/_typedoc/ProgressBar/ProgressBar.types.json +16 -6
- package/dist/_typedoc/RadioButton/RadioButton.types.json +6 -6
- package/dist/_typedoc/Required/Required.types.json +5 -5
- package/dist/_typedoc/Search/Search.types.json +18 -18
- package/dist/_typedoc/Section/Section.types.json +15 -15
- package/dist/_typedoc/SegmentedController/SegmentedController.types.json +21 -21
- package/dist/_typedoc/Select/Select.types.json +60 -60
- package/dist/_typedoc/SettingsPage/SettingsPage.types.json +10 -10
- package/dist/_typedoc/Slider/Slider.types.json +6 -6
- package/dist/_typedoc/Spinner/Spinner.types.json +9 -9
- package/dist/_typedoc/SplitViewCard/SplitViewCard.types.json +12 -12
- package/dist/_typedoc/Switch/Switch.types.json +3 -3
- package/dist/_typedoc/Table/Table.types.json +101 -101
- package/dist/_typedoc/Tabs/Tabs.types.json +20 -20
- package/dist/_typedoc/Tearsheet/Tearsheet.types.json +17 -17
- package/dist/_typedoc/TextArea/TextArea.types.json +3 -3
- package/dist/_typedoc/TextEditor/TextEditor.types.json +9 -9
- package/dist/_typedoc/TextEditorOutput/TextEditorOutput.types.json +4 -4
- package/dist/_typedoc/Thumbnail/Thumbnail.types.json +19 -19
- package/dist/_typedoc/TieredDropdown/TieredDropdown.types.json +42 -42
- package/dist/_typedoc/TieredSelect/TieredSelect.types.json +28 -28
- package/dist/_typedoc/Tile/Tile.types.json +8 -263
- package/dist/_typedoc/Title/Title.types.json +1 -1
- package/dist/_typedoc/Toast/Toast.types.json +4 -4
- package/dist/_typedoc/ToggleButton/ToggleButton.types.json +4 -4
- package/dist/_typedoc/Token/Token.types.json +4 -4
- package/dist/_typedoc/ToolHeader/ToolHeader.types.json +10 -10
- package/dist/_typedoc/ToolLandingPage/ToolLandingPage.types.json +7 -7
- package/dist/_typedoc/Tooltip/Tooltip.types.json +13 -13
- package/dist/_typedoc/Tree/Tree.types.json +86 -86
- package/dist/_typedoc/Typeahead/Typeahead.types.json +2 -2
- package/dist/_typedoc/Typography/Typography.types.json +9 -9
- package/dist/_typedoc/_utils/types.json +3 -3
- package/dist/_utils/propsTypedoc.d.ts +1 -0
- package/dist/_utils/propsTypedoc.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/Tabs/Tabs.styles.js
CHANGED
|
@@ -17,17 +17,17 @@ var borderRadius = /*#__PURE__*/css(["border-radius:", "px ", "px 0 0;"], spacin
|
|
|
17
17
|
*/
|
|
18
18
|
var StyledTabBase = /*#__PURE__*/styled.div.withConfig({
|
|
19
19
|
displayName: "StyledTabBase",
|
|
20
|
-
componentId: "core-
|
|
20
|
+
componentId: "core-12_25_0__sc-17s58xs-0"
|
|
21
21
|
})(["align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;position:relative;white-space:nowrap;text-decoration:none;background-color:transparent;border:none;font-family:inherit;padding:0;"]);
|
|
22
22
|
var StyledTabInnerBase = /*#__PURE__*/styled.div.withConfig({
|
|
23
23
|
displayName: "StyledTabInnerBase",
|
|
24
|
-
componentId: "core-
|
|
24
|
+
componentId: "core-12_25_0__sc-17s58xs-1"
|
|
25
25
|
})(["align-self:baseline;box-sizing:border-box;&,> a{display:flex;text-decoration:none;width:100%;}"]);
|
|
26
26
|
|
|
27
27
|
// This so that it can be visible/hidden via CSS down below
|
|
28
28
|
var StyledDropdownTabBase = /*#__PURE__*/styled(StyledTabBase).withConfig({
|
|
29
29
|
displayName: "StyledDropdownTabBase",
|
|
30
|
-
componentId: "core-
|
|
30
|
+
componentId: "core-12_25_0__sc-17s58xs-2"
|
|
31
31
|
})(["", ""], hiddenTab);
|
|
32
32
|
|
|
33
33
|
//// END BASE LAYOUT COMPONENTS FOR TABS ////
|
|
@@ -50,11 +50,11 @@ function getTabStyle() {
|
|
|
50
50
|
}
|
|
51
51
|
var StyledTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
|
|
52
52
|
displayName: "StyledTab",
|
|
53
|
-
componentId: "core-
|
|
53
|
+
componentId: "core-12_25_0__sc-17s58xs-3"
|
|
54
54
|
})(["", ""], getTabStyle);
|
|
55
55
|
var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
|
|
56
56
|
displayName: "StyledTabInner",
|
|
57
|
-
componentId: "core-
|
|
57
|
+
componentId: "core-12_25_0__sc-17s58xs-4"
|
|
58
58
|
})(["", " padding:0 ", "px;font-weight:", ";&,> a{", ";color:", ";height:23px;}", ""], getTypographyIntent('body'), spacing.xs, function (_ref3) {
|
|
59
59
|
var $selected = _ref3.$selected;
|
|
60
60
|
return $selected ? 600 : 400;
|
|
@@ -67,15 +67,15 @@ var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
|
|
|
67
67
|
});
|
|
68
68
|
var StyledDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
|
|
69
69
|
displayName: "StyledDropdownTab",
|
|
70
|
-
componentId: "core-
|
|
70
|
+
componentId: "core-12_25_0__sc-17s58xs-5"
|
|
71
71
|
})(["", ""], getTabStyle);
|
|
72
72
|
var StyledDropdownTabInner = /*#__PURE__*/styled(StyledTabInner).withConfig({
|
|
73
73
|
displayName: "StyledDropdownTabInner",
|
|
74
|
-
componentId: "core-
|
|
74
|
+
componentId: "core-12_25_0__sc-17s58xs-6"
|
|
75
75
|
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
|
|
76
76
|
var StyledLink = /*#__PURE__*/styled.span.withConfig({
|
|
77
77
|
displayName: "StyledLink",
|
|
78
|
-
componentId: "core-
|
|
78
|
+
componentId: "core-12_25_0__sc-17s58xs-7"
|
|
79
79
|
})(["align-items:center;display:flex;height:23px;", ";box-sizing:border-box;"], borderRadius);
|
|
80
80
|
|
|
81
81
|
//// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////
|
|
@@ -92,34 +92,34 @@ function getHelixHeaderTabStyles() {
|
|
|
92
92
|
}
|
|
93
93
|
var StyledGlobalNavigationTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
|
|
94
94
|
displayName: "StyledGlobalNavigationTab",
|
|
95
|
-
componentId: "core-
|
|
95
|
+
componentId: "core-12_25_0__sc-17s58xs-8"
|
|
96
96
|
})(["", ""], getHelixHeaderTabStyles);
|
|
97
97
|
var StyledGlobalNavigationDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
|
|
98
98
|
displayName: "StyledGlobalNavigationDropdownTab",
|
|
99
|
-
componentId: "core-
|
|
99
|
+
componentId: "core-12_25_0__sc-17s58xs-9"
|
|
100
100
|
})(["", ""], getHelixHeaderTabStyles);
|
|
101
101
|
var StyledGlobalNavigationDropdownTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
|
|
102
102
|
displayName: "StyledGlobalNavigationDropdownTabInner",
|
|
103
|
-
componentId: "core-
|
|
103
|
+
componentId: "core-12_25_0__sc-17s58xs-10"
|
|
104
104
|
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
|
|
105
105
|
var StyledGlobalNavigationLink = /*#__PURE__*/styled.span.withConfig({
|
|
106
106
|
displayName: "StyledGlobalNavigationLink",
|
|
107
|
-
componentId: "core-
|
|
107
|
+
componentId: "core-12_25_0__sc-17s58xs-11"
|
|
108
108
|
})(["padding-left:6px;padding-right:6px;"]);
|
|
109
109
|
|
|
110
110
|
//// END HELIX GLOBAL NAVIGATION TAB STYLES ////
|
|
111
111
|
|
|
112
112
|
export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
|
|
113
113
|
displayName: "StyledOverlay",
|
|
114
|
-
componentId: "core-
|
|
114
|
+
componentId: "core-12_25_0__sc-17s58xs-12"
|
|
115
115
|
})(["max-height:40vh;", "{padding:0;display:flex;justify-content:center;a{margin:unset;padding:unset;}}", "{padding:0;display:flex;}", "{padding:2px 16px 4px 16px;}", ",", "{color:", ";border-radius:0;display:flex;width:100%;background:inherit;font-weight:inherit;font-size:inherit;padding:0;}[data-selected='true']{", ",", "{border-bottom-color:transparent;color:", ";}}"], StyledItem, StyledLink, StyledTabInnerBase, StyledLink, StyledTabBase, colors.gray15, StyledLink, StyledTabBase, colors.blue50);
|
|
116
116
|
export var StyledTabList = /*#__PURE__*/styled.div.withConfig({
|
|
117
117
|
displayName: "StyledTabList",
|
|
118
|
-
componentId: "core-
|
|
118
|
+
componentId: "core-12_25_0__sc-17s58xs-13"
|
|
119
119
|
})(["display:flex;width:100%;"]);
|
|
120
120
|
export var StyledTabs = /*#__PURE__*/styled.nav.withConfig({
|
|
121
121
|
displayName: "StyledTabs",
|
|
122
|
-
componentId: "core-
|
|
122
|
+
componentId: "core-12_25_0__sc-17s58xs-14"
|
|
123
123
|
})(["background-color:", ";display:flex;overflow:hidden;width:100%;", "{&:nth-child(1n + ", "){&:not(", "){", "}}}", ""], function (_ref6) {
|
|
124
124
|
var $dark = _ref6.$dark;
|
|
125
125
|
return $dark && colors.gray15;
|
|
@@ -47,7 +47,7 @@ var getSlideOutAnimation = function getSlideOutAnimation($placement) {
|
|
|
47
47
|
};
|
|
48
48
|
export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
|
|
49
49
|
displayName: "StyledTearsheetContent",
|
|
50
|
-
componentId: "core-
|
|
50
|
+
componentId: "core-12_25_0__sc-ljrxoq-0"
|
|
51
51
|
})(["display:flex;z-index:2;width:100%;", " ", " ", " ", ""], function (_ref) {
|
|
52
52
|
var $open = _ref.$open,
|
|
53
53
|
$placement = _ref.$placement;
|
|
@@ -67,7 +67,7 @@ export var StyledTearsheetContent = /*#__PURE__*/styled.div.withConfig({
|
|
|
67
67
|
export var minScrimSize = spacing.xxl * 3;
|
|
68
68
|
export var StyledTearsheetBody = /*#__PURE__*/styled.div.withConfig({
|
|
69
69
|
displayName: "StyledTearsheetBody",
|
|
70
|
-
componentId: "core-
|
|
70
|
+
componentId: "core-12_25_0__sc-ljrxoq-1"
|
|
71
71
|
})(["display:flex;overflow-y:auto;flex-direction:column;background-color:", ";", " ", "}"], colors.white, function (_ref5) {
|
|
72
72
|
var $block = _ref5.$block,
|
|
73
73
|
$placement = _ref5.$placement,
|
|
@@ -88,7 +88,7 @@ var zoomIn = /*#__PURE__*/keyframes(["from{transform:scale(0);}to{transform:scal
|
|
|
88
88
|
var zoomOut = /*#__PURE__*/keyframes(["from{transform:scale(1);}to{transform:scale(0);}"]);
|
|
89
89
|
export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
|
|
90
90
|
displayName: "StyledScrimContainer",
|
|
91
|
-
componentId: "core-
|
|
91
|
+
componentId: "core-12_25_0__sc-ljrxoq-2"
|
|
92
92
|
})(["", ""], function (_ref7) {
|
|
93
93
|
var $placement = _ref7.$placement;
|
|
94
94
|
var minSizeProp = ['top', 'bottom'].includes($placement) ? 'min-height' : 'min-width';
|
|
@@ -96,7 +96,7 @@ export var StyledScrimContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
96
96
|
});
|
|
97
97
|
export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
|
|
98
98
|
displayName: "StyledButtonContainer",
|
|
99
|
-
componentId: "core-
|
|
99
|
+
componentId: "core-12_25_0__sc-ljrxoq-3"
|
|
100
100
|
})(["", ""], function (_ref8) {
|
|
101
101
|
var $placement = _ref8.$placement;
|
|
102
102
|
switch ($placement) {
|
|
@@ -111,7 +111,7 @@ export var StyledButtonContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
111
111
|
});
|
|
112
112
|
export var StyledButtonCard = /*#__PURE__*/styled(Card).withConfig({
|
|
113
113
|
displayName: "StyledButtonCard",
|
|
114
|
-
componentId: "core-
|
|
114
|
+
componentId: "core-12_25_0__sc-ljrxoq-4"
|
|
115
115
|
})(["display:inline-flex;margin:", "px;", " ", " ", ""], spacing.xl, function (_ref9) {
|
|
116
116
|
var $open = _ref9.$open;
|
|
117
117
|
return $open ? css(["transform:scale(1);"]) : css(["transform:scale(0);"]);
|
|
@@ -3,7 +3,7 @@ import { getInputStyles } from '../Input/Input.styles';
|
|
|
3
3
|
import { spacing } from '../_styles/spacing';
|
|
4
4
|
export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
|
|
5
5
|
displayName: "StyledTextArea",
|
|
6
|
-
componentId: "core-
|
|
6
|
+
componentId: "core-12_25_0__sc-u5mow1-0"
|
|
7
7
|
})(["", ";height:auto;min-height:64px;padding:", "px ", "px;resize:", ";"], getInputStyles, spacing.sm, spacing.md, function (_ref) {
|
|
8
8
|
var _ref$resize = _ref.resize,
|
|
9
9
|
resize = _ref$resize === void 0 ? 'both' : _ref$resize;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
export var StyledEditor = /*#__PURE__*/styled.div.withConfig({
|
|
3
3
|
displayName: "StyledEditor",
|
|
4
|
-
componentId: "core-
|
|
4
|
+
componentId: "core-12_25_0__sc-1lje1b0-0"
|
|
5
5
|
})(["> .tox-tinymce{border:none;}"]);
|
|
6
6
|
//# sourceMappingURL=TextEditorOutput.styles.js.map
|
|
@@ -27,35 +27,35 @@ var captionBase = /*#__PURE__*/css(["color:", ";font-size:12px;line-height:16px;
|
|
|
27
27
|
});
|
|
28
28
|
export var StyledMultilineCaption = /*#__PURE__*/styled.div.withConfig({
|
|
29
29
|
displayName: "StyledMultilineCaption",
|
|
30
|
-
componentId: "core-
|
|
30
|
+
componentId: "core-12_25_0__sc-195f70c-0"
|
|
31
31
|
})(["", ";display:flex;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:", "px;"], captionBase, multilineCaptionMaxHeight);
|
|
32
32
|
export var StyledCaptionText = /*#__PURE__*/styled.span.withConfig({
|
|
33
33
|
displayName: "StyledCaptionText",
|
|
34
|
-
componentId: "core-
|
|
34
|
+
componentId: "core-12_25_0__sc-195f70c-1"
|
|
35
35
|
})(["width:100%;"]);
|
|
36
36
|
export var StyledPlaceholderCaption = /*#__PURE__*/styled.div.withConfig({
|
|
37
37
|
displayName: "StyledPlaceholderCaption",
|
|
38
|
-
componentId: "core-
|
|
38
|
+
componentId: "core-12_25_0__sc-195f70c-2"
|
|
39
39
|
})(["", ""], captionBase);
|
|
40
40
|
export var StyledSingleLineCaption = /*#__PURE__*/styled.div.withConfig({
|
|
41
41
|
displayName: "StyledSingleLineCaption",
|
|
42
|
-
componentId: "core-
|
|
42
|
+
componentId: "core-12_25_0__sc-195f70c-3"
|
|
43
43
|
})(["display:flex;", ""], captionBase);
|
|
44
44
|
export var StyledSinglelineCaptionBody = /*#__PURE__*/styled.span.withConfig({
|
|
45
45
|
displayName: "StyledSinglelineCaptionBody",
|
|
46
|
-
componentId: "core-
|
|
46
|
+
componentId: "core-12_25_0__sc-195f70c-4"
|
|
47
47
|
})(["", ""], getEllipsis);
|
|
48
48
|
export var StyledSinglelineCaptionEnding = /*#__PURE__*/styled.span.withConfig({
|
|
49
49
|
displayName: "StyledSinglelineCaptionEnding",
|
|
50
|
-
componentId: "core-
|
|
50
|
+
componentId: "core-12_25_0__sc-195f70c-5"
|
|
51
51
|
})(["max-width:50%;white-space:nowrap;flex-shrink:0;"]);
|
|
52
52
|
export var StyledLabelText = /*#__PURE__*/styled(Typography).withConfig({
|
|
53
53
|
displayName: "StyledLabelText",
|
|
54
|
-
componentId: "core-
|
|
54
|
+
componentId: "core-12_25_0__sc-195f70c-6"
|
|
55
55
|
})(["", ""], getEllipsis());
|
|
56
56
|
export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig({
|
|
57
57
|
displayName: "StyledThumbnailFigCaption",
|
|
58
|
-
componentId: "core-
|
|
58
|
+
componentId: "core-12_25_0__sc-195f70c-7"
|
|
59
59
|
})(["", " ", " color:", ";font-weight:", ";text-align:center;width:100%;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;background-color:", ";"], getTypographyIntent('small'), getEllipsis(), function (_ref5) {
|
|
60
60
|
var _ref5$$color = _ref5.$color,
|
|
61
61
|
$color = _ref5$$color === void 0 ? 'gray15' : _ref5$$color;
|
|
@@ -63,7 +63,7 @@ export var StyledThumbnailFigCaption = /*#__PURE__*/styled.figcaption.withConfig
|
|
|
63
63
|
}, typographyWeights.bold, labelHeight, spacing.sm / 2, spacing.sm, colors.white);
|
|
64
64
|
export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
|
|
65
65
|
displayName: "StyledLabel",
|
|
66
|
-
componentId: "core-
|
|
66
|
+
componentId: "core-12_25_0__sc-195f70c-8"
|
|
67
67
|
})(["display:flex;justify-content:center;position:absolute;bottom:0;right:0;left:0;opacity:0.85;height:", "px;padding:", "px ", "px;font-size:", "px;background-color:", ";"], labelHeight, spacing.sm / 2, spacing.sm, labelFontSize, colors.white);
|
|
68
68
|
var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;border:1px solid ", ";border-radius:", "px;margin:0;", " ", " &:focus{", ";}", " ", " ", ""], colors.gray85, borderRadius.md, function (_ref6) {
|
|
69
69
|
var $clickable = _ref6.$clickable;
|
|
@@ -85,7 +85,7 @@ var thumbnailBase = /*#__PURE__*/css(["display:flex;justify-content:center;align
|
|
|
85
85
|
});
|
|
86
86
|
export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
|
|
87
87
|
displayName: "StyledTickIcon",
|
|
88
|
-
componentId: "core-
|
|
88
|
+
componentId: "core-12_25_0__sc-195f70c-9"
|
|
89
89
|
})(["position:absolute;top:", "px;right:", "px;width:", "px;height:", "px;opacity:0;transform:scale(0.75);transition:transform 250ms ease-out,opacity 100ms ease-out;", " ", ""], spacing.sm, spacing.sm, tickSize, tickSize, function (_ref1) {
|
|
90
90
|
var $selected = _ref1.$selected;
|
|
91
91
|
return $selected && css(["opacity:1;transform:scale(1);"]);
|
|
@@ -95,28 +95,28 @@ export var StyledTickIcon = /*#__PURE__*/styled.svg.withConfig({
|
|
|
95
95
|
});
|
|
96
96
|
export var StyledFileIcon = /*#__PURE__*/styled(DocumentIcon).withConfig({
|
|
97
97
|
displayName: "StyledFileIcon",
|
|
98
|
-
componentId: "core-
|
|
98
|
+
componentId: "core-12_25_0__sc-195f70c-10"
|
|
99
99
|
})(["width:36.5%;height:auto;"]);
|
|
100
100
|
export var StyledImageThumbnailPreview = /*#__PURE__*/styled.div.withConfig({
|
|
101
101
|
displayName: "StyledImageThumbnailPreview",
|
|
102
|
-
componentId: "core-
|
|
102
|
+
componentId: "core-12_25_0__sc-195f70c-11"
|
|
103
103
|
})(["width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;", ""], function (_ref11) {
|
|
104
104
|
var $bgImage = _ref11.$bgImage;
|
|
105
105
|
return css(["background-image:url(", ");"], $bgImage);
|
|
106
106
|
});
|
|
107
107
|
export var StyledImageThumbnailOverlay = /*#__PURE__*/styled.div.withConfig({
|
|
108
108
|
displayName: "StyledImageThumbnailOverlay",
|
|
109
|
-
componentId: "core-
|
|
109
|
+
componentId: "core-12_25_0__sc-195f70c-12"
|
|
110
110
|
})(["display:none;position:absolute;top:0;bottom:0;left:0;right:0;"]);
|
|
111
111
|
var blackOverlay = "\n background-color: ".concat(colors.black, ";\n opacity: 0.2;\n");
|
|
112
112
|
var whiteOverlay = "\n background-color: ".concat(colors.white, ";\n opacity: 0.5;\n");
|
|
113
113
|
export var StyledImageThumbnailImage = /*#__PURE__*/styled.img.withConfig({
|
|
114
114
|
displayName: "StyledImageThumbnailImage",
|
|
115
|
-
componentId: "core-
|
|
115
|
+
componentId: "core-12_25_0__sc-195f70c-13"
|
|
116
116
|
})([""]);
|
|
117
117
|
export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
|
|
118
118
|
displayName: "StyledImageThumbnail",
|
|
119
|
-
componentId: "core-
|
|
119
|
+
componentId: "core-12_25_0__sc-195f70c-14"
|
|
120
120
|
})(["", ";flex-direction:column;", " ", " ", " ", " ", " ", ""], thumbnailBase, function (_ref12) {
|
|
121
121
|
var $disabled = _ref12.$disabled;
|
|
122
122
|
return $disabled && css(["&,&:hover{", "{display:block;", "}}", ",", ",", "{filter:saturate(0);}", "{filter:saturate(0);z-index:-1;}"], StyledImageThumbnailOverlay, whiteOverlay, StyledImageThumbnailPreview, StyledTickIcon, StyledImageThumbnailImage, StyledFileIcon);
|
|
@@ -145,7 +145,7 @@ export var StyledImageThumbnail = /*#__PURE__*/styled.div.withConfig({
|
|
|
145
145
|
});
|
|
146
146
|
export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
147
147
|
displayName: "StyledThumbnailWrapper",
|
|
148
|
-
componentId: "core-
|
|
148
|
+
componentId: "core-12_25_0__sc-195f70c-15"
|
|
149
149
|
})(["display:flex;", " ", ""], function (_ref18) {
|
|
150
150
|
var $size = _ref18.$size;
|
|
151
151
|
return $size === 'lg' ? "\n width: ".concat(thumbnailSizeLg, "px;\n ") : '';
|
|
@@ -156,7 +156,7 @@ export var StyledThumbnailWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
156
156
|
});
|
|
157
157
|
export var StyledPlaceholderThumbnail = /*#__PURE__*/styled.div.withConfig({
|
|
158
158
|
displayName: "StyledPlaceholderThumbnail",
|
|
159
|
-
componentId: "core-
|
|
159
|
+
componentId: "core-12_25_0__sc-195f70c-16"
|
|
160
160
|
})(["", " ", " ", " ", " ", ""], thumbnailBase, function (_ref20) {
|
|
161
161
|
var $clickable = _ref20.$clickable;
|
|
162
162
|
return $clickable && css(["&:hover{background-color:", ";}"], colors.gray96);
|
|
@@ -7,31 +7,31 @@ import { getEllipsis } from '../_styles/mixins';
|
|
|
7
7
|
import { spacing } from '../_styles/spacing';
|
|
8
8
|
export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
|
|
9
9
|
displayName: "StyledCheckbox",
|
|
10
|
-
componentId: "core-
|
|
10
|
+
componentId: "core-12_25_0__sc-1inrbm9-0"
|
|
11
11
|
})(["input{z-index:2;}"]);
|
|
12
12
|
export var StyledGroupCell = /*#__PURE__*/styled.div.withConfig({
|
|
13
13
|
displayName: "StyledGroupCell",
|
|
14
|
-
componentId: "core-
|
|
14
|
+
componentId: "core-12_25_0__sc-1inrbm9-1"
|
|
15
15
|
})(["display:flex;align-items:flex-end;padding-bottom:", "px;"], spacing.md);
|
|
16
16
|
export var StyledThumbnail = /*#__PURE__*/styled(Thumbnail).withConfig({
|
|
17
17
|
displayName: "StyledThumbnail",
|
|
18
|
-
componentId: "core-
|
|
18
|
+
componentId: "core-12_25_0__sc-1inrbm9-2"
|
|
19
19
|
})(["display:inline-flex;&:focus{outline:none;}"]);
|
|
20
20
|
// VariableSizeGrid has provided width and height as inline style, so to make it flexible and support responsive !important was added
|
|
21
21
|
export var StyledVariableSizeGrid = /*#__PURE__*/styled(VariableSizeGrid).withConfig({
|
|
22
22
|
displayName: "StyledVariableSizeGrid",
|
|
23
|
-
componentId: "core-
|
|
23
|
+
componentId: "core-12_25_0__sc-1inrbm9-3"
|
|
24
24
|
})(["height:100% !important;& > div{width:100% !important;}"]);
|
|
25
25
|
export var StyledGroupTitle = /*#__PURE__*/styled(Typography).withConfig({
|
|
26
26
|
displayName: "StyledGroupTitle",
|
|
27
|
-
componentId: "core-
|
|
27
|
+
componentId: "core-12_25_0__sc-1inrbm9-4"
|
|
28
28
|
})(["", ""], getEllipsis);
|
|
29
29
|
export var StyledSpinnerWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
30
30
|
displayName: "StyledSpinnerWrapper",
|
|
31
|
-
componentId: "core-
|
|
31
|
+
componentId: "core-12_25_0__sc-1inrbm9-5"
|
|
32
32
|
})(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;"]);
|
|
33
33
|
export var StyledThumbnailGrid = /*#__PURE__*/styled.div.withConfig({
|
|
34
34
|
displayName: "StyledThumbnailGrid",
|
|
35
|
-
componentId: "core-
|
|
35
|
+
componentId: "core-12_25_0__sc-1inrbm9-6"
|
|
36
36
|
})(["display:flex;flex-wrap:wrap;outline:none;"]);
|
|
37
37
|
//# sourceMappingURL=ThumbnailGrid.styles.js.map
|
|
@@ -9,19 +9,19 @@ import { colors } from '../_styles/colors';
|
|
|
9
9
|
import { spacing } from '../_styles/spacing';
|
|
10
10
|
export var StyledTieredSelect = /*#__PURE__*/styled(MenuImperative).withConfig({
|
|
11
11
|
displayName: "StyledTieredSelect",
|
|
12
|
-
componentId: "core-
|
|
12
|
+
componentId: "core-12_25_0__sc-e1ql06-0"
|
|
13
13
|
})(["align-items:stretch;max-height:40vh;"]);
|
|
14
14
|
export var StyledTieredSelectIcon = /*#__PURE__*/styled(Flex).withConfig({
|
|
15
15
|
displayName: "StyledTieredSelectIcon",
|
|
16
|
-
componentId: "core-
|
|
16
|
+
componentId: "core-12_25_0__sc-e1ql06-1"
|
|
17
17
|
})(["height:24px;width:24px;"]);
|
|
18
18
|
export var StyledTieredSelectArrowButton = /*#__PURE__*/styled(Button).withConfig({
|
|
19
19
|
displayName: "StyledTieredSelectArrowButton",
|
|
20
|
-
componentId: "core-
|
|
20
|
+
componentId: "core-12_25_0__sc-e1ql06-2"
|
|
21
21
|
})(["border:1px solid transparent;"]);
|
|
22
22
|
export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).withConfig({
|
|
23
23
|
displayName: "StyledTieredSelectBreadcrumbs",
|
|
24
|
-
componentId: "core-
|
|
24
|
+
componentId: "core-12_25_0__sc-e1ql06-3"
|
|
25
25
|
})(["background-color:", ";flex-wrap:wrap;margin-top:", "px;max-height:68px;overflow-y:auto;padding:", "px ", "px;", ""], colors.gray96, spacing.sm, spacing.xs, spacing.md, function (_ref) {
|
|
26
26
|
var $nonInteractive = _ref.$nonInteractive;
|
|
27
27
|
if ($nonInteractive) {
|
|
@@ -30,22 +30,22 @@ export var StyledTieredSelectBreadcrumbs = /*#__PURE__*/styled(Breadcrumbs).with
|
|
|
30
30
|
});
|
|
31
31
|
export var StyledTieredSelectHome = /*#__PURE__*/styled(Flex).withConfig({
|
|
32
32
|
displayName: "StyledTieredSelectHome",
|
|
33
|
-
componentId: "core-
|
|
33
|
+
componentId: "core-12_25_0__sc-e1ql06-4"
|
|
34
34
|
})(["height:20px;"]);
|
|
35
35
|
export var StyledTieredSelectOption = /*#__PURE__*/styled(MenuImperative.Item).withConfig({
|
|
36
36
|
displayName: "StyledTieredSelectOption",
|
|
37
|
-
componentId: "core-
|
|
37
|
+
componentId: "core-12_25_0__sc-e1ql06-5"
|
|
38
38
|
})(["align-items:center;display:flex;justify-content:space-between;padding:2px ", "px;"], spacing.lg);
|
|
39
39
|
export var StyledTieredSelectLoadingMore = /*#__PURE__*/styled(Flex).withConfig({
|
|
40
40
|
displayName: "StyledTieredSelectLoadingMore",
|
|
41
|
-
componentId: "core-
|
|
41
|
+
componentId: "core-12_25_0__sc-e1ql06-6"
|
|
42
42
|
})(["align-items:center;justify-content:center;padding:", "px ", "px 0px ", "px;"], spacing.xs, spacing.lg, spacing.lg);
|
|
43
43
|
export var StyledTieredSelectOverlay = /*#__PURE__*/styled(Card).withConfig({
|
|
44
44
|
displayName: "StyledTieredSelectOverlay",
|
|
45
|
-
componentId: "core-
|
|
45
|
+
componentId: "core-12_25_0__sc-e1ql06-7"
|
|
46
46
|
})(["max-width:248px;min-width:inherit;"]);
|
|
47
47
|
export var StyledTieredSelectSpinnerOverlay = /*#__PURE__*/styled(Spinner).withConfig({
|
|
48
48
|
displayName: "StyledTieredSelectSpinnerOverlay",
|
|
49
|
-
componentId: "core-
|
|
49
|
+
componentId: "core-12_25_0__sc-e1ql06-8"
|
|
50
50
|
})(["min-height:auto;"]);
|
|
51
51
|
//# sourceMappingURL=TieredSelect.styles.js.map
|
|
@@ -8,6 +8,7 @@ export declare const StyledSelectableTile: import("styled-components/dist/types"
|
|
|
8
8
|
$selected: boolean;
|
|
9
9
|
$disabled?: boolean | undefined;
|
|
10
10
|
$focused?: boolean | undefined;
|
|
11
|
+
$layoutless?: boolean | undefined;
|
|
11
12
|
}>> & string;
|
|
12
13
|
export declare const StyledInteractableTile: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledTile>> & string;
|
|
13
14
|
export declare const StyledFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
package/dist/Tile/Tile.styles.js
CHANGED
|
@@ -25,6 +25,9 @@ var getLandscapeTemplate = function getLandscapeTemplate() {
|
|
|
25
25
|
var getPortraitTemplate = function getPortraitTemplate() {
|
|
26
26
|
return css(["grid-template-areas:'hero' 'body' 'footer';grid-template-columns:1fr;"]);
|
|
27
27
|
};
|
|
28
|
+
var getLayoutCSS = function getLayoutCSS(orientation) {
|
|
29
|
+
return css(["display:grid;", ";"], orientation === 'landscape' ? getLandscapeTemplate() : getPortraitTemplate());
|
|
30
|
+
};
|
|
28
31
|
var getTileStyles = function getTileStyles(_ref) {
|
|
29
32
|
var $orientation = _ref.$orientation,
|
|
30
33
|
_ref$$selected = _ref.$selected,
|
|
@@ -34,12 +37,14 @@ var getTileStyles = function getTileStyles(_ref) {
|
|
|
34
37
|
_ref$$disabled = _ref.$disabled,
|
|
35
38
|
$disabled = _ref$$disabled === void 0 ? false : _ref$$disabled,
|
|
36
39
|
_ref$$focused = _ref.$focused,
|
|
37
|
-
$focused = _ref$$focused === void 0 ? false : _ref$$focused
|
|
38
|
-
|
|
40
|
+
$focused = _ref$$focused === void 0 ? false : _ref$$focused,
|
|
41
|
+
_ref$$layoutless = _ref.$layoutless,
|
|
42
|
+
$layoutless = _ref$$layoutless === void 0 ? false : _ref$$layoutless;
|
|
43
|
+
return css(["", " background-color:", ";border-radius:", "px;width:100%;", " &:focus,&.focus{", "}", " ", " ", " ", ""], !$layoutless && getLayoutCSS($orientation), colors.white, borderRadius.md, getShadow(1, 'bottom'), getFocus(), $focused ? getFocus() : '', $disabled ? getDisabled() : '', $selected ? getSelected() : '', $hoverable && !$disabled ? getHover($selected) : '');
|
|
39
44
|
};
|
|
40
45
|
export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
|
|
41
46
|
displayName: "StyledLinkTile",
|
|
42
|
-
componentId: "core-
|
|
47
|
+
componentId: "core-12_25_0__sc-8q9p0n-0"
|
|
43
48
|
})(["", " text-decoration:none;color:inherit;"], function (_ref2) {
|
|
44
49
|
var $orientation = _ref2.$orientation;
|
|
45
50
|
return getTileStyles({
|
|
@@ -49,23 +54,25 @@ export var StyledLinkTile = /*#__PURE__*/styled.a.withConfig({
|
|
|
49
54
|
});
|
|
50
55
|
export var StyledSelectableTile = /*#__PURE__*/styled.div.withConfig({
|
|
51
56
|
displayName: "StyledSelectableTile",
|
|
52
|
-
componentId: "core-
|
|
57
|
+
componentId: "core-12_25_0__sc-8q9p0n-1"
|
|
53
58
|
})(["", ""], function (_ref3) {
|
|
54
59
|
var $orientation = _ref3.$orientation,
|
|
55
60
|
$selected = _ref3.$selected,
|
|
56
61
|
$disabled = _ref3.$disabled,
|
|
57
|
-
$focused = _ref3.$focused
|
|
62
|
+
$focused = _ref3.$focused,
|
|
63
|
+
$layoutless = _ref3.$layoutless;
|
|
58
64
|
return getTileStyles({
|
|
59
65
|
$orientation: $orientation,
|
|
60
66
|
$selected: $selected,
|
|
61
67
|
$disabled: $disabled,
|
|
62
68
|
$focused: $focused,
|
|
63
|
-
$hoverable: true
|
|
69
|
+
$hoverable: true,
|
|
70
|
+
$layoutless: $layoutless
|
|
64
71
|
});
|
|
65
72
|
});
|
|
66
73
|
export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
|
|
67
74
|
displayName: "StyledInteractableTile",
|
|
68
|
-
componentId: "core-
|
|
75
|
+
componentId: "core-12_25_0__sc-8q9p0n-2"
|
|
69
76
|
})(["", ""], function (_ref4) {
|
|
70
77
|
var $orientation = _ref4.$orientation;
|
|
71
78
|
return getTileStyles({
|
|
@@ -74,26 +81,26 @@ export var StyledInteractableTile = /*#__PURE__*/styled.div.withConfig({
|
|
|
74
81
|
});
|
|
75
82
|
export var StyledFooter = /*#__PURE__*/styled.div.withConfig({
|
|
76
83
|
displayName: "StyledFooter",
|
|
77
|
-
componentId: "core-
|
|
84
|
+
componentId: "core-12_25_0__sc-8q9p0n-3"
|
|
78
85
|
})(["grid-area:footer;padding:", "px;> ", "{flex-wrap:wrap-reverse;}"], spacing.lg, StyledActions);
|
|
79
86
|
export var StyledTileContent = /*#__PURE__*/styled(StyledContent).withConfig({
|
|
80
87
|
displayName: "StyledTileContent",
|
|
81
|
-
componentId: "core-
|
|
88
|
+
componentId: "core-12_25_0__sc-8q9p0n-4"
|
|
82
89
|
})(["grid-column-start:hero-start;grid-column-end:body-end;padding:", "px;+ ", "{padding-top:0;}> ", ",> ", " > ", ",> ", "{grid-column-gap:", "px;}"], spacing.lg, StyledFooter, SFormRow, SForm, SFormRow, SFormRow, spacing.md);
|
|
83
90
|
export var StyledHeroMedia = /*#__PURE__*/styled.figure.withConfig({
|
|
84
91
|
displayName: "StyledHeroMedia",
|
|
85
|
-
componentId: "core-
|
|
92
|
+
componentId: "core-12_25_0__sc-8q9p0n-5"
|
|
86
93
|
})(["grid-area:hero;margin:0;position:relative;overflow:hidden;font-size:0;> *{font-size:initial;}+ ", "{grid-area:body;}> video{background-color:", ";}> img,> picture > img{object-fit:cover;}", ""], StyledTileContent, colors.black, function (_ref5) {
|
|
87
94
|
var $orientation = _ref5.$orientation;
|
|
88
95
|
return $orientation === 'landscape' && !isIE11() ? css(["border-top-left-radius:inherit;border-bottom-left-radius:inherit;> *,> picture > img{height:100%;width:100%;position:absolute;}@media ", "{> picture > img,> img{width:auto;left:50%;transform:translate(-50%,0);}}"], mediaIE11Hack) : css(["min-height:156px;max-height:567px;border-top-left-radius:inherit;border-top-right-radius:inherit;> *,> picture > img{min-height:inherit;max-height:inherit;height:auto;width:100%;}"]);
|
|
89
96
|
});
|
|
90
97
|
export var StyledHeroOverlay = /*#__PURE__*/styled.div.withConfig({
|
|
91
98
|
displayName: "StyledHeroOverlay",
|
|
92
|
-
componentId: "core-
|
|
99
|
+
componentId: "core-12_25_0__sc-8q9p0n-6"
|
|
93
100
|
})(["position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;"]);
|
|
94
101
|
export var StyledHeroText = /*#__PURE__*/styled.div.withConfig({
|
|
95
102
|
displayName: "StyledHeroText",
|
|
96
|
-
componentId: "core-
|
|
103
|
+
componentId: "core-12_25_0__sc-8q9p0n-7"
|
|
97
104
|
})(["grid-area:hero;+ ", "{grid-area:body;}padding:", "px;border-radius:inherit;", ""], StyledTileContent, spacing.lg, function (_ref6) {
|
|
98
105
|
var $orientation = _ref6.$orientation;
|
|
99
106
|
return $orientation === 'landscape' ? css(["display:flex;flex-direction:column;justify-content:center;padding-right:0;"]) : css(["padding-bottom:0;"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tile.styles.js","names":["styled","css","StyledActions","StyledContent","StyledForm","SForm","StyledFormRow","SFormRow","borderRadius","colors","mediaIE11Hack","getFocus","getShadow","spacing","isIE11","getHover","$selected","arguments","length","undefined","blue94","gray96","getSelected","blue98","getDisabled","oneThirdTwoThirds","getLandscapeTemplate","getPortraitTemplate","getTileStyles","_ref","$orientation","_ref$$selected","_ref$$hoverable","$hoverable","_ref$$disabled","$disabled","_ref$$focused","$focused","white","md","StyledLinkTile","a","withConfig","displayName","componentId","_ref2","StyledSelectableTile","div","_ref3","StyledInteractableTile","_ref4","StyledFooter","lg","StyledTileContent","StyledHeroMedia","figure","black","_ref5","StyledHeroOverlay","StyledHeroText","_ref6"],"sources":["../../src/Tile/Tile.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { StyledActions, StyledContent } from '../Content/Content.styles'\nimport {\n StyledForm as SForm,\n StyledFormRow as SFormRow,\n} from '../Form/Form.styles'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { mediaIE11Hack } from '../_styles/media'\nimport { getFocus } from '../_styles/mixins'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport type { TileCommonProps } from './Tile.types'\n\ninterface StyledTile {\n $orientation: TileCommonProps['orientation']\n}\n\nconst getHover = ($selected = false) => css`\n cursor: pointer;\n &:hover,\n &.hover {\n background-color: ${$selected ? colors.blue94 : colors.gray96};\n }\n`\n\nconst getSelected = () => css`\n background-color: ${colors.blue98};\n`\n\nconst getDisabled = () => css`\n cursor: not-allowed;\n`\n\ninterface GetTileStylesProps {\n $orientation: TileCommonProps['orientation']\n $selected?: boolean\n $hoverable?: boolean\n $disabled?: boolean\n $focused?: boolean\n}\n\nconst oneThirdTwoThirds = 'minmax(0, 1fr) minmax(0, 2fr)'\n\nconst getLandscapeTemplate = () => {\n return css`\n --core-tile-grid-template-columns: ${oneThirdTwoThirds};\n grid-template-areas:\n 'hero body'\n 'hero footer';\n grid-template-columns: var(\n --core-tile-grid-template-columns,\n ${oneThirdTwoThirds}\n );\n `\n}\n\nconst getPortraitTemplate = () => {\n return css`\n grid-template-areas:\n 'hero'\n 'body'\n 'footer';\n grid-template-columns: 1fr;\n `\n}\n\nconst getTileStyles = ({\n $orientation,\n $selected = false,\n $hoverable = false,\n $disabled = false,\n $focused = false,\n}: GetTileStylesProps) => {\n return css`\n display: grid;\n ${$orientation === 'landscape'\n ? getLandscapeTemplate()\n : getPortraitTemplate()};\n\n background-color: ${colors.white};\n border-radius: ${borderRadius.md}px;\n width: 100%;\n ${getShadow(1, 'bottom')}\n\n &:focus, &.focus {\n ${getFocus()}\n }\n ${$focused ? getFocus() : ''}\n\n ${$disabled ? getDisabled() : ''}\n ${$selected ? getSelected() : ''}\n ${$hoverable && !$disabled ? getHover($selected) : ''}\n `\n}\n\nexport const StyledLinkTile = styled.a<StyledTile>`\n ${({ $orientation }) => getTileStyles({ $orientation, $hoverable: true })}\n text-decoration: none;\n color: inherit;\n`\n\nexport const StyledSelectableTile = styled.div<\n StyledTile & { $selected: boolean; $disabled?: boolean; $focused?: boolean }\n>`\n ${({ $orientation, $selected, $disabled, $focused }) =>\n getTileStyles({\n $orientation,\n $selected,\n $disabled,\n $focused,\n $hoverable: true,\n })}\n`\n\nexport const StyledInteractableTile = styled.div<StyledTile>`\n ${({ $orientation }) => getTileStyles({ $orientation })}\n`\n\nexport const StyledFooter = styled.div`\n grid-area: footer;\n padding: ${spacing.lg}px;\n\n > ${StyledActions} {\n flex-wrap: wrap-reverse;\n }\n`\n\nexport const StyledTileContent = styled(StyledContent)`\n grid-column-start: hero-start;\n grid-column-end: body-end;\n padding: ${spacing.lg}px;\n\n + ${StyledFooter} {\n padding-top: 0;\n }\n\n > ${SFormRow}, > ${SForm} > ${SFormRow}, > ${SFormRow} {\n grid-column-gap: ${spacing.md}px;\n }\n`\n\nexport const StyledHeroMedia = styled.figure<{\n $orientation: TileCommonProps['orientation']\n}>`\n grid-area: hero;\n margin: 0;\n position: relative;\n overflow: hidden;\n\n font-size: 0;\n > * {\n font-size: initial;\n }\n\n + ${StyledTileContent} {\n grid-area: body;\n }\n\n > video {\n background-color: ${colors.black};\n }\n > img,\n > picture > img {\n object-fit: cover;\n }\n ${({ $orientation }) =>\n $orientation === 'landscape' && !isIE11()\n ? css`\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;\n > *,\n > picture > img {\n height: 100%;\n width: 100%;\n position: absolute;\n }\n\n @media ${mediaIE11Hack} {\n > picture > img,\n > img {\n width: auto;\n left: 50%;\n transform: translate(-50%, 0);\n }\n }\n `\n : css`\n min-height: 156px;\n max-height: 567px;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n > *,\n > picture > img {\n min-height: inherit;\n max-height: inherit;\n height: auto;\n width: 100%;\n }\n `}\n`\n\nexport const StyledHeroOverlay = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 1;\n`\n\nexport const StyledHeroText = styled.div<{\n $orientation: TileCommonProps['orientation']\n}>`\n grid-area: hero;\n\n + ${StyledTileContent} {\n grid-area: body;\n }\n\n padding: ${spacing.lg}px;\n border-radius: inherit;\n ${({ $orientation }) =>\n $orientation === 'landscape'\n ? css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding-right: 0;\n `\n : css`\n padding-bottom: 0;\n `}\n`\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tile.styles.js","names":["styled","css","StyledActions","StyledContent","StyledForm","SForm","StyledFormRow","SFormRow","borderRadius","colors","mediaIE11Hack","getFocus","getShadow","spacing","isIE11","getHover","$selected","arguments","length","undefined","blue94","gray96","getSelected","blue98","getDisabled","oneThirdTwoThirds","getLandscapeTemplate","getPortraitTemplate","getLayoutCSS","orientation","getTileStyles","_ref","$orientation","_ref$$selected","_ref$$hoverable","$hoverable","_ref$$disabled","$disabled","_ref$$focused","$focused","_ref$$layoutless","$layoutless","white","md","StyledLinkTile","a","withConfig","displayName","componentId","_ref2","StyledSelectableTile","div","_ref3","StyledInteractableTile","_ref4","StyledFooter","lg","StyledTileContent","StyledHeroMedia","figure","black","_ref5","StyledHeroOverlay","StyledHeroText","_ref6"],"sources":["../../src/Tile/Tile.styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { StyledActions, StyledContent } from '../Content/Content.styles'\nimport {\n StyledForm as SForm,\n StyledFormRow as SFormRow,\n} from '../Form/Form.styles'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { mediaIE11Hack } from '../_styles/media'\nimport { getFocus } from '../_styles/mixins'\nimport { getShadow } from '../_styles/shadows'\nimport { spacing } from '../_styles/spacing'\nimport { isIE11 } from '../_utils/isIE11'\nimport type { TileCommonProps } from './Tile.types'\n\ninterface StyledTile {\n $orientation: TileCommonProps['orientation']\n}\n\nconst getHover = ($selected = false) => css`\n cursor: pointer;\n &:hover,\n &.hover {\n background-color: ${$selected ? colors.blue94 : colors.gray96};\n }\n`\n\nconst getSelected = () => css`\n background-color: ${colors.blue98};\n`\n\nconst getDisabled = () => css`\n cursor: not-allowed;\n`\n\ninterface GetTileStylesProps {\n $orientation: TileCommonProps['orientation']\n $selected?: boolean\n $hoverable?: boolean\n $disabled?: boolean\n $focused?: boolean\n $layoutless?: boolean\n}\n\nconst oneThirdTwoThirds = 'minmax(0, 1fr) minmax(0, 2fr)'\n\nconst getLandscapeTemplate = () => {\n return css`\n --core-tile-grid-template-columns: ${oneThirdTwoThirds};\n grid-template-areas:\n 'hero body'\n 'hero footer';\n grid-template-columns: var(\n --core-tile-grid-template-columns,\n ${oneThirdTwoThirds}\n );\n `\n}\n\nconst getPortraitTemplate = () => {\n return css`\n grid-template-areas:\n 'hero'\n 'body'\n 'footer';\n grid-template-columns: 1fr;\n `\n}\n\nconst getLayoutCSS = (orientation: TileCommonProps['orientation']) => css`\n display: grid;\n ${orientation === 'landscape'\n ? getLandscapeTemplate()\n : getPortraitTemplate()};\n`\n\nconst getTileStyles = ({\n $orientation,\n $selected = false,\n $hoverable = false,\n $disabled = false,\n $focused = false,\n $layoutless = false,\n}: GetTileStylesProps) => {\n return css`\n ${!$layoutless && getLayoutCSS($orientation)}\n\n background-color: ${colors.white};\n border-radius: ${borderRadius.md}px;\n width: 100%;\n ${getShadow(1, 'bottom')}\n\n &:focus, &.focus {\n ${getFocus()}\n }\n ${$focused ? getFocus() : ''}\n\n ${$disabled ? getDisabled() : ''}\n ${$selected ? getSelected() : ''}\n ${$hoverable && !$disabled ? getHover($selected) : ''}\n `\n}\n\nexport const StyledLinkTile = styled.a<StyledTile>`\n ${({ $orientation }) => getTileStyles({ $orientation, $hoverable: true })}\n text-decoration: none;\n color: inherit;\n`\n\nexport const StyledSelectableTile = styled.div<\n StyledTile & {\n $selected: boolean\n $disabled?: boolean\n $focused?: boolean\n $layoutless?: boolean\n }\n>`\n ${({ $orientation, $selected, $disabled, $focused, $layoutless }) =>\n getTileStyles({\n $orientation,\n $selected,\n $disabled,\n $focused,\n $hoverable: true,\n $layoutless,\n })}\n`\n\nexport const StyledInteractableTile = styled.div<StyledTile>`\n ${({ $orientation }) => getTileStyles({ $orientation })}\n`\n\nexport const StyledFooter = styled.div`\n grid-area: footer;\n padding: ${spacing.lg}px;\n\n > ${StyledActions} {\n flex-wrap: wrap-reverse;\n }\n`\n\nexport const StyledTileContent = styled(StyledContent)`\n grid-column-start: hero-start;\n grid-column-end: body-end;\n padding: ${spacing.lg}px;\n\n + ${StyledFooter} {\n padding-top: 0;\n }\n\n > ${SFormRow}, > ${SForm} > ${SFormRow}, > ${SFormRow} {\n grid-column-gap: ${spacing.md}px;\n }\n`\n\nexport const StyledHeroMedia = styled.figure<{\n $orientation: TileCommonProps['orientation']\n}>`\n grid-area: hero;\n margin: 0;\n position: relative;\n overflow: hidden;\n\n font-size: 0;\n > * {\n font-size: initial;\n }\n\n + ${StyledTileContent} {\n grid-area: body;\n }\n\n > video {\n background-color: ${colors.black};\n }\n > img,\n > picture > img {\n object-fit: cover;\n }\n ${({ $orientation }) =>\n $orientation === 'landscape' && !isIE11()\n ? css`\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;\n > *,\n > picture > img {\n height: 100%;\n width: 100%;\n position: absolute;\n }\n\n @media ${mediaIE11Hack} {\n > picture > img,\n > img {\n width: auto;\n left: 50%;\n transform: translate(-50%, 0);\n }\n }\n `\n : css`\n min-height: 156px;\n max-height: 567px;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n > *,\n > picture > img {\n min-height: inherit;\n max-height: inherit;\n height: auto;\n width: 100%;\n }\n `}\n`\n\nexport const StyledHeroOverlay = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 1;\n`\n\nexport const StyledHeroText = styled.div<{\n $orientation: TileCommonProps['orientation']\n}>`\n grid-area: hero;\n\n + ${StyledTileContent} {\n grid-area: body;\n }\n\n padding: ${spacing.lg}px;\n border-radius: inherit;\n ${({ $orientation }) =>\n $orientation === 'landscape'\n ? css`\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding-right: 0;\n `\n : css`\n padding-bottom: 0;\n `}\n`\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,EAAEC,aAAa,QAAQ,2BAA2B;AACxE,SACEC,UAAU,IAAIC,KAAK,EACnBC,aAAa,IAAIC,QAAQ,QACpB,qBAAqB;AAC5B,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,MAAM,QAAQ,kBAAkB;AAOzC,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAA;EAAA,IAAIC,SAAS,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,KAAK;EAAA,OAAKhB,GAAG,6DAInBe,SAAS,GAAGP,MAAM,CAACW,MAAM,GAAGX,MAAM,CAACY,MAAM;AAAA,CAEhE;AAED,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA;EAAA,OAASrB,GAAG,6BACPQ,MAAM,CAACc,MAAM;AAAA,CAClC;AAED,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA;EAAA,OAASvB,GAAG;AAAA,CAE5B;AAWD,IAAMwB,iBAAiB,GAAG,+BAA+B;AAEzD,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAA,EAAS;EACjC,OAAOzB,GAAG,gKAC6BwB,iBAAiB,EAMlDA,iBAAiB;AAGzB,CAAC;AAED,IAAME,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EAChC,OAAO1B,GAAG;AAOZ,CAAC;AAED,IAAM2B,YAAY,GAAG,SAAfA,YAAYA,CAAIC,WAA2C;EAAA,OAAK5B,GAAG,yBAErE4B,WAAW,KAAK,WAAW,GACzBH,oBAAoB,CAAC,CAAC,GACtBC,mBAAmB,CAAC,CAAC;AAAA,CAC1B;AAED,IAAMG,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAOO;EAAA,IANxBC,YAAY,GAAAD,IAAA,CAAZC,YAAY;IAAAC,cAAA,GAAAF,IAAA,CACZf,SAAS;IAATA,SAAS,GAAAiB,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAC,eAAA,GAAAH,IAAA,CACjBI,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;IAAAE,cAAA,GAAAL,IAAA,CAClBM,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,aAAA,GAAAP,IAAA,CACjBQ,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,gBAAA,GAAAT,IAAA,CAChBU,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,KAAK,GAAAA,gBAAA;EAEnB,OAAOvC,GAAG,+GACN,CAACwC,WAAW,IAAIb,YAAY,CAACI,YAAY,CAAC,EAExBvB,MAAM,CAACiC,KAAK,EACflC,YAAY,CAACmC,EAAE,EAE9B/B,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,EAGpBD,QAAQ,CAAC,CAAC,EAEZ4B,QAAQ,GAAG5B,QAAQ,CAAC,CAAC,GAAG,EAAE,EAE1B0B,SAAS,GAAGb,WAAW,CAAC,CAAC,GAAG,EAAE,EAC9BR,SAAS,GAAGM,WAAW,CAAC,CAAC,GAAG,EAAE,EAC9Ba,UAAU,IAAI,CAACE,SAAS,GAAGtB,QAAQ,CAACC,SAAS,CAAC,GAAG,EAAE;AAEzD,CAAC;AAED,OAAO,IAAM4B,cAAc,gBAAG5C,MAAM,CAAC6C,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iDAClC,UAAAC,KAAA;EAAA,IAAGjB,YAAY,GAAAiB,KAAA,CAAZjB,YAAY;EAAA,OAAOF,aAAa,CAAC;IAAEE,YAAY,EAAZA,YAAY;IAAEG,UAAU,EAAE;EAAK,CAAC,CAAC;AAAA,EAG1E;AAED,OAAO,IAAMe,oBAAoB,gBAAGlD,MAAM,CAACmD,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAQ1C,UAAAI,KAAA;EAAA,IAAGpB,YAAY,GAAAoB,KAAA,CAAZpB,YAAY;IAAEhB,SAAS,GAAAoC,KAAA,CAATpC,SAAS;IAAEqB,SAAS,GAAAe,KAAA,CAATf,SAAS;IAAEE,QAAQ,GAAAa,KAAA,CAARb,QAAQ;IAAEE,WAAW,GAAAW,KAAA,CAAXX,WAAW;EAAA,OAC5DX,aAAa,CAAC;IACZE,YAAY,EAAZA,YAAY;IACZhB,SAAS,EAATA,SAAS;IACTqB,SAAS,EAATA,SAAS;IACTE,QAAQ,EAARA,QAAQ;IACRJ,UAAU,EAAE,IAAI;IAChBM,WAAW,EAAXA;EACF,CAAC,CAAC;AAAA,EACL;AAED,OAAO,IAAMY,sBAAsB,gBAAGrD,MAAM,CAACmD,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC5C,UAAAM,KAAA;EAAA,IAAGtB,YAAY,GAAAsB,KAAA,CAAZtB,YAAY;EAAA,OAAOF,aAAa,CAAC;IAAEE,YAAY,EAAZA;EAAa,CAAC,CAAC;AAAA,EACxD;AAED,OAAO,IAAMuB,YAAY,gBAAGvD,MAAM,CAACmD,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEAEzBnC,OAAO,CAAC2C,EAAE,EAEjBtD,aAAa,CAGlB;AAED,OAAO,IAAMuD,iBAAiB,gBAAGzD,MAAM,CAACG,aAAa,CAAC,CAAA2C,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wJAGzCnC,OAAO,CAAC2C,EAAE,EAEjBD,YAAY,EAIZhD,QAAQ,EAAOF,KAAK,EAAME,QAAQ,EAAOA,QAAQ,EAChCM,OAAO,CAAC8B,EAAE,CAEhC;AAED,OAAO,IAAMe,eAAe,gBAAG1D,MAAM,CAAC2D,MAAM,CAAAb,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wMAatCS,iBAAiB,EAKChD,MAAM,CAACmD,KAAK,EAMhC,UAAAC,KAAA;EAAA,IAAG7B,YAAY,GAAA6B,KAAA,CAAZ7B,YAAY;EAAA,OACfA,YAAY,KAAK,WAAW,IAAI,CAAClB,MAAM,CAAC,CAAC,GACrCb,GAAG,0NAUQS,aAAa,IASxBT,GAAG,yLAYF;AAAA,EACR;AAED,OAAO,IAAM6D,iBAAiB,gBAAG9D,MAAM,CAACmD,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEAO1C;AAED,OAAO,IAAMe,cAAc,gBAAG/D,MAAM,CAACmD,GAAG,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wFAKlCS,iBAAiB,EAIV5C,OAAO,CAAC2C,EAAE,EAEnB,UAAAQ,KAAA;EAAA,IAAGhC,YAAY,GAAAgC,KAAA,CAAZhC,YAAY;EAAA,OACfA,YAAY,KAAK,WAAW,GACxB/B,GAAG,mFAMHA,GAAG,uBAEF;AAAA,EACR"}
|
package/dist/Tile/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Tile } from './Tile';
|
|
2
|
-
export type { InteractableTileProps, LinkTileProps, SelectableTileProps, TileProps, } from './Tile.types';
|
|
2
|
+
export type { InteractableTileProps as LegacyInteractableTileProps, LinkTileProps as LegacyLinkTileProps, SelectableTileProps as LegacySelectableTileProps, TileProps as LegacyTileProps, } from './Tile.types';
|
package/dist/Tile/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Tile"],"sources":["../../src/Tile/index.ts"],"sourcesContent":["export { Tile } from './Tile'\nexport type {\n InteractableTileProps,\n LinkTileProps,\n SelectableTileProps,\n TileProps,\n} from './Tile.types'\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,QAAQ"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["Tile"],"sources":["../../src/Tile/index.ts"],"sourcesContent":["export { Tile } from './Tile'\nexport type {\n InteractableTileProps as LegacyInteractableTileProps,\n LinkTileProps as LegacyLinkTileProps,\n SelectableTileProps as LegacySelectableTileProps,\n TileProps as LegacyTileProps,\n} from './Tile.types'\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,QAAQ"}
|
|
@@ -5,36 +5,36 @@ import { Typography } from '../Typography/Typography';
|
|
|
5
5
|
import { spacing } from '../_styles/spacing';
|
|
6
6
|
export var StyledTitle = /*#__PURE__*/styled.div.withConfig({
|
|
7
7
|
displayName: "StyledTitle",
|
|
8
|
-
componentId: "core-
|
|
8
|
+
componentId: "core-12_25_0__sc-1t2ye1d-0"
|
|
9
9
|
})(["display:flex;align-items:flex-start;"]);
|
|
10
10
|
export var StyledAssets = /*#__PURE__*/styled.div.withConfig({
|
|
11
11
|
displayName: "StyledAssets",
|
|
12
|
-
componentId: "core-
|
|
12
|
+
componentId: "core-12_25_0__sc-1t2ye1d-1"
|
|
13
13
|
})(["margin-right:", "px;", ""], spacing.md, function (_ref) {
|
|
14
14
|
var alignment = _ref.alignment;
|
|
15
15
|
return css(["align-self:", ";"], alignment);
|
|
16
16
|
});
|
|
17
17
|
export var StyledTitleContent = /*#__PURE__*/styled.div.withConfig({
|
|
18
18
|
displayName: "StyledTitleContent",
|
|
19
|
-
componentId: "core-
|
|
19
|
+
componentId: "core-12_25_0__sc-1t2ye1d-2"
|
|
20
20
|
})(["align-self:center;", ""], function (_ref2) {
|
|
21
21
|
var $hasActions = _ref2.$hasActions;
|
|
22
22
|
return $hasActions && css(["margin-right:", "px;"], spacing.lg);
|
|
23
23
|
});
|
|
24
24
|
export var StyledText = /*#__PURE__*/styled.span.withConfig({
|
|
25
25
|
displayName: "StyledText",
|
|
26
|
-
componentId: "core-
|
|
26
|
+
componentId: "core-12_25_0__sc-1t2ye1d-3"
|
|
27
27
|
})(["> h1,> h2,> h3{display:inline;}"]);
|
|
28
28
|
export var StyledTitlePill = /*#__PURE__*/styled.span.withConfig({
|
|
29
29
|
displayName: "StyledTitlePill",
|
|
30
|
-
componentId: "core-
|
|
30
|
+
componentId: "core-12_25_0__sc-1t2ye1d-4"
|
|
31
31
|
})(["margin-left:", "px;", "{vertical-align:text-top;}"], spacing.sm, StyledPill);
|
|
32
32
|
export var StyledTitleActions = /*#__PURE__*/styled(StyledActions).withConfig({
|
|
33
33
|
displayName: "StyledTitleActions",
|
|
34
|
-
componentId: "core-
|
|
34
|
+
componentId: "core-12_25_0__sc-1t2ye1d-5"
|
|
35
35
|
})(["margin-left:auto;"]);
|
|
36
36
|
export var StyledSubtext = /*#__PURE__*/styled(Typography).withConfig({
|
|
37
37
|
displayName: "StyledSubtext",
|
|
38
|
-
componentId: "core-
|
|
38
|
+
componentId: "core-12_25_0__sc-1t2ye1d-6"
|
|
39
39
|
})(["display:block;margin-top:", "px;"], spacing.xs);
|
|
40
40
|
//# sourceMappingURL=Title.styles.js.map
|
|
@@ -7,7 +7,7 @@ import { getShadow } from '../_styles/shadows';
|
|
|
7
7
|
import { spacing } from '../_styles/spacing';
|
|
8
8
|
export var StyledToast = /*#__PURE__*/styled.div.withConfig({
|
|
9
9
|
displayName: "StyledToast",
|
|
10
|
-
componentId: "core-
|
|
10
|
+
componentId: "core-12_25_0__sc-1l6lk2n-0"
|
|
11
11
|
})(["", " align-items:center;background-color:", ";border-radius:", "px;color:", ";display:flex;min-height:48px;padding:", "px ", "px;width:550px;"], getShadow(4, 'bottom'), function (_ref) {
|
|
12
12
|
var $variant = _ref.$variant;
|
|
13
13
|
return $variant === 'success' ? colors.green30 : colors.red50;
|
|
@@ -16,13 +16,13 @@ export var StyledToast = /*#__PURE__*/styled.div.withConfig({
|
|
|
16
16
|
// $legacy is direct string inside Toast. Next is with subcomponents
|
|
17
17
|
export var StyledToastText = /*#__PURE__*/styled.span.withConfig({
|
|
18
18
|
displayName: "StyledToastText",
|
|
19
|
-
componentId: "core-
|
|
19
|
+
componentId: "core-12_25_0__sc-1l6lk2n-1"
|
|
20
20
|
})(["", " font-weight:", ";overflow:hidden;", ""], getTypographyIntent('body'), typographyWeights.semibold, function (_ref2) {
|
|
21
21
|
var $legacy = _ref2.$legacy;
|
|
22
22
|
return $legacy ? "margin-left: ".concat(spacing.lg, "px;") : "padding: 0 ".concat(spacing.lg, "px;");
|
|
23
23
|
});
|
|
24
24
|
export var StyledToastButton = /*#__PURE__*/styled(Button).withConfig({
|
|
25
25
|
displayName: "StyledToastButton",
|
|
26
|
-
componentId: "core-
|
|
26
|
+
componentId: "core-12_25_0__sc-1l6lk2n-2"
|
|
27
27
|
})(["line-height:0;color:", ";padding:0;margin-left:auto;"], colors.white);
|
|
28
28
|
//# sourceMappingURL=Toast.styles.js.map
|
|
@@ -3,7 +3,7 @@ import { Button } from '../Button/Button';
|
|
|
3
3
|
import { colors } from '../_styles/colors';
|
|
4
4
|
export var StyledToggleButton = /*#__PURE__*/styled(Button).withConfig({
|
|
5
5
|
displayName: "StyledToggleButton",
|
|
6
|
-
componentId: "core-
|
|
6
|
+
componentId: "core-12_25_0__sc-1x59fxi-0"
|
|
7
7
|
})(["", ""], function (_ref) {
|
|
8
8
|
var $selected = _ref.$selected;
|
|
9
9
|
return $selected && css(["background-color:", ";color:", ";[data-icon-prop='true']{color:", ";}&:hover{background-color:", ";color:", ";}&:focus{background-color:", ";color:", ";}&:disabled{background-color:", ";color:", ";[data-icon-prop='true']{color:", ";}circle{stroke:", ";}}"], colors.blue96, colors.blue45, colors.blue50, colors.blue90, colors.blue45, colors.blue96, colors.blue45, colors.blue96, colors.blue70, colors.blue70, colors.blue50);
|