@veeqo/ui 10.0.1 → 10.1.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/dist/components/Accordion/styled.cjs +10 -10
- package/dist/components/Accordion/styled.cjs.map +1 -1
- package/dist/components/Accordion/styled.js +10 -10
- package/dist/components/Accordion/styled.js.map +1 -1
- package/dist/components/ActionMenu/styled.cjs +2 -2
- package/dist/components/ActionMenu/styled.cjs.map +1 -1
- package/dist/components/ActionMenu/styled.js +2 -2
- package/dist/components/ActionMenu/styled.js.map +1 -1
- package/dist/components/Alerts/Alert/styled.cjs +1 -1
- package/dist/components/Alerts/Alert/styled.js +1 -1
- package/dist/components/Anchor/styled.cjs +3 -3
- package/dist/components/Anchor/styled.js +3 -3
- package/dist/components/AnimatedDropdown/components/styled.cjs +1 -1
- package/dist/components/AnimatedDropdown/components/styled.cjs.map +1 -1
- package/dist/components/AnimatedDropdown/components/styled.js +1 -1
- package/dist/components/AnimatedDropdown/components/styled.js.map +1 -1
- package/dist/components/AnimatedDropdown/styled.cjs +3 -3
- package/dist/components/AnimatedDropdown/styled.cjs.map +1 -1
- package/dist/components/AnimatedDropdown/styled.js +3 -3
- package/dist/components/AnimatedDropdown/styled.js.map +1 -1
- package/dist/components/Avatar/styled.cjs +1 -1
- package/dist/components/Avatar/styled.js +1 -1
- package/dist/components/Badge/styled.cjs +4 -4
- package/dist/components/Badge/styled.cjs.map +1 -1
- package/dist/components/Badge/styled.js +4 -4
- package/dist/components/Badge/styled.js.map +1 -1
- package/dist/components/Banner/styled.cjs +7 -7
- package/dist/components/Banner/styled.js +7 -7
- package/dist/components/BaseContainer/BaseContainer.cjs +1 -1
- package/dist/components/BaseContainer/BaseContainer.js +1 -1
- package/dist/components/Breadcrumbs/components/styled.cjs +2 -2
- package/dist/components/Breadcrumbs/components/styled.js +2 -2
- package/dist/components/Button/components/styled.cjs +10 -10
- package/dist/components/Button/components/styled.cjs.map +1 -1
- package/dist/components/Button/components/styled.js +10 -10
- package/dist/components/Button/components/styled.js.map +1 -1
- package/dist/components/Calendars/components/Calendar/styled.cjs +1 -1
- package/dist/components/Calendars/components/Calendar/styled.cjs.map +1 -1
- package/dist/components/Calendars/components/Calendar/styled.js +1 -1
- package/dist/components/Calendars/components/Calendar/styled.js.map +1 -1
- package/dist/components/Calendars/components/RangeCalendar/styled.cjs +1 -1
- package/dist/components/Calendars/components/RangeCalendar/styled.js +1 -1
- package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs +1 -1
- package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js +1 -1
- package/dist/components/Card/styled.cjs +5 -5
- package/dist/components/Card/styled.cjs.map +1 -1
- package/dist/components/Card/styled.js +5 -5
- package/dist/components/Card/styled.js.map +1 -1
- package/dist/components/CardHeader/styled.cjs +2 -2
- package/dist/components/CardHeader/styled.cjs.map +1 -1
- package/dist/components/CardHeader/styled.js +2 -2
- package/dist/components/CardHeader/styled.js.map +1 -1
- package/dist/components/Checkbox/styled.cjs +1 -1
- package/dist/components/Checkbox/styled.cjs.map +1 -1
- package/dist/components/Checkbox/styled.js +1 -1
- package/dist/components/Checkbox/styled.js.map +1 -1
- package/dist/components/Choice/components/styled.cjs +9 -9
- package/dist/components/Choice/components/styled.cjs.map +1 -1
- package/dist/components/Choice/components/styled.js +9 -9
- package/dist/components/Choice/components/styled.js.map +1 -1
- package/dist/components/ChoiceList/styled.cjs +2 -2
- package/dist/components/ChoiceList/styled.cjs.map +1 -1
- package/dist/components/ChoiceList/styled.js +2 -2
- package/dist/components/ChoiceList/styled.js.map +1 -1
- package/dist/components/CopyToClipboard/CopyToClipboard.cjs +1 -1
- package/dist/components/CopyToClipboard/CopyToClipboard.cjs.map +1 -1
- package/dist/components/CopyToClipboard/CopyToClipboard.js +1 -1
- package/dist/components/CopyToClipboard/CopyToClipboard.js.map +1 -1
- package/dist/components/DataTable/components/ActionBar.cjs +2 -2
- package/dist/components/DataTable/components/ActionBar.js +2 -2
- package/dist/components/DataTable/components/Cell.cjs +1 -1
- package/dist/components/DataTable/components/Cell.cjs.map +1 -1
- package/dist/components/DataTable/components/Cell.js +1 -1
- package/dist/components/DataTable/components/Cell.js.map +1 -1
- package/dist/components/DataTable/components/ColumnDivider.cjs +1 -1
- package/dist/components/DataTable/components/ColumnDivider.cjs.map +1 -1
- package/dist/components/DataTable/components/ColumnDivider.js +1 -1
- package/dist/components/DataTable/components/ColumnDivider.js.map +1 -1
- package/dist/components/DataTable/components/ColumnHeader.cjs +3 -3
- package/dist/components/DataTable/components/ColumnHeader.cjs.map +1 -1
- package/dist/components/DataTable/components/ColumnHeader.js +3 -3
- package/dist/components/DataTable/components/ColumnHeader.js.map +1 -1
- package/dist/components/DataTable/components/EmptyBodyContent.cjs +2 -2
- package/dist/components/DataTable/components/EmptyBodyContent.cjs.map +1 -1
- package/dist/components/DataTable/components/EmptyBodyContent.js +2 -2
- package/dist/components/DataTable/components/EmptyBodyContent.js.map +1 -1
- package/dist/components/DataTable/components/Header.cjs +1 -1
- package/dist/components/DataTable/components/Header.js +1 -1
- package/dist/components/DataTable/components/LoadingCellContent.cjs +1 -1
- package/dist/components/DataTable/components/LoadingCellContent.js +1 -1
- package/dist/components/DataTable/components/NoWrap.cjs +1 -1
- package/dist/components/DataTable/components/NoWrap.js +1 -1
- package/dist/components/DataTable/components/Row.cjs +1 -1
- package/dist/components/DataTable/components/Row.js +1 -1
- package/dist/components/DataTable/components/ScrollContainer.cjs +1 -1
- package/dist/components/DataTable/components/ScrollContainer.js +1 -1
- package/dist/components/DataTable/components/TableGrid.cjs +1 -1
- package/dist/components/DataTable/components/TableGrid.cjs.map +1 -1
- package/dist/components/DataTable/components/TableGrid.js +1 -1
- package/dist/components/DataTable/components/TableGrid.js.map +1 -1
- package/dist/components/DataTable/components/Truncate.cjs +1 -1
- package/dist/components/DataTable/components/Truncate.js +1 -1
- package/dist/components/DataTable/components/Wrapper.cjs +1 -1
- package/dist/components/DataTable/components/Wrapper.js +1 -1
- package/dist/components/DateInputField/styled.cjs +1 -1
- package/dist/components/DateInputField/styled.cjs.map +1 -1
- package/dist/components/DateInputField/styled.js +1 -1
- package/dist/components/DateInputField/styled.js.map +1 -1
- package/dist/components/DatePicker/styled.cjs +1 -1
- package/dist/components/DatePicker/styled.js +1 -1
- package/dist/components/DateRangePicker/components/Divider.cjs +1 -1
- package/dist/components/DateRangePicker/components/Divider.js +1 -1
- package/dist/components/DescriptionList/DescriptionList.cjs +6 -6
- package/dist/components/DescriptionList/DescriptionList.cjs.map +1 -1
- package/dist/components/DescriptionList/DescriptionList.js +6 -6
- package/dist/components/DescriptionList/DescriptionList.js.map +1 -1
- package/dist/components/DetailPage/styled.cjs +2 -2
- package/dist/components/DetailPage/styled.cjs.map +1 -1
- package/dist/components/DetailPage/styled.js +2 -2
- package/dist/components/DetailPage/styled.js.map +1 -1
- package/dist/components/Dropdown/styled.cjs +1 -1
- package/dist/components/Dropdown/styled.cjs.map +1 -1
- package/dist/components/Dropdown/styled.js +1 -1
- package/dist/components/Dropdown/styled.js.map +1 -1
- package/dist/components/FilterTag/styled.cjs +7 -7
- package/dist/components/FilterTag/styled.cjs.map +1 -1
- package/dist/components/FilterTag/styled.js +7 -7
- package/dist/components/FilterTag/styled.js.map +1 -1
- package/dist/components/Grid/index.cjs +1 -1
- package/dist/components/Grid/index.cjs.map +1 -1
- package/dist/components/Grid/index.js +1 -1
- package/dist/components/Grid/index.js.map +1 -1
- package/dist/components/Image/components/styled.cjs +4 -4
- package/dist/components/Image/components/styled.js +4 -4
- package/dist/components/Indicator/styled.cjs +1 -1
- package/dist/components/Indicator/styled.cjs.map +1 -1
- package/dist/components/Indicator/styled.js +1 -1
- package/dist/components/Indicator/styled.js.map +1 -1
- package/dist/components/InputAffix/InputAffix.cjs +2 -2
- package/dist/components/InputAffix/InputAffix.cjs.map +1 -1
- package/dist/components/InputAffix/InputAffix.js +2 -2
- package/dist/components/InputAffix/InputAffix.js.map +1 -1
- package/dist/components/InputGroup/index.cjs +1 -1
- package/dist/components/InputGroup/index.cjs.map +1 -1
- package/dist/components/InputGroup/index.js +1 -1
- package/dist/components/InputGroup/index.js.map +1 -1
- package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.cjs +2 -2
- package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.cjs.map +1 -1
- package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.js +2 -2
- package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.js.map +1 -1
- package/dist/components/LegacyDataTable/SpecificState/styled.cjs +4 -4
- package/dist/components/LegacyDataTable/SpecificState/styled.js +4 -4
- package/dist/components/LegacyDataTable/cells/ClickableCell.cjs +1 -1
- package/dist/components/LegacyDataTable/cells/ClickableCell.cjs.map +1 -1
- package/dist/components/LegacyDataTable/cells/ClickableCell.js +1 -1
- package/dist/components/LegacyDataTable/cells/ClickableCell.js.map +1 -1
- package/dist/components/LegacyDataTable/cells/EditableCell.cjs +1 -1
- package/dist/components/LegacyDataTable/cells/EditableCell.cjs.map +1 -1
- package/dist/components/LegacyDataTable/cells/EditableCell.js +1 -1
- package/dist/components/LegacyDataTable/cells/EditableCell.js.map +1 -1
- package/dist/components/LegacyDataTable/cells/styled.cjs +1 -1
- package/dist/components/LegacyDataTable/cells/styled.cjs.map +1 -1
- package/dist/components/LegacyDataTable/cells/styled.js +1 -1
- package/dist/components/LegacyDataTable/cells/styled.js.map +1 -1
- package/dist/components/LegacyDataTable/styled.cjs +14 -14
- package/dist/components/LegacyDataTable/styled.cjs.map +1 -1
- package/dist/components/LegacyDataTable/styled.js +14 -14
- package/dist/components/LegacyDataTable/styled.js.map +1 -1
- package/dist/components/LoginWithAmazonButton/styled.cjs +1 -1
- package/dist/components/LoginWithAmazonButton/styled.js +1 -1
- package/dist/components/Modal/components/Dialog/styled.cjs +1 -1
- package/dist/components/Modal/components/Dialog/styled.js +1 -1
- package/dist/components/Modal/components/styled.cjs +1 -1
- package/dist/components/Modal/components/styled.cjs.map +1 -1
- package/dist/components/Modal/components/styled.js +1 -1
- package/dist/components/Modal/components/styled.js.map +1 -1
- package/dist/components/Pagination/styled.cjs +3 -3
- package/dist/components/Pagination/styled.cjs.map +1 -1
- package/dist/components/Pagination/styled.js +3 -3
- package/dist/components/Pagination/styled.js.map +1 -1
- package/dist/components/Popover/styled.cjs +2 -2
- package/dist/components/Popover/styled.cjs.map +1 -1
- package/dist/components/Popover/styled.js +2 -2
- package/dist/components/Popover/styled.js.map +1 -1
- package/dist/components/Radio/styled.cjs +1 -1
- package/dist/components/Radio/styled.js +1 -1
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.cjs +1 -1
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.cjs.map +1 -1
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js +1 -1
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js.map +1 -1
- package/dist/components/Search/styled.cjs +3 -3
- package/dist/components/Search/styled.js +3 -3
- package/dist/components/SegmentedControl/styled.cjs +1 -1
- package/dist/components/SegmentedControl/styled.cjs.map +1 -1
- package/dist/components/SegmentedControl/styled.js +1 -1
- package/dist/components/SegmentedControl/styled.js.map +1 -1
- package/dist/components/Select/styled.cjs +1 -1
- package/dist/components/Select/styled.cjs.map +1 -1
- package/dist/components/Select/styled.js +1 -1
- package/dist/components/Select/styled.js.map +1 -1
- package/dist/components/SelectDropdown/ListItem/styled.cjs +7 -7
- package/dist/components/SelectDropdown/ListItem/styled.cjs.map +1 -1
- package/dist/components/SelectDropdown/ListItem/styled.js +7 -7
- package/dist/components/SelectDropdown/ListItem/styled.js.map +1 -1
- package/dist/components/SelectDropdown/ListItemSection/styled.cjs +2 -2
- package/dist/components/SelectDropdown/ListItemSection/styled.cjs.map +1 -1
- package/dist/components/SelectDropdown/ListItemSection/styled.js +2 -2
- package/dist/components/SelectDropdown/ListItemSection/styled.js.map +1 -1
- package/dist/components/SelectDropdown/styled.cjs +6 -6
- package/dist/components/SelectDropdown/styled.cjs.map +1 -1
- package/dist/components/SelectDropdown/styled.js +6 -6
- package/dist/components/SelectDropdown/styled.js.map +1 -1
- package/dist/components/ShortcutKeys/styled.cjs +2 -2
- package/dist/components/ShortcutKeys/styled.cjs.map +1 -1
- package/dist/components/ShortcutKeys/styled.js +2 -2
- package/dist/components/ShortcutKeys/styled.js.map +1 -1
- package/dist/components/SimpleTable/styled.cjs +6 -6
- package/dist/components/SimpleTable/styled.cjs.map +1 -1
- package/dist/components/SimpleTable/styled.js +6 -6
- package/dist/components/SimpleTable/styled.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.cjs +1 -1
- package/dist/components/Skeleton/Skeleton.cjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.js +1 -1
- package/dist/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/components/Slider/styled.cjs +4 -4
- package/dist/components/Slider/styled.cjs.map +1 -1
- package/dist/components/Slider/styled.js +4 -4
- package/dist/components/Slider/styled.js.map +1 -1
- package/dist/components/Stack/Stack.cjs +2 -1
- package/dist/components/Stack/Stack.cjs.map +1 -1
- package/dist/components/Stack/Stack.d.ts +1 -0
- package/dist/components/Stack/Stack.js +2 -1
- package/dist/components/Stack/Stack.js.map +1 -1
- package/dist/components/Stepper/styled.cjs +3 -3
- package/dist/components/Stepper/styled.cjs.map +1 -1
- package/dist/components/Stepper/styled.js +3 -3
- package/dist/components/Stepper/styled.js.map +1 -1
- package/dist/components/Tag/Tag.cjs +1 -1
- package/dist/components/Tag/Tag.cjs.map +1 -1
- package/dist/components/Tag/Tag.js +1 -1
- package/dist/components/Tag/Tag.js.map +1 -1
- package/dist/components/Text/Text.cjs +1 -1
- package/dist/components/Text/Text.js +1 -1
- package/dist/components/TextField/styled.cjs +2 -2
- package/dist/components/TextField/styled.js +2 -2
- package/dist/components/ToastsLayout/components/styled.cjs +5 -5
- package/dist/components/ToastsLayout/components/styled.cjs.map +1 -1
- package/dist/components/ToastsLayout/components/styled.js +5 -5
- package/dist/components/ToastsLayout/components/styled.js.map +1 -1
- package/dist/components/Toggle/styled.cjs +4 -4
- package/dist/components/Toggle/styled.cjs.map +1 -1
- package/dist/components/Toggle/styled.js +4 -4
- package/dist/components/Toggle/styled.js.map +1 -1
- package/dist/components/ToggleButton/styled.cjs +1 -1
- package/dist/components/ToggleButton/styled.js +1 -1
- package/dist/components/Tooltip/components/styled.cjs +4 -4
- package/dist/components/Tooltip/components/styled.cjs.map +1 -1
- package/dist/components/Tooltip/components/styled.js +4 -4
- package/dist/components/Tooltip/components/styled.js.map +1 -1
- package/dist/components/UploadFile/components/UploadedFile/styled.cjs +2 -2
- package/dist/components/UploadFile/components/UploadedFile/styled.cjs.map +1 -1
- package/dist/components/UploadFile/components/UploadedFile/styled.js +2 -2
- package/dist/components/UploadFile/components/UploadedFile/styled.js.map +1 -1
- package/dist/components/UploadFile/styled.cjs +1 -1
- package/dist/components/UploadFile/styled.js +1 -1
- package/dist/components/VideoModal/components/styled.cjs +3 -3
- package/dist/components/VideoModal/components/styled.cjs.map +1 -1
- package/dist/components/VideoModal/components/styled.js +3 -3
- package/dist/components/VideoModal/components/styled.js.map +1 -1
- package/dist/components/VideoModal/styled.cjs +3 -3
- package/dist/components/VideoModal/styled.js +3 -3
- package/dist/components/View/styled.cjs +5 -5
- package/dist/components/View/styled.cjs.map +1 -1
- package/dist/components/View/styled.js +5 -5
- package/dist/components/View/styled.js.map +1 -1
- package/dist/components/ViewTab/styled.cjs +7 -7
- package/dist/components/ViewTab/styled.cjs.map +1 -1
- package/dist/components/ViewTab/styled.js +7 -7
- package/dist/components/ViewTab/styled.js.map +1 -1
- package/dist/components/ViewsContainer/styled.cjs +9 -9
- package/dist/components/ViewsContainer/styled.cjs.map +1 -1
- package/dist/components/ViewsContainer/styled.js +9 -9
- package/dist/components/ViewsContainer/styled.js.map +1 -1
- package/dist/hoc/withLabels/styled.cjs +5 -5
- package/dist/hoc/withLabels/styled.cjs.map +1 -1
- package/dist/hoc/withLabels/styled.js +5 -5
- package/dist/hoc/withLabels/styled.js.map +1 -1
- package/package.json +1 -1
|
@@ -22,7 +22,7 @@ const offset = {
|
|
|
22
22
|
sm: '-8px',
|
|
23
23
|
xs: '-6px',
|
|
24
24
|
};
|
|
25
|
-
const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--
|
|
25
|
+
const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--gpqjtl" }) `position:absolute;top:${({ size }) => offset[size]};right:${({ size }) => offset[size]};box-sizing:border-box;height:${({ size }) => sizes[size]};min-width:${({ size }) => sizes[size]};display:flex;align-items:center;justify-content:center;border-radius:${({ size }) => borderRadius[size]};padding:0 4px;background-color:${({ color }) => color || index.theme.colors.neutral.grey.base};border:2px solid white;font-weight:bold;font-size:12px;`;
|
|
26
26
|
|
|
27
27
|
exports.Wrapper = Wrapper;
|
|
28
28
|
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Indicator/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nconst sizes = {\n base: '28px',\n sm: '20px',\n xs: '16px',\n};\n\nconst borderRadius = {\n base: '18px',\n sm: '10px',\n xs: '8px',\n};\n\nconst offset = {\n base: '-12px',\n sm: '-8px',\n xs: '-6px',\n};\n\nexport const Wrapper = styled.div<{ size: 'base' | 'sm' | 'xs' }>`\n position: absolute;\n top: ${({ size }) => offset[size]};\n right: ${({ size }) => offset[size]};\n box-sizing: border-box;\n\n height: ${({ size }) => sizes[size]};\n min-width: ${({ size }) => sizes[size]};\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ${({ size }) => borderRadius[size]};\n padding: 0 4px;\n background-color: ${({ color }) => color || theme.colors.neutral.grey.base};\n border: 2px solid white;\n font-weight: bold;\n font-size: 12px;\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,KAAK;CACV;AAED,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEY,MAAA,OAAO,GAAGA,uBAAM,CAAC,GAAG,CAExB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Indicator/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nconst sizes = {\n base: '28px',\n sm: '20px',\n xs: '16px',\n};\n\nconst borderRadius = {\n base: '18px',\n sm: '10px',\n xs: '8px',\n};\n\nconst offset = {\n base: '-12px',\n sm: '-8px',\n xs: '-6px',\n};\n\nexport const Wrapper = styled.div<{ size: 'base' | 'sm' | 'xs' }>`\n position: absolute;\n top: ${({ size }) => offset[size]};\n right: ${({ size }) => offset[size]};\n box-sizing: border-box;\n\n height: ${({ size }) => sizes[size]};\n min-width: ${({ size }) => sizes[size]};\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ${({ size }) => borderRadius[size]};\n padding: 0 4px;\n background-color: ${({ color }) => color || theme.colors.neutral.grey.base};\n border: 2px solid white;\n font-weight: bold;\n font-size: 12px;\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,KAAK;CACV;AAED,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEY,MAAA,OAAO,GAAGA,uBAAM,CAAC,GAAG,CAExB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,CAAA,OAAA,EACxB,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,iCAGzB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CACtB,WAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAIrB,sEAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAA,gCAAA,EAE7B,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAIC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
|
|
@@ -16,7 +16,7 @@ const offset = {
|
|
|
16
16
|
sm: '-8px',
|
|
17
17
|
xs: '-6px',
|
|
18
18
|
};
|
|
19
|
-
const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--
|
|
19
|
+
const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--gpqjtl" }) `position:absolute;top:${({ size }) => offset[size]};right:${({ size }) => offset[size]};box-sizing:border-box;height:${({ size }) => sizes[size]};min-width:${({ size }) => sizes[size]};display:flex;align-items:center;justify-content:center;border-radius:${({ size }) => borderRadius[size]};padding:0 4px;background-color:${({ color }) => color || theme.colors.neutral.grey.base};border:2px solid white;font-weight:bold;font-size:12px;`;
|
|
20
20
|
|
|
21
21
|
export { Wrapper };
|
|
22
22
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/Indicator/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nconst sizes = {\n base: '28px',\n sm: '20px',\n xs: '16px',\n};\n\nconst borderRadius = {\n base: '18px',\n sm: '10px',\n xs: '8px',\n};\n\nconst offset = {\n base: '-12px',\n sm: '-8px',\n xs: '-6px',\n};\n\nexport const Wrapper = styled.div<{ size: 'base' | 'sm' | 'xs' }>`\n position: absolute;\n top: ${({ size }) => offset[size]};\n right: ${({ size }) => offset[size]};\n box-sizing: border-box;\n\n height: ${({ size }) => sizes[size]};\n min-width: ${({ size }) => sizes[size]};\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ${({ size }) => borderRadius[size]};\n padding: 0 4px;\n background-color: ${({ color }) => color || theme.colors.neutral.grey.base};\n border: 2px solid white;\n font-weight: bold;\n font-size: 12px;\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,KAAK;CACV;AAED,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEY,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAExB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../src/components/Indicator/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nconst sizes = {\n base: '28px',\n sm: '20px',\n xs: '16px',\n};\n\nconst borderRadius = {\n base: '18px',\n sm: '10px',\n xs: '8px',\n};\n\nconst offset = {\n base: '-12px',\n sm: '-8px',\n xs: '-6px',\n};\n\nexport const Wrapper = styled.div<{ size: 'base' | 'sm' | 'xs' }>`\n position: absolute;\n top: ${({ size }) => offset[size]};\n right: ${({ size }) => offset[size]};\n box-sizing: border-box;\n\n height: ${({ size }) => sizes[size]};\n min-width: ${({ size }) => sizes[size]};\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: ${({ size }) => borderRadius[size]};\n padding: 0 4px;\n background-color: ${({ color }) => color || theme.colors.neutral.grey.base};\n border: 2px solid white;\n font-weight: bold;\n font-size: 12px;\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,KAAK,GAAG;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,KAAK;CACV;AAED,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEY,MAAA,OAAO,GAAG,MAAM,CAAC,GAAG,CAExB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,CAAA,OAAA,EACxB,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,iCAGzB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CACtB,WAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAIrB,sEAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAA,gCAAA,EAE7B,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
|
|
@@ -12,8 +12,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
13
13
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
14
14
|
|
|
15
|
-
const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--
|
|
16
|
-
const StyledHint = styled__default.default(Text.Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--
|
|
15
|
+
const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputStyles.inputFullStyles} ${index.InputGroup}:has(:disabled)&{background-color:${index$1.theme.colors.neutral.grey.light};}`;
|
|
16
|
+
const StyledHint = styled__default.default(Text.Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--8xnkei" }) `font-size:${index$1.theme.text.body.fontSize};`;
|
|
17
17
|
function InputAffix({ children, ...otherProps }) {
|
|
18
18
|
return (React__default.default.createElement(Container, { ...otherProps },
|
|
19
19
|
React__default.default.createElement(StyledHint, { variant: "hintText" }, children)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputAffix.cjs","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n user-select: none;\n flex-shrink: 0;\n\n ${inputFullStyles}\n\n ${InputGroup}:has(:disabled) & {\n background-color: ${theme.colors.neutral.grey.light};\n }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n return (\n <Container {...otherProps}>\n <StyledHint variant=\"hintText\">{children}</StyledHint>\n </Container>\n );\n}\n\nInputAffix.Container = Container;\n"],"names":["styled","inputFullStyles","InputGroup","theme","Text","React"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAIxB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"InputAffix.cjs","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n user-select: none;\n flex-shrink: 0;\n\n ${inputFullStyles}\n\n ${InputGroup}:has(:disabled) & {\n background-color: ${theme.colors.neutral.grey.light};\n }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n return (\n <Container {...otherProps}>\n <StyledHint variant=\"hintText\">{children}</StyledHint>\n </Container>\n );\n}\n\nInputAffix.Container = Container;\n"],"names":["styled","inputFullStyles","InputGroup","theme","Text","React"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAIxB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAAAC,2BAAe,IAEfC,gBAAU,CAAA,kCAAA,EACUC,aAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAGH,uBAAM,CAACI,SAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAC/C,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAAAD,aAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,sBAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}
|
|
@@ -5,8 +5,8 @@ import { theme } from '../../theme/index.js';
|
|
|
5
5
|
import { Text } from '../Text/Text.js';
|
|
6
6
|
import { InputGroup } from '../InputGroup/index.js';
|
|
7
7
|
|
|
8
|
-
const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--
|
|
9
|
-
const StyledHint = styled(Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--
|
|
8
|
+
const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--zm6t34" }) `user-select:none;flex-shrink:0;${inputFullStyles} ${InputGroup}:has(:disabled)&{background-color:${theme.colors.neutral.grey.light};}`;
|
|
9
|
+
const StyledHint = styled(Text).attrs({ variant: 'hintText' }).withConfig({ displayName: "vui--StyledHint", componentId: "vui--8xnkei" }) `font-size:${theme.text.body.fontSize};`;
|
|
10
10
|
function InputAffix({ children, ...otherProps }) {
|
|
11
11
|
return (React__default.createElement(Container, { ...otherProps },
|
|
12
12
|
React__default.createElement(StyledHint, { variant: "hintText" }, children)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n user-select: none;\n flex-shrink: 0;\n\n ${inputFullStyles}\n\n ${InputGroup}:has(:disabled) & {\n background-color: ${theme.colors.neutral.grey.light};\n }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n return (\n <Container {...otherProps}>\n <StyledHint variant=\"hintText\">{children}</StyledHint>\n </Container>\n );\n}\n\nInputAffix.Container = Container;\n"],"names":["React"],"mappings":";;;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAIxB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"InputAffix.js","sources":["../../../src/components/InputAffix/InputAffix.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { inputFullStyles } from '../../utils/forms/inputStyles';\nimport { theme } from '../../theme';\nimport { Text } from '../Text';\nimport { InputGroup } from '../InputGroup';\nimport { FormComponentProps } from '../types';\n\nexport type InputAffixProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nconst Container = styled.div<InputAffixProps>`\n user-select: none;\n flex-shrink: 0;\n\n ${inputFullStyles}\n\n ${InputGroup}:has(:disabled) & {\n background-color: ${theme.colors.neutral.grey.light};\n }\n`;\n\nconst StyledHint = styled(Text).attrs({ variant: 'hintText' })`\n font-size: ${theme.text.body.fontSize};\n`;\n\nexport function InputAffix({ children, ...otherProps }: InputAffixProps) {\n return (\n <Container {...otherProps}>\n <StyledHint variant=\"hintText\">{children}</StyledHint>\n </Container>\n );\n}\n\nInputAffix.Container = Container;\n"],"names":["React"],"mappings":";;;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAIxB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+BAAA,EAAA,eAAe,IAEf,UAAU,CAAA,kCAAA,EACU,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,IAEtD;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAC/C,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,UAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAA,CACtC;AAEK,SAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAmB,EAAA;AACrE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA;QACvBA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,OAAO,EAAC,UAAU,IAAE,QAAQ,CAAc,CAC5C;AAEhB;AAEA,UAAU,CAAC,SAAS,GAAG,SAAS;;;;"}
|
|
@@ -7,7 +7,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
7
7
|
|
|
8
8
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
9
|
|
|
10
|
-
const InputGroup = styled__default.default.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--
|
|
10
|
+
const InputGroup = styled__default.default.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--1w0e9jz" }) `${variables.inputVariableStyles} display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:focus,& > *:active{z-index:5;}& > *:not(:first-child):not(:last-child){border-radius:0 !important;border-inline:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;border-left:0 !important;}`;
|
|
11
11
|
|
|
12
12
|
exports.InputGroup = InputGroup;
|
|
13
13
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputVariableStyles } from '../../utils/forms/variables';\nimport { FormComponentProps } from '../types';\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nexport const InputGroup = styled.div<InputGroupProps>`\n ${inputVariableStyles}\n\n display: flex;\n\n /* Remove inline margins from all children */\n & > * {\n margin-left: 0;\n margin-right: 0;\n box-shadow: none;\n }\n\n /* Bring in-focus and active children to the front to maintain outlines */\n & > *:focus,\n & > *:active {\n z-index: 5;\n }\n\n /* Remove inline borders for children in the middle */\n & > *:not(:first-child):not(:last-child) {\n border-radius: 0 !important;\n border-inline: 0 !important;\n }\n\n /* Remove right border radius from first child */\n & > *:first-child {\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n border-right: 0 !important;\n }\n\n /* Remove left border radius from last child */\n & > *:last-child {\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n border-left: 0 !important;\n }\n`;\n"],"names":["styled","inputVariableStyles"],"mappings":";;;;;;;;;AAMa,MAAA,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputVariableStyles } from '../../utils/forms/variables';\nimport { FormComponentProps } from '../types';\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nexport const InputGroup = styled.div<InputGroupProps>`\n ${inputVariableStyles}\n\n display: flex;\n\n /* Remove inline margins from all children */\n & > * {\n margin-left: 0;\n margin-right: 0;\n box-shadow: none;\n }\n\n /* Bring in-focus and active children to the front to maintain outlines */\n & > *:focus,\n & > *:active {\n z-index: 5;\n }\n\n /* Remove inline borders for children in the middle */\n & > *:not(:first-child):not(:last-child) {\n border-radius: 0 !important;\n border-inline: 0 !important;\n }\n\n /* Remove right border radius from first child */\n & > *:first-child {\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n border-right: 0 !important;\n }\n\n /* Remove left border radius from last child */\n & > *:last-child {\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n border-left: 0 !important;\n }\n`;\n"],"names":["styled","inputVariableStyles"],"mappings":";;;;;;;;;AAMa,MAAA,UAAU,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAChCC,6BAAmB,CAAA,sbAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
import { inputVariableStyles } from '../../utils/forms/variables.js';
|
|
3
3
|
|
|
4
|
-
const InputGroup = styled.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--
|
|
4
|
+
const InputGroup = styled.div.withConfig({ displayName: "vui--InputGroup", componentId: "vui--1w0e9jz" }) `${inputVariableStyles} display:flex;& > *{margin-left:0;margin-right:0;box-shadow:none;}& > *:focus,& > *:active{z-index:5;}& > *:not(:first-child):not(:last-child){border-radius:0 !important;border-inline:0 !important;}& > *:first-child{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:0 !important;}& > *:last-child{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;border-left:0 !important;}`;
|
|
5
5
|
|
|
6
6
|
export { InputGroup };
|
|
7
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputVariableStyles } from '../../utils/forms/variables';\nimport { FormComponentProps } from '../types';\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nexport const InputGroup = styled.div<InputGroupProps>`\n ${inputVariableStyles}\n\n display: flex;\n\n /* Remove inline margins from all children */\n & > * {\n margin-left: 0;\n margin-right: 0;\n box-shadow: none;\n }\n\n /* Bring in-focus and active children to the front to maintain outlines */\n & > *:focus,\n & > *:active {\n z-index: 5;\n }\n\n /* Remove inline borders for children in the middle */\n & > *:not(:first-child):not(:last-child) {\n border-radius: 0 !important;\n border-inline: 0 !important;\n }\n\n /* Remove right border radius from first child */\n & > *:first-child {\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n border-right: 0 !important;\n }\n\n /* Remove left border radius from last child */\n & > *:last-child {\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n border-left: 0 !important;\n }\n`;\n"],"names":[],"mappings":";;;AAMa,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/InputGroup/index.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { inputVariableStyles } from '../../utils/forms/variables';\nimport { FormComponentProps } from '../types';\n\nexport type InputGroupProps = React.HTMLAttributes<HTMLDivElement> & FormComponentProps;\n\nexport const InputGroup = styled.div<InputGroupProps>`\n ${inputVariableStyles}\n\n display: flex;\n\n /* Remove inline margins from all children */\n & > * {\n margin-left: 0;\n margin-right: 0;\n box-shadow: none;\n }\n\n /* Bring in-focus and active children to the front to maintain outlines */\n & > *:focus,\n & > *:active {\n z-index: 5;\n }\n\n /* Remove inline borders for children in the middle */\n & > *:not(:first-child):not(:last-child) {\n border-radius: 0 !important;\n border-inline: 0 !important;\n }\n\n /* Remove right border radius from first child */\n & > *:first-child {\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n border-right: 0 !important;\n }\n\n /* Remove left border radius from last child */\n & > *:last-child {\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n border-left: 0 !important;\n }\n`;\n"],"names":[],"mappings":";;;AAMa,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAChC,mBAAmB,CAAA,sbAAA;;;;"}
|
|
@@ -10,8 +10,8 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
11
11
|
|
|
12
12
|
const { grey } = index.theme.colors.neutral;
|
|
13
|
-
const SkeletonContentWrapper = styled__default.default.div.withConfig({ displayName: "vui--SkeletonContentWrapper", componentId: "vui--
|
|
14
|
-
const SkeletonContentComponent = styled__default.default.div.withConfig({ displayName: "vui--SkeletonContentComponent", componentId: "vui--
|
|
13
|
+
const SkeletonContentWrapper = styled__default.default.div.withConfig({ displayName: "vui--SkeletonContentWrapper", componentId: "vui--oakirc" }) `height:16px;width:100%;`;
|
|
14
|
+
const SkeletonContentComponent = styled__default.default.div.withConfig({ displayName: "vui--SkeletonContentComponent", componentId: "vui--dbfg3y" }) `display:inline-block;color:transparent;border-radius:4px;animation-duration:${({ isLoading = true }) => (isLoading ? '1s' : 0)};animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);background-size:800px 104px;border:0;width:100%;height:100%;@keyframes placeHolderShimmer{0%{background-position:-380px 0;}100%{background-position:380px 0;}}`;
|
|
15
15
|
const SkeletonContent = ({ isLoading, style }) => (React__default.default.createElement(SkeletonContentWrapper, { style: style },
|
|
16
16
|
React__default.default.createElement(SkeletonContentComponent, { isLoading: isLoading })));
|
|
17
17
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonContent.cjs","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst { grey } = theme.colors.neutral;\n\nconst SkeletonContentWrapper = styled.div`\n height: 16px;\n width: 100%;\n`;\n\nconst SkeletonContentComponent = styled.div<{ isLoading?: boolean }>`\n display: inline-block;\n color: transparent;\n border-radius: 4px;\n animation-duration: ${({ isLoading = true }) => (isLoading ? '1s' : 0)};\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeHolderShimmer;\n animation-timing-function: linear;\n background: linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);\n background-size: 800px 104px;\n border: 0;\n width: 100%;\n height: 100%;\n\n @keyframes placeHolderShimmer {\n 0% {\n background-position: -380px 0;\n }\n 100% {\n background-position: 380px 0;\n }\n }\n`;\n\ntype SkeletonContentPropTypes = {\n isLoading?: boolean;\n style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading, style }: SkeletonContentPropTypes) => (\n <SkeletonContentWrapper style={style}>\n <SkeletonContentComponent isLoading={isLoading} />\n </SkeletonContentWrapper>\n);\n"],"names":["theme","styled","React"],"mappings":";;;;;;;;;;;AAIA,MAAM,EAAE,IAAI,EAAE,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO;AAErC,MAAM,sBAAsB,GAAGC,uBAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"SkeletonContent.cjs","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst { grey } = theme.colors.neutral;\n\nconst SkeletonContentWrapper = styled.div`\n height: 16px;\n width: 100%;\n`;\n\nconst SkeletonContentComponent = styled.div<{ isLoading?: boolean }>`\n display: inline-block;\n color: transparent;\n border-radius: 4px;\n animation-duration: ${({ isLoading = true }) => (isLoading ? '1s' : 0)};\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeHolderShimmer;\n animation-timing-function: linear;\n background: linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);\n background-size: 800px 104px;\n border: 0;\n width: 100%;\n height: 100%;\n\n @keyframes placeHolderShimmer {\n 0% {\n background-position: -380px 0;\n }\n 100% {\n background-position: 380px 0;\n }\n }\n`;\n\ntype SkeletonContentPropTypes = {\n isLoading?: boolean;\n style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading, style }: SkeletonContentPropTypes) => (\n <SkeletonContentWrapper style={style}>\n <SkeletonContentComponent isLoading={isLoading} />\n </SkeletonContentWrapper>\n);\n"],"names":["theme","styled","React"],"mappings":";;;;;;;;;;;AAIA,MAAM,EAAE,IAAI,EAAE,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO;AAErC,MAAM,sBAAsB,GAAGC,uBAAM,CAAC,GAAG,iHAGxC;AAED,MAAM,wBAAwB,GAAGA,uBAAM,CAAC,GAAG,yKAInB,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,CAAA,yKAAA,EAK9B,IAAI,CAAC,IAAI,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,IAAI,sKAcrF;AAOY,MAAA,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAA4B,MAC5EC,sBAAA,CAAA,aAAA,CAAC,sBAAsB,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;IAClCA,sBAAC,CAAA,aAAA,CAAA,wBAAwB,IAAC,SAAS,EAAE,SAAS,EAAI,CAAA,CAC3B;;;;"}
|
|
@@ -3,8 +3,8 @@ import styled from 'styled-components';
|
|
|
3
3
|
import { theme } from '../../../theme/index.js';
|
|
4
4
|
|
|
5
5
|
const { grey } = theme.colors.neutral;
|
|
6
|
-
const SkeletonContentWrapper = styled.div.withConfig({ displayName: "vui--SkeletonContentWrapper", componentId: "vui--
|
|
7
|
-
const SkeletonContentComponent = styled.div.withConfig({ displayName: "vui--SkeletonContentComponent", componentId: "vui--
|
|
6
|
+
const SkeletonContentWrapper = styled.div.withConfig({ displayName: "vui--SkeletonContentWrapper", componentId: "vui--oakirc" }) `height:16px;width:100%;`;
|
|
7
|
+
const SkeletonContentComponent = styled.div.withConfig({ displayName: "vui--SkeletonContentComponent", componentId: "vui--dbfg3y" }) `display:inline-block;color:transparent;border-radius:4px;animation-duration:${({ isLoading = true }) => (isLoading ? '1s' : 0)};animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);background-size:800px 104px;border:0;width:100%;height:100%;@keyframes placeHolderShimmer{0%{background-position:-380px 0;}100%{background-position:380px 0;}}`;
|
|
8
8
|
const SkeletonContent = ({ isLoading, style }) => (React__default.createElement(SkeletonContentWrapper, { style: style },
|
|
9
9
|
React__default.createElement(SkeletonContentComponent, { isLoading: isLoading })));
|
|
10
10
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonContent.js","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst { grey } = theme.colors.neutral;\n\nconst SkeletonContentWrapper = styled.div`\n height: 16px;\n width: 100%;\n`;\n\nconst SkeletonContentComponent = styled.div<{ isLoading?: boolean }>`\n display: inline-block;\n color: transparent;\n border-radius: 4px;\n animation-duration: ${({ isLoading = true }) => (isLoading ? '1s' : 0)};\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeHolderShimmer;\n animation-timing-function: linear;\n background: linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);\n background-size: 800px 104px;\n border: 0;\n width: 100%;\n height: 100%;\n\n @keyframes placeHolderShimmer {\n 0% {\n background-position: -380px 0;\n }\n 100% {\n background-position: 380px 0;\n }\n }\n`;\n\ntype SkeletonContentPropTypes = {\n isLoading?: boolean;\n style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading, style }: SkeletonContentPropTypes) => (\n <SkeletonContentWrapper style={style}>\n <SkeletonContentComponent isLoading={isLoading} />\n </SkeletonContentWrapper>\n);\n"],"names":["React"],"mappings":";;;;AAIA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;AAErC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"SkeletonContent.js","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst { grey } = theme.colors.neutral;\n\nconst SkeletonContentWrapper = styled.div`\n height: 16px;\n width: 100%;\n`;\n\nconst SkeletonContentComponent = styled.div<{ isLoading?: boolean }>`\n display: inline-block;\n color: transparent;\n border-radius: 4px;\n animation-duration: ${({ isLoading = true }) => (isLoading ? '1s' : 0)};\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: placeHolderShimmer;\n animation-timing-function: linear;\n background: linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);\n background-size: 800px 104px;\n border: 0;\n width: 100%;\n height: 100%;\n\n @keyframes placeHolderShimmer {\n 0% {\n background-position: -380px 0;\n }\n 100% {\n background-position: 380px 0;\n }\n }\n`;\n\ntype SkeletonContentPropTypes = {\n isLoading?: boolean;\n style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading, style }: SkeletonContentPropTypes) => (\n <SkeletonContentWrapper style={style}>\n <SkeletonContentComponent isLoading={isLoading} />\n </SkeletonContentWrapper>\n);\n"],"names":["React"],"mappings":";;;;AAIA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;AAErC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,iHAGxC;AAED,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,yKAInB,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,CAAA,yKAAA,EAK9B,IAAI,CAAC,IAAI,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,IAAI,sKAcrF;AAOY,MAAA,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAA4B,MAC5EA,cAAA,CAAA,aAAA,CAAC,sBAAsB,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA;IAClCA,cAAC,CAAA,aAAA,CAAA,wBAAwB,IAAC,SAAS,EAAE,SAAS,EAAI,CAAA,CAC3B;;;;"}
|
|
@@ -9,10 +9,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
11
11
|
|
|
12
|
-
const SpecificStateContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--
|
|
13
|
-
const EllipseContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--EllipseContainer", componentId: "vui--
|
|
14
|
-
const TitleText = styled__default.default(Text.Text).withConfig({ displayName: "vui--TitleText", componentId: "vui--
|
|
15
|
-
const SubTitleText = styled__default.default(Text.Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--
|
|
12
|
+
const SpecificStateContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--991hgo" }) `display:flex;flex-direction:column;justify-content:center;align-items:center;height:${(props) => props.height}px;background:white;`;
|
|
13
|
+
const EllipseContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--EllipseContainer", componentId: "vui--1oi4ebm" }) `display:flex;justify-content:center;align-items:center;width:120px;height:120px;border-radius:100px;background:${index.theme.colors.neutral.grey.base};svg{width:64px !important;height:64px !important;}`;
|
|
14
|
+
const TitleText = styled__default.default(Text.Text).withConfig({ displayName: "vui--TitleText", componentId: "vui--pj8i0k" }) `margin-top:24px;`;
|
|
15
|
+
const SubTitleText = styled__default.default(Text.Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--19x6udv" }) `margin-top:8px;`;
|
|
16
16
|
|
|
17
17
|
exports.EllipseContainer = EllipseContainer;
|
|
18
18
|
exports.SpecificStateContainer = SpecificStateContainer;
|
|
@@ -3,10 +3,10 @@ import { theme } from '../../../theme/index.js';
|
|
|
3
3
|
import { BaseContainer } from '../../BaseContainer/BaseContainer.js';
|
|
4
4
|
import { Text } from '../../Text/Text.js';
|
|
5
5
|
|
|
6
|
-
const SpecificStateContainer = styled(BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--
|
|
7
|
-
const EllipseContainer = styled(BaseContainer).withConfig({ displayName: "vui--EllipseContainer", componentId: "vui--
|
|
8
|
-
const TitleText = styled(Text).withConfig({ displayName: "vui--TitleText", componentId: "vui--
|
|
9
|
-
const SubTitleText = styled(Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--
|
|
6
|
+
const SpecificStateContainer = styled(BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--991hgo" }) `display:flex;flex-direction:column;justify-content:center;align-items:center;height:${(props) => props.height}px;background:white;`;
|
|
7
|
+
const EllipseContainer = styled(BaseContainer).withConfig({ displayName: "vui--EllipseContainer", componentId: "vui--1oi4ebm" }) `display:flex;justify-content:center;align-items:center;width:120px;height:120px;border-radius:100px;background:${theme.colors.neutral.grey.base};svg{width:64px !important;height:64px !important;}`;
|
|
8
|
+
const TitleText = styled(Text).withConfig({ displayName: "vui--TitleText", componentId: "vui--pj8i0k" }) `margin-top:24px;`;
|
|
9
|
+
const SubTitleText = styled(Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--19x6udv" }) `margin-top:8px;`;
|
|
10
10
|
|
|
11
11
|
export { EllipseContainer, SpecificStateContainer, SubTitleText, TitleText };
|
|
12
12
|
//# sourceMappingURL=styled.js.map
|
|
@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
12
12
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
13
13
|
|
|
14
|
-
const ClickableButton = styled__default.default(styled$1.CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--
|
|
14
|
+
const ClickableButton = styled__default.default(styled$1.CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--1b7t5il" }) `color:${index.theme.text.link.color};text-decoration:${index.theme.text.link.textDecoration};`;
|
|
15
15
|
const ClickableCell = ({ onClick, children, ...otherProps }) => (React__default.default.createElement(styled$2.Cell, { ...otherProps },
|
|
16
16
|
React__default.default.createElement(ClickableButton, { onClick: onClick }, children)));
|
|
17
17
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst ClickableButton = styled(CellButton)`\n color: ${theme.text.link.color};\n text-decoration: ${theme.text.link.textDecoration};\n`;\n\nexport interface ClickableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n <Cell {...otherProps}>\n <ClickableButton onClick={onClick}>{children}</ClickableButton>\n </Cell>\n);\n"],"names":["styled","CellButton","theme","React","Cell"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,eAAe,GAAGA,uBAAM,CAACC,mBAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"ClickableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst ClickableButton = styled(CellButton)`\n color: ${theme.text.link.color};\n text-decoration: ${theme.text.link.textDecoration};\n`;\n\nexport interface ClickableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n <Cell {...otherProps}>\n <ClickableButton onClick={onClick}>{children}</ClickableButton>\n </Cell>\n);\n"],"names":["styled","CellButton","theme","React","Cell"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,eAAe,GAAGA,uBAAM,CAACC,mBAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC/BC,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CACX,iBAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA,CAAA,CAClD;MAOY,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFC,sBAAC,CAAA,aAAA,CAAAC,aAAI,OAAK,UAAU,EAAA;IAClBD,sBAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAmB,CAC1D;;;;"}
|
|
@@ -4,7 +4,7 @@ import { theme } from '../../../theme/index.js';
|
|
|
4
4
|
import { CellButton } from './styled.js';
|
|
5
5
|
import { Cell } from '../styled.js';
|
|
6
6
|
|
|
7
|
-
const ClickableButton = styled(CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--
|
|
7
|
+
const ClickableButton = styled(CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--1b7t5il" }) `color:${theme.text.link.color};text-decoration:${theme.text.link.textDecoration};`;
|
|
8
8
|
const ClickableCell = ({ onClick, children, ...otherProps }) => (React__default.createElement(Cell, { ...otherProps },
|
|
9
9
|
React__default.createElement(ClickableButton, { onClick: onClick }, children)));
|
|
10
10
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst ClickableButton = styled(CellButton)`\n color: ${theme.text.link.color};\n text-decoration: ${theme.text.link.textDecoration};\n`;\n\nexport interface ClickableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n <Cell {...otherProps}>\n <ClickableButton onClick={onClick}>{children}</ClickableButton>\n </Cell>\n);\n"],"names":["React"],"mappings":";;;;;;AAMA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"ClickableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst ClickableButton = styled(CellButton)`\n color: ${theme.text.link.color};\n text-decoration: ${theme.text.link.textDecoration};\n`;\n\nexport interface ClickableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n <Cell {...otherProps}>\n <ClickableButton onClick={onClick}>{children}</ClickableButton>\n </Cell>\n);\n"],"names":["React"],"mappings":";;;;;;AAMA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CACX,iBAAA,EAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA,CAAA,CAClD;MAOY,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFA,cAAC,CAAA,aAAA,CAAA,IAAI,OAAK,UAAU,EAAA;IAClBA,cAAC,CAAA,aAAA,CAAA,eAAe,EAAC,EAAA,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAmB,CAC1D;;;;"}
|
|
@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
12
12
|
|
|
13
|
-
const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--
|
|
13
|
+
const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--n24x0f" }) `text-align:inherit;border-bottom:1px dotted black;`;
|
|
14
14
|
const EditableCell = ({ onClick, children, ...otherProps }) => (React__default.default.createElement(styled$1.Cell, { ...otherProps },
|
|
15
15
|
React__default.default.createElement(styled$2.CellButton, { onClick: onClick },
|
|
16
16
|
React__default.default.createElement(Content, null, children))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n text-align: inherit;\n border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n <Cell {...otherProps}>\n <CellButton onClick={onClick}>\n <Content>{children}</Content>\n </CellButton>\n </Cell>\n);\n"],"names":["styled","React","Cell","CellButton"],"mappings":";;;;;;;;;;;;AAKA,MAAM,OAAO,GAAGA,uBAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"EditableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n text-align: inherit;\n border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n <Cell {...otherProps}>\n <CellButton onClick={onClick}>\n <Content>{children}</Content>\n </CellButton>\n </Cell>\n);\n"],"names":["styled","React","Cell","CellButton"],"mappings":";;;;;;;;;;;;AAKA,MAAM,OAAO,GAAGA,uBAAM,CAAC,GAAG,6HAGzB;MAOY,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFC,sBAAC,CAAA,aAAA,CAAAC,aAAI,OAAK,UAAU,EAAA;AAClB,IAAAD,sBAAA,CAAA,aAAA,CAACE,mBAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA;AAC1B,QAAAF,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CAClB,CACR;;;;"}
|
|
@@ -3,7 +3,7 @@ import styled from 'styled-components';
|
|
|
3
3
|
import { CellButton } from './styled.js';
|
|
4
4
|
import { Cell } from '../styled.js';
|
|
5
5
|
|
|
6
|
-
const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--
|
|
6
|
+
const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--n24x0f" }) `text-align:inherit;border-bottom:1px dotted black;`;
|
|
7
7
|
const EditableCell = ({ onClick, children, ...otherProps }) => (React__default.createElement(Cell, { ...otherProps },
|
|
8
8
|
React__default.createElement(CellButton, { onClick: onClick },
|
|
9
9
|
React__default.createElement(Content, null, children))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n text-align: inherit;\n border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n <Cell {...otherProps}>\n <CellButton onClick={onClick}>\n <Content>{children}</Content>\n </CellButton>\n </Cell>\n);\n"],"names":["React"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"EditableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n text-align: inherit;\n border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n <Cell {...otherProps}>\n <CellButton onClick={onClick}>\n <Content>{children}</Content>\n </CellButton>\n </Cell>\n);\n"],"names":["React"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,6HAGzB;MAOY,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFA,cAAC,CAAA,aAAA,CAAA,IAAI,OAAK,UAAU,EAAA;AAClB,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA;AAC1B,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CAClB,CACR;;;;"}
|
|
@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
8
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
9
|
|
|
10
10
|
/* eslint-disable import/prefer-default-export */
|
|
11
|
-
const CellButton = styled__default.default.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--
|
|
11
|
+
const CellButton = styled__default.default.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--1w0np52" }) `appearance:none;border:0;background-color:transparent;font:inherit;display:inline-block;box-sizing:border-box;width:calc(100% + 1.5rem);margin:-0.75rem -0.75rem;padding:0.75rem 0.75rem;text-align:inherit;line-height:${index.theme.sizes.base};border-radius:${index.theme.radius.base};&:hover{cursor:pointer;background-color:${index.theme.colors.secondary.blue.lightest};}`;
|
|
12
12
|
|
|
13
13
|
exports.CellButton = CellButton;
|
|
14
14
|
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../../src/components/LegacyDataTable/cells/styled.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const CellButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n font: inherit;\n\n display: inline-block;\n box-sizing: border-box;\n width: calc(100% + 1.5rem);\n margin: -0.75rem -0.75rem;\n padding: 0.75rem 0.75rem;\n text-align: inherit;\n line-height: ${theme.sizes.base};\n border-radius: ${theme.radius.base};\n\n &:hover {\n cursor: pointer;\n background-color: ${theme.colors.secondary.blue.lightest};\n }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAAA;AAKO,MAAM,UAAU,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"styled.cjs","sources":["../../../../src/components/LegacyDataTable/cells/styled.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const CellButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n font: inherit;\n\n display: inline-block;\n box-sizing: border-box;\n width: calc(100% + 1.5rem);\n margin: -0.75rem -0.75rem;\n padding: 0.75rem 0.75rem;\n text-align: inherit;\n line-height: ${theme.sizes.base};\n border-radius: ${theme.radius.base};\n\n &:hover {\n cursor: pointer;\n background-color: ${theme.colors.secondary.blue.lightest};\n }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAAA;AAKO,MAAM,UAAU,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wNAAA,EAYtBC,WAAK,CAAC,KAAK,CAAC,IAAI,CACd,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAIZ,yCAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ;;;;"}
|
|
@@ -2,7 +2,7 @@ import styled from 'styled-components';
|
|
|
2
2
|
import { theme } from '../../../theme/index.js';
|
|
3
3
|
|
|
4
4
|
/* eslint-disable import/prefer-default-export */
|
|
5
|
-
const CellButton = styled.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--
|
|
5
|
+
const CellButton = styled.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--1w0np52" }) `appearance:none;border:0;background-color:transparent;font:inherit;display:inline-block;box-sizing:border-box;width:calc(100% + 1.5rem);margin:-0.75rem -0.75rem;padding:0.75rem 0.75rem;text-align:inherit;line-height:${theme.sizes.base};border-radius:${theme.radius.base};&:hover{cursor:pointer;background-color:${theme.colors.secondary.blue.lightest};}`;
|
|
6
6
|
|
|
7
7
|
export { CellButton };
|
|
8
8
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../src/components/LegacyDataTable/cells/styled.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const CellButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n font: inherit;\n\n display: inline-block;\n box-sizing: border-box;\n width: calc(100% + 1.5rem);\n margin: -0.75rem -0.75rem;\n padding: 0.75rem 0.75rem;\n text-align: inherit;\n line-height: ${theme.sizes.base};\n border-radius: ${theme.radius.base};\n\n &:hover {\n cursor: pointer;\n background-color: ${theme.colors.secondary.blue.lightest};\n }\n`;\n"],"names":[],"mappings":";;;AAAA;AAKO,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../src/components/LegacyDataTable/cells/styled.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const CellButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n font: inherit;\n\n display: inline-block;\n box-sizing: border-box;\n width: calc(100% + 1.5rem);\n margin: -0.75rem -0.75rem;\n padding: 0.75rem 0.75rem;\n text-align: inherit;\n line-height: ${theme.sizes.base};\n border-radius: ${theme.radius.base};\n\n &:hover {\n cursor: pointer;\n background-color: ${theme.colors.secondary.blue.lightest};\n }\n`;\n"],"names":[],"mappings":";;;AAAA;AAKO,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wNAAA,EAYtB,KAAK,CAAC,KAAK,CAAC,IAAI,CACd,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAIZ,yCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ;;;;"}
|
|
@@ -28,8 +28,8 @@ const startFixedColumnShadow = `
|
|
|
28
28
|
const endFixedColumnShadow = `
|
|
29
29
|
box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);
|
|
30
30
|
`;
|
|
31
|
-
const TooltipContent = styled__default.default.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--
|
|
32
|
-
const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--
|
|
31
|
+
const TooltipContent = styled__default.default.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--11ytygc" }) `display:flex;flex-direction:row;align-items:center;`;
|
|
32
|
+
const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1g4i0cu" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
|
|
33
33
|
? `
|
|
34
34
|
scrollbar-width: auto;
|
|
35
35
|
|
|
@@ -73,11 +73,11 @@ const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrap
|
|
|
73
73
|
: ''};
|
|
74
74
|
};
|
|
75
75
|
`}`;
|
|
76
|
-
const WrapperBordered = styled__default.default(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--
|
|
77
|
-
const Head = styled__default.default.thead.withConfig({ displayName: "vui--Head", componentId: "vui--
|
|
78
|
-
const Body = styled__default.default.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--
|
|
79
|
-
styled__default.default.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--
|
|
80
|
-
const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--
|
|
76
|
+
const WrapperBordered = styled__default.default(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--wtdkab" }) `border:1px solid ${grey.dark};border-radius:4px;`;
|
|
77
|
+
const Head = styled__default.default.thead.withConfig({ displayName: "vui--Head", componentId: "vui--1j5avrf" }) `background-color:white;`;
|
|
78
|
+
const Body = styled__default.default.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--n8uysg" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
|
|
79
|
+
styled__default.default.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--qckqty" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
|
|
80
|
+
const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--10drh9k" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
|
|
81
81
|
`
|
|
82
82
|
& > td:first-child::before {
|
|
83
83
|
content: "";
|
|
@@ -89,17 +89,17 @@ const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", com
|
|
|
89
89
|
background-color: ${accentColor};
|
|
90
90
|
}
|
|
91
91
|
`}`;
|
|
92
|
-
const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--
|
|
92
|
+
const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--tljl4p" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
|
|
93
93
|
const HeaderCell = styled__default.default(Cell).attrs({
|
|
94
94
|
as: 'th',
|
|
95
|
-
}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--
|
|
95
|
+
}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--10p2duv" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
|
|
96
96
|
const alignmentMap = {
|
|
97
97
|
left: 'flex-start',
|
|
98
98
|
center: 'center',
|
|
99
99
|
right: 'flex-end',
|
|
100
100
|
};
|
|
101
|
-
const HeaderCellLayout = styled__default.default.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--
|
|
102
|
-
const Table = styled__default.default.table.withConfig({ displayName: "vui--Table", componentId: "vui--
|
|
101
|
+
const HeaderCellLayout = styled__default.default.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--13i0t50" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
|
|
102
|
+
const Table = styled__default.default.table.withConfig({ displayName: "vui--Table", componentId: "vui--1bp83gy" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
|
|
103
103
|
`
|
|
104
104
|
& ${Body}:nth-child(even) td {
|
|
105
105
|
background-color: ${grey.lightest};
|
|
@@ -114,9 +114,9 @@ const Table = styled__default.default.table.withConfig({ displayName: "vui--Tabl
|
|
|
114
114
|
white-space: nowrap;
|
|
115
115
|
}
|
|
116
116
|
`}`;
|
|
117
|
-
const Footer = styled__default.default.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--
|
|
118
|
-
const StickyHeaderWrapper = styled__default.default.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--
|
|
119
|
-
const FakeHeaderTable = styled__default.default(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--
|
|
117
|
+
const Footer = styled__default.default.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--44p3gi" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
|
|
118
|
+
const StickyHeaderWrapper = styled__default.default.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--wokb93" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
|
|
119
|
+
const FakeHeaderTable = styled__default.default(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--6s4d56" }) ``;
|
|
120
120
|
|
|
121
121
|
exports.Body = Body;
|
|
122
122
|
exports.Cell = Cell;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/LegacyDataTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { NoWrapType, StripedType } from './utils/types';\nimport { ScrollPosition } from './utils/constants';\n\nconst { text, sizes } = theme;\nconst { blue } = theme.colors.secondary;\nconst { grey } = theme.colors.neutral;\nconst { scrollbar } = theme.colors.system;\n\nconst fixedColumnShadow = `\n position: absolute;\n top: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n transition: box-shadow .3s;\n`;\n\nconst startFixedColumnShadow = `\n box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\nconst endFixedColumnShadow = `\n box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\ntype WrapperPropTypes = {\n scrollDisabled: boolean;\n scrollPosition?: ScrollPosition;\n lastStartFixedColumnsIndex?: number;\n firstEndFixedColumnsIndex?: number;\n showScrollbar?: boolean;\n};\n\nexport const TooltipContent = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const Wrapper = styled.div<WrapperPropTypes>`\n width: 100%;\n overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};\n overflow-y: hidden;\n position: relative;\n border-top: 1px solid ${grey.dark};\n border-bottom: 1px solid ${grey.dark};\n\n ${({ showScrollbar }) =>\n showScrollbar\n ? `\n scrollbar-width: auto;\n\n &::-webkit-scrollbar {\n margin-top: 10px;\n width: 6px;\n height: 6px;\n }\n \n &::-webkit-scrollbar-track {\n background: ${scrollbar.background}; \n }\n \n &::-webkit-scrollbar-thumb {\n background: ${scrollbar.thumb};\n border-radius: 4px; \n }\n `\n : ''}\n\n ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>\n scrollDisabled\n ? ''\n : `\n td:nth-child(${lastStartFixedColumnsIndex}):after,\n th:nth-child(${lastStartFixedColumnsIndex}):after {\n right: 0;\n transform: translate(100%);\n ${fixedColumnShadow};\n\n ${\n scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end\n ? startFixedColumnShadow\n : ''\n };\n };\n\n td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n left: 0;\n transform: translate(-100%);\n ${fixedColumnShadow};\n\n ${\n scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle\n ? endFixedColumnShadow\n : ''\n };\n };\n `}\n`;\n\nexport const WrapperBordered = styled(Wrapper)`\n border: 1px solid ${grey.dark};\n border-radius: 4px;\n`;\n\nexport const Head = styled.thead`\n background-color: white;\n`;\n\nexport const Body = styled.tbody<{ fixedColumnsStyle?: string }>`\n tr {\n ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n }\n\n & + & > tr:first-child > td {\n border-top: 1px solid ${grey.base};\n }\n\n tr:not(:first-child) > td {\n border-top: 1px solid transparent;\n }\n\n &&& tr:hover td {\n background-color: #ebf4fb; /* TODO: Remove magic hex value */\n }\n`;\n\nexport const Foot = styled.tfoot`\n & td {\n background-color: ${grey.lightest};\n padding: 1.5rem 1rem;\n border-top: 1px solid ${blue.base};\n }\n`;\n\nexport interface RowProps {\n accentColor?: string;\n}\n\nexport const Row = styled.tr<RowProps>`\n &.hidden {\n visibility: collapse;\n }\n\n ${({ accentColor }) =>\n accentColor &&\n `\n & > td:first-child::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: ${accentColor}; \n }\n `}\n`;\n\nexport interface CellProps {\n align?: 'left' | 'center' | 'right';\n grow?: boolean;\n}\n\nexport const Cell = styled.td<CellProps>`\n position: relative;\n padding: 1.25rem 1rem;\n text-align: ${({ align }) => align || 'left'};\n background-color: white;\n\n font-family: ${text.bodySmall.fontFamily};\n font-size: ${text.bodySmall.fontSize};\n font-weight: ${text.bodySmall.fontWeight};\n color: ${text.bodySmall.color};\n line-height: ${sizes.base};\n\n width: ${({ grow }) => (grow ? '100%' : 'auto')};\n\n & > * {\n vertical-align: middle;\n }\n`;\n\nexport const HeaderCell = styled(Cell).attrs({\n as: 'th',\n})`\n user-select: none;\n border-bottom: 1px solid ${grey.dark};\n\n font-family: ${text.bodySmallBold.fontFamily};\n font-size: ${text.bodySmallBold.fontSize};\n font-weight: ${text.bodySmallBold.fontWeight};\n color: ${text.bodySmallBold.color};\n\n & span {\n white-space: pre-line;\n }\n\n &.sortable:hover {\n cursor: pointer;\n background-color: ${grey.light};\n }\n`;\n\nconst alignmentMap = {\n left: 'flex-start',\n center: 'center',\n right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps {\n align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`\n display: flex;\n align-items: center;\n justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};\n\n & > * + * {\n margin-left: 0.25rem;\n }\n`;\n\ntype TablePropTypes = {\n striped?: StripedType;\n noWrap?: NoWrapType;\n tableLoading?: boolean;\n isFixedLayout?: boolean;\n};\n\nexport const Table = styled.table<TablePropTypes>`\n width: 100%;\n border-spacing: 0;\n table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};\n\n ${({ striped }) =>\n striped &&\n `\n & ${Body}:nth-child(even) td {\n background-color: ${grey.lightest};\n }\n `}\n\n & * {\n box-sizing: border-box;\n\n ${({ tableLoading }) =>\n tableLoading &&\n `\n user-select: none;\n pointer-events: none;\n `}\n }\n\n ${({ noWrap }) =>\n noWrap &&\n `\n & ${HeaderCell}, & ${HeaderCell} span {\n white-space: nowrap;\n }\n `}\n`;\n\nexport const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`\n tr {\n ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n }\n\n & ${Cell} {\n border-top: 1px solid ${grey.dark};\n background-color: ${grey.lightest};\n padding-top: ${sizes.base};\n padding-bottom: ${sizes.base};\n line-height: 2rem;\n }\n`;\n\nexport const StickyHeaderWrapper = styled.div`\n position: fixed;\n top: 0;\n z-index: 2;\n overflow-x: hidden;\n`;\n\nexport const FakeHeaderTable = styled(Table)``;\n"],"names":["theme","styled","ScrollPosition"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styled.cjs","sources":["../../../src/components/LegacyDataTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { NoWrapType, StripedType } from './utils/types';\nimport { ScrollPosition } from './utils/constants';\n\nconst { text, sizes } = theme;\nconst { blue } = theme.colors.secondary;\nconst { grey } = theme.colors.neutral;\nconst { scrollbar } = theme.colors.system;\n\nconst fixedColumnShadow = `\n position: absolute;\n top: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n transition: box-shadow .3s;\n`;\n\nconst startFixedColumnShadow = `\n box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\nconst endFixedColumnShadow = `\n box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\ntype WrapperPropTypes = {\n scrollDisabled: boolean;\n scrollPosition?: ScrollPosition;\n lastStartFixedColumnsIndex?: number;\n firstEndFixedColumnsIndex?: number;\n showScrollbar?: boolean;\n};\n\nexport const TooltipContent = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const Wrapper = styled.div<WrapperPropTypes>`\n width: 100%;\n overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};\n overflow-y: hidden;\n position: relative;\n border-top: 1px solid ${grey.dark};\n border-bottom: 1px solid ${grey.dark};\n\n ${({ showScrollbar }) =>\n showScrollbar\n ? `\n scrollbar-width: auto;\n\n &::-webkit-scrollbar {\n margin-top: 10px;\n width: 6px;\n height: 6px;\n }\n \n &::-webkit-scrollbar-track {\n background: ${scrollbar.background}; \n }\n \n &::-webkit-scrollbar-thumb {\n background: ${scrollbar.thumb};\n border-radius: 4px; \n }\n `\n : ''}\n\n ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>\n scrollDisabled\n ? ''\n : `\n td:nth-child(${lastStartFixedColumnsIndex}):after,\n th:nth-child(${lastStartFixedColumnsIndex}):after {\n right: 0;\n transform: translate(100%);\n ${fixedColumnShadow};\n\n ${\n scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end\n ? startFixedColumnShadow\n : ''\n };\n };\n\n td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n left: 0;\n transform: translate(-100%);\n ${fixedColumnShadow};\n\n ${\n scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle\n ? endFixedColumnShadow\n : ''\n };\n };\n `}\n`;\n\nexport const WrapperBordered = styled(Wrapper)`\n border: 1px solid ${grey.dark};\n border-radius: 4px;\n`;\n\nexport const Head = styled.thead`\n background-color: white;\n`;\n\nexport const Body = styled.tbody<{ fixedColumnsStyle?: string }>`\n tr {\n ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n }\n\n & + & > tr:first-child > td {\n border-top: 1px solid ${grey.base};\n }\n\n tr:not(:first-child) > td {\n border-top: 1px solid transparent;\n }\n\n &&& tr:hover td {\n background-color: #ebf4fb; /* TODO: Remove magic hex value */\n }\n`;\n\nexport const Foot = styled.tfoot`\n & td {\n background-color: ${grey.lightest};\n padding: 1.5rem 1rem;\n border-top: 1px solid ${blue.base};\n }\n`;\n\nexport interface RowProps {\n accentColor?: string;\n}\n\nexport const Row = styled.tr<RowProps>`\n &.hidden {\n visibility: collapse;\n }\n\n ${({ accentColor }) =>\n accentColor &&\n `\n & > td:first-child::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: ${accentColor}; \n }\n `}\n`;\n\nexport interface CellProps {\n align?: 'left' | 'center' | 'right';\n grow?: boolean;\n}\n\nexport const Cell = styled.td<CellProps>`\n position: relative;\n padding: 1.25rem 1rem;\n text-align: ${({ align }) => align || 'left'};\n background-color: white;\n\n font-family: ${text.bodySmall.fontFamily};\n font-size: ${text.bodySmall.fontSize};\n font-weight: ${text.bodySmall.fontWeight};\n color: ${text.bodySmall.color};\n line-height: ${sizes.base};\n\n width: ${({ grow }) => (grow ? '100%' : 'auto')};\n\n & > * {\n vertical-align: middle;\n }\n`;\n\nexport const HeaderCell = styled(Cell).attrs({\n as: 'th',\n})`\n user-select: none;\n border-bottom: 1px solid ${grey.dark};\n\n font-family: ${text.bodySmallBold.fontFamily};\n font-size: ${text.bodySmallBold.fontSize};\n font-weight: ${text.bodySmallBold.fontWeight};\n color: ${text.bodySmallBold.color};\n\n & span {\n white-space: pre-line;\n }\n\n &.sortable:hover {\n cursor: pointer;\n background-color: ${grey.light};\n }\n`;\n\nconst alignmentMap = {\n left: 'flex-start',\n center: 'center',\n right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps {\n align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`\n display: flex;\n align-items: center;\n justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};\n\n & > * + * {\n margin-left: 0.25rem;\n }\n`;\n\ntype TablePropTypes = {\n striped?: StripedType;\n noWrap?: NoWrapType;\n tableLoading?: boolean;\n isFixedLayout?: boolean;\n};\n\nexport const Table = styled.table<TablePropTypes>`\n width: 100%;\n border-spacing: 0;\n table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};\n\n ${({ striped }) =>\n striped &&\n `\n & ${Body}:nth-child(even) td {\n background-color: ${grey.lightest};\n }\n `}\n\n & * {\n box-sizing: border-box;\n\n ${({ tableLoading }) =>\n tableLoading &&\n `\n user-select: none;\n pointer-events: none;\n `}\n }\n\n ${({ noWrap }) =>\n noWrap &&\n `\n & ${HeaderCell}, & ${HeaderCell} span {\n white-space: nowrap;\n }\n `}\n`;\n\nexport const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`\n tr {\n ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n }\n\n & ${Cell} {\n border-top: 1px solid ${grey.dark};\n background-color: ${grey.lightest};\n padding-top: ${sizes.base};\n padding-bottom: ${sizes.base};\n line-height: 2rem;\n }\n`;\n\nexport const StickyHeaderWrapper = styled.div`\n position: fixed;\n top: 0;\n z-index: 2;\n overflow-x: hidden;\n`;\n\nexport const FakeHeaderTable = styled(Table)``;\n"],"names":["theme","styled","ScrollPosition"],"mappings":";;;;;;;;;;AAKA,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAGA,WAAK;AAC7B,MAAM,EAAE,IAAI,EAAE,GAAGA,WAAK,CAAC,MAAM,CAAC,SAAS;AACvC,MAAM,EAAE,IAAI,EAAE,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO;AACrC,MAAM,EAAE,SAAS,EAAE,GAAGA,WAAK,CAAC,MAAM,CAAC,MAAM;AAEzC,MAAM,iBAAiB,GAAG;;;;;;;;;CASzB;AAED,MAAM,sBAAsB,GAAG;;CAE9B;AAED,MAAM,oBAAoB,GAAG;;CAE5B;MAUY,cAAc,GAAGC,uBAAM,CAAC,GAAG;AAM3B,MAAA,OAAO,GAAGA,uBAAM,CAAC,GAAG,CAEjB,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAAA,CAAC,KAAK,MAAM,KAAK,CAAC,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC,6DAG3C,IAAI,CAAC,IAAI,CACN,yBAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAA,EAElC,CAAC,EAAE,aAAa,EAAE,KAClB;AACE,MAAE;;;;;;;;;;AAUY,kBAAA,EAAA,SAAS,CAAC,UAAU,CAAA;;;;AAIpB,kBAAA,EAAA,SAAS,CAAC,KAAK,CAAA;;;AAG9B,IAAA;AACC,MAAE,EAAE,CAAA,CAAA,EAEN,CAAC,EAAE,cAAc,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,cAAc,EAAE,KAC1F;AACE,MAAE;AACF,MAAE;mBACW,0BAA0B,CAAA;mBAC1B,0BAA0B,CAAA;;;QAGrC,iBAAiB,CAAA;;QAGjB,cAAc,KAAKC,wBAAc,CAAC,MAAM,IAAI,cAAc,KAAKA,wBAAc,CAAC;AAC5E,UAAE;AACF,UAAE,EACN,CAAA;;;wBAGkB,yBAAyB,CAAA;wBACzB,yBAAyB,CAAA;;;QAGzC,iBAAiB,CAAA;;QAGjB,cAAc,KAAKA,wBAAc,CAAC,KAAK,IAAI,cAAc,KAAKA,wBAAc,CAAC;AAC3E,UAAE;AACF,UAAE,EACN,CAAA;;AAEH,EAAA,CAAA,CAAA;AAGI,MAAM,eAAe,GAAGD,uBAAM,CAAC,OAAO,CAAC,CACxB,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,IAAI,CAAC,IAAI;MAIlB,IAAI,GAAGA,uBAAM,CAAC,KAAK;MAInB,IAAI,GAAGA,uBAAM,CAAC,KAAK,4EAE1B,CAAC,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,sDAItB,IAAI,CAAC,IAAI,CAAA,uGAAA;AAYjBA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sBAAA,EAER,IAAI,CAAC,QAAQ,CAET,0CAAA,EAAA,IAAI,CAAC,IAAI;AAQ9B,MAAM,GAAG,GAAGA,uBAAM,CAAC,EAAE,CAKxB,UAAA,CAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,8BAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;;;;;;;;0BAQsB,WAAW,CAAA;;AAElC,EAAA,CAAA,CAAA;AAQI,MAAM,IAAI,GAAGA,uBAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kDAAA,EAGb,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,MAAM,CAAA,oCAAA,EAG7B,IAAI,CAAC,SAAS,CAAC,UAAU,CAC3B,WAAA,EAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,gBACrB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,OAAA,EAC/B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA,aAAA,EACd,KAAK,CAAC,IAAI,CAAA,OAAA,EAEhB,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAOpC,MAAA,UAAU,GAAGA,uBAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;AAC3C,IAAA,EAAE,EAAE,IAAI;AACT,CAAA,CAAC,CAE2B,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA,EAAA,IAAI,CAAC,IAAI,gBAErB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAA,WAAA,EAC/B,IAAI,CAAC,aAAa,CAAC,QAAQ,CACzB,aAAA,EAAA,IAAI,CAAC,aAAa,CAAC,UAAU,UACnC,IAAI,CAAC,aAAa,CAAC,KAAK,CAQX,+EAAA,EAAA,IAAI,CAAC,KAAK;AAIlC,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,UAAU;CAClB;AAMM,MAAM,gBAAgB,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGrB,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC;AAczE,MAAM,KAAK,GAAGA,uBAAM,CAAC,KAAK,CAGf,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yCAAA,EAAA,CAAC,EAAE,aAAa,EAAE,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC,CAEvE,CAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KACZ,OAAO;AACP,IAAA;QACI,IAAI,CAAA;AACc,wBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;AAEpC,EAAA,CAAA,CAAA,2BAAA,EAKG,CAAC,EAAE,YAAY,EAAE,KACjB,YAAY;AACZ,IAAA;;;AAGD,IAAA,CAAA,CAAA,CAAA,EAGD,CAAC,EAAE,MAAM,EAAE,KACX,MAAM;AACN,IAAA;AACI,MAAA,EAAA,UAAU,OAAO,UAAU,CAAA;;;AAGhC,EAAA,CAAA,CAAA;AAGI,MAAM,MAAM,GAAGA,uBAAM,CAAC,KAAK,CAE5B,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,GAAA,EAAA,CAAC,EAAE,iBAAiB,EAAE,KAAK,iBAAiB,CAAA,IAAA,EAG5C,IAAI,CAAA,sBAAA,EACkB,IAAI,CAAC,IAAI,CACb,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,aAAA,EAClB,KAAK,CAAC,IAAI,CACP,gBAAA,EAAA,KAAK,CAAC,IAAI;MAKnB,mBAAmB,GAAGA,uBAAM,CAAC,GAAG;MAOhC,eAAe,GAAGA,uBAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;"}
|
|
@@ -22,8 +22,8 @@ const startFixedColumnShadow = `
|
|
|
22
22
|
const endFixedColumnShadow = `
|
|
23
23
|
box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);
|
|
24
24
|
`;
|
|
25
|
-
const TooltipContent = styled.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--
|
|
26
|
-
const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--
|
|
25
|
+
const TooltipContent = styled.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--11ytygc" }) `display:flex;flex-direction:row;align-items:center;`;
|
|
26
|
+
const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1g4i0cu" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
|
|
27
27
|
? `
|
|
28
28
|
scrollbar-width: auto;
|
|
29
29
|
|
|
@@ -67,11 +67,11 @@ const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId
|
|
|
67
67
|
: ''};
|
|
68
68
|
};
|
|
69
69
|
`}`;
|
|
70
|
-
const WrapperBordered = styled(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--
|
|
71
|
-
const Head = styled.thead.withConfig({ displayName: "vui--Head", componentId: "vui--
|
|
72
|
-
const Body = styled.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--
|
|
73
|
-
styled.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--
|
|
74
|
-
const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--
|
|
70
|
+
const WrapperBordered = styled(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--wtdkab" }) `border:1px solid ${grey.dark};border-radius:4px;`;
|
|
71
|
+
const Head = styled.thead.withConfig({ displayName: "vui--Head", componentId: "vui--1j5avrf" }) `background-color:white;`;
|
|
72
|
+
const Body = styled.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--n8uysg" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
|
|
73
|
+
styled.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--qckqty" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
|
|
74
|
+
const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--10drh9k" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
|
|
75
75
|
`
|
|
76
76
|
& > td:first-child::before {
|
|
77
77
|
content: "";
|
|
@@ -83,17 +83,17 @@ const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--1
|
|
|
83
83
|
background-color: ${accentColor};
|
|
84
84
|
}
|
|
85
85
|
`}`;
|
|
86
|
-
const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--
|
|
86
|
+
const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--tljl4p" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
|
|
87
87
|
const HeaderCell = styled(Cell).attrs({
|
|
88
88
|
as: 'th',
|
|
89
|
-
}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--
|
|
89
|
+
}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--10p2duv" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
|
|
90
90
|
const alignmentMap = {
|
|
91
91
|
left: 'flex-start',
|
|
92
92
|
center: 'center',
|
|
93
93
|
right: 'flex-end',
|
|
94
94
|
};
|
|
95
|
-
const HeaderCellLayout = styled.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--
|
|
96
|
-
const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--
|
|
95
|
+
const HeaderCellLayout = styled.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--13i0t50" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
|
|
96
|
+
const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--1bp83gy" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
|
|
97
97
|
`
|
|
98
98
|
& ${Body}:nth-child(even) td {
|
|
99
99
|
background-color: ${grey.lightest};
|
|
@@ -108,9 +108,9 @@ const Table = styled.table.withConfig({ displayName: "vui--Table", componentId:
|
|
|
108
108
|
white-space: nowrap;
|
|
109
109
|
}
|
|
110
110
|
`}`;
|
|
111
|
-
const Footer = styled.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--
|
|
112
|
-
const StickyHeaderWrapper = styled.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--
|
|
113
|
-
const FakeHeaderTable = styled(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--
|
|
111
|
+
const Footer = styled.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--44p3gi" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
|
|
112
|
+
const StickyHeaderWrapper = styled.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--wokb93" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
|
|
113
|
+
const FakeHeaderTable = styled(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--6s4d56" }) ``;
|
|
114
114
|
|
|
115
115
|
export { Body, Cell, FakeHeaderTable, Footer, Head, HeaderCell, HeaderCellLayout, Row, StickyHeaderWrapper, Table, TooltipContent, Wrapper, WrapperBordered };
|
|
116
116
|
//# sourceMappingURL=styled.js.map
|