@strapi/design-system 1.4.1 → 1.5.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/AccordionContent.cjs +1 -1
- package/dist/Accordion/AccordionContent.js +17 -37
- package/dist/Accordion/AccordionToggle.cjs +6 -6
- package/dist/Accordion/AccordionToggle.js +75 -96
- package/dist/Alert/Alert.cjs +12 -12
- package/dist/Alert/Alert.js +83 -102
- package/dist/Alert/utils.cjs +1 -1
- package/dist/Alert/utils.js +3 -3
- package/dist/Avatar/Avatar.cjs +4 -4
- package/dist/Avatar/Avatar.js +41 -35
- package/dist/Badge/Badge.cjs +4 -4
- package/dist/Badge/Badge.js +29 -49
- package/dist/BaseButton/BaseButton.cjs +3 -3
- package/dist/BaseButton/BaseButton.js +20 -42
- package/dist/BaseCheckbox/BaseCheckbox.cjs +6 -6
- package/dist/BaseCheckbox/BaseCheckbox.js +35 -55
- package/dist/BaseLink/BaseLink.cjs +2 -2
- package/dist/BaseLink/BaseLink.js +21 -43
- package/dist/BaseRadio/BaseRadio.cjs +8 -8
- package/dist/BaseRadio/BaseRadio.js +31 -51
- package/dist/BaseRadio/RadioGroup.cjs +1 -1
- package/dist/BaseRadio/RadioGroup.js +24 -44
- package/dist/Box/BoxProps.cjs +1 -1
- package/dist/Box/BoxProps.js +10 -19
- package/dist/Breadcrumbs/Breadcrumbs.cjs +4 -4
- package/dist/Breadcrumbs/Breadcrumbs.js +29 -50
- package/dist/Button/Button.cjs +14 -14
- package/dist/Button/Button.js +53 -73
- package/dist/Card/Card.cjs +1 -1
- package/dist/Card/Card.js +17 -37
- package/dist/Card/CardAsset.cjs +4 -4
- package/dist/Card/CardAsset.js +19 -42
- package/dist/Card/CardBadge.cjs +3 -3
- package/dist/Card/CardBadge.js +9 -18
- package/dist/Card/CardBody.cjs +1 -1
- package/dist/Card/CardBody.js +8 -19
- package/dist/Card/CardCheckbox.cjs +1 -1
- package/dist/Card/CardCheckbox.js +12 -22
- package/dist/Card/CardContent.cjs +2 -2
- package/dist/Card/CardContent.js +11 -32
- package/dist/Card/CardHeader.cjs +2 -2
- package/dist/Card/CardHeader.js +9 -19
- package/dist/Card/CardTimer.cjs +2 -2
- package/dist/Card/CardTimer.js +20 -42
- package/dist/Card/CardTitle.cjs +1 -1
- package/dist/Card/CardTitle.js +16 -27
- package/dist/CarouselInput/Carousel.cjs +6 -6
- package/dist/CarouselInput/Carousel.js +77 -107
- package/dist/CarouselInput/CarouselActions.cjs +1 -1
- package/dist/CarouselInput/CarouselActions.js +7 -17
- package/dist/CarouselInput/CarouselImage.cjs +3 -3
- package/dist/CarouselInput/CarouselImage.js +26 -38
- package/dist/CarouselInput/CarouselInput.cjs +1 -1
- package/dist/CarouselInput/CarouselInput.js +49 -83
- package/dist/CarouselInput/CarouselSlide.cjs +2 -2
- package/dist/CarouselInput/CarouselSlide.js +20 -42
- package/dist/Checkbox/Checkbox.cjs +2 -2
- package/dist/Checkbox/Checkbox.js +44 -63
- package/dist/Combobox/Combobox.cjs +1 -1
- package/dist/Combobox/Combobox.js +196 -246
- package/dist/Combobox/ComboboxOption.cjs +1 -1
- package/dist/Combobox/ComboboxOption.js +25 -47
- package/dist/Combobox/utils.cjs +1 -1
- package/dist/Combobox/utils.js +21 -21
- package/dist/DatePicker/DatePicker.cjs +1 -1
- package/dist/DatePicker/DatePicker.js +87 -109
- package/dist/DatePicker/DatePickerCalendar.cjs +1 -1
- package/dist/DatePicker/DatePickerCalendar.js +1 -1
- package/dist/DatePicker/DatePickerTd.cjs +4 -4
- package/dist/DatePicker/DatePickerTd.js +23 -42
- package/dist/DatePicker/DatePickerTh.cjs +3 -3
- package/dist/DatePicker/DatePickerTh.js +23 -44
- package/dist/DatePicker/utils/getYears.cjs +1 -1
- package/dist/DatePicker/utils/getYears.js +6 -7
- package/dist/DateTimePicker/DateTimePicker.cjs +1 -1
- package/dist/DateTimePicker/DateTimePicker.js +92 -126
- package/dist/DateTimePicker/DateTimePickerProps.cjs +1 -1
- package/dist/DateTimePicker/DateTimePickerProps.js +10 -19
- package/dist/Dialog/Dialog.cjs +5 -5
- package/dist/Dialog/Dialog.js +39 -58
- package/dist/Divider/Divider.cjs +4 -2
- package/dist/Divider/Divider.js +17 -38
- package/dist/Field/Field.cjs +1 -1
- package/dist/Field/Field.js +20 -39
- package/dist/Field/FieldAction.cjs +2 -2
- package/dist/Field/FieldAction.js +13 -35
- package/dist/Field/FieldInput.cjs +6 -6
- package/dist/Field/FieldInput.js +47 -67
- package/dist/Field/FieldLabel.cjs +3 -3
- package/dist/Field/FieldLabel.js +26 -46
- package/dist/Flex/FlexProps.cjs +1 -1
- package/dist/Flex/FlexProps.js +10 -19
- package/dist/FocusTrap/FocusTrap.cjs +1 -1
- package/dist/FocusTrap/FocusTrap.js +32 -52
- package/dist/Grid/Grid.cjs +3 -3
- package/dist/Grid/Grid.js +20 -42
- package/dist/Grid/GridItem.cjs +2 -2
- package/dist/Grid/GridItem.js +22 -41
- package/dist/Icon/Icon.cjs +2 -2
- package/dist/Icon/Icon.js +17 -27
- package/dist/IconButton/IconButton.cjs +4 -4
- package/dist/IconButton/IconButton.js +44 -64
- package/dist/KeyboardNavigable/KeyboardNavigable.cjs +1 -1
- package/dist/KeyboardNavigable/KeyboardNavigable.js +38 -58
- package/dist/Layout/HeaderLayout.cjs +2 -2
- package/dist/Layout/HeaderLayout.js +78 -96
- package/dist/Link/Link.cjs +6 -6
- package/dist/Link/Link.js +34 -54
- package/dist/LinkButton/LinkButton.cjs +10 -10
- package/dist/LinkButton/LinkButton.js +47 -69
- package/dist/Loader/Loader.cjs +4 -4
- package/dist/Loader/Loader.js +25 -47
- package/dist/Main/Main.cjs +2 -2
- package/dist/Main/Main.js +15 -35
- package/dist/MainNav/MainNav.cjs +2 -2
- package/dist/MainNav/MainNav.js +19 -40
- package/dist/MainNav/NavCondense.cjs +3 -3
- package/dist/MainNav/NavCondense.js +20 -40
- package/dist/MainNav/NavFooter.cjs +3 -0
- package/dist/MainNav/NavFooter.js +14 -0
- package/dist/MainNav/NavLink.cjs +13 -13
- package/dist/MainNav/NavLink.js +57 -76
- package/dist/MainNav/NavSection.cjs +1 -1
- package/dist/MainNav/NavSection.js +46 -67
- package/dist/MainNav/NavSections.cjs +4 -1
- package/dist/MainNav/NavSections.js +23 -40
- package/dist/MainNav/NavUser.cjs +2 -6
- package/dist/MainNav/NavUser.js +31 -55
- package/dist/MainNav/index.cjs +1 -1
- package/dist/MainNav/index.js +14 -12
- package/dist/ModalLayout/ModalBody.cjs +2 -2
- package/dist/ModalLayout/ModalBody.js +9 -19
- package/dist/ModalLayout/ModalLayout.cjs +3 -3
- package/dist/ModalLayout/ModalLayout.js +30 -52
- package/dist/NumberInput/NumberInput.cjs +6 -6
- package/dist/NumberInput/NumberInput.js +123 -157
- package/dist/Pagination/components.cjs +7 -7
- package/dist/Pagination/components.js +65 -88
- package/dist/Popover/Popover.cjs +3 -3
- package/dist/Popover/Popover.js +65 -91
- package/dist/Portal/Portal.cjs +1 -1
- package/dist/Portal/Portal.js +11 -12
- package/dist/ProgressBar/ProgressBar.cjs +2 -2
- package/dist/ProgressBar/ProgressBar.js +27 -49
- package/dist/Radio/Radio.cjs +2 -2
- package/dist/Radio/Radio.js +19 -40
- package/dist/RawTable/RawCell.cjs +1 -1
- package/dist/RawTable/RawCell.js +69 -89
- package/dist/RawTable/RawTable.cjs +1 -1
- package/dist/RawTable/RawTable.js +46 -66
- package/dist/RawTable/RawTbody.cjs +1 -1
- package/dist/RawTable/RawTbody.js +11 -30
- package/dist/RawTable/RawThead.cjs +1 -1
- package/dist/RawTable/RawThead.js +10 -29
- package/dist/RawTable/RawTr.cjs +1 -1
- package/dist/RawTable/RawTr.js +14 -34
- package/dist/Searchbar/SearchForm.cjs +1 -1
- package/dist/Searchbar/SearchForm.js +5 -16
- package/dist/Searchbar/Searchbar.cjs +7 -7
- package/dist/Searchbar/Searchbar.js +45 -65
- package/dist/Select/MultiSelectNested.cjs +1 -1
- package/dist/Select/MultiSelectNested.js +23 -45
- package/dist/Select/OptGroup.cjs +1 -1
- package/dist/Select/OptGroup.js +15 -35
- package/dist/Select/Option.cjs +7 -7
- package/dist/Select/Option.js +37 -57
- package/dist/Select/Select.cjs +2 -2
- package/dist/Select/Select.js +145 -186
- package/dist/Select/SelectButton.cjs +2 -2
- package/dist/Select/SelectButton.js +33 -53
- package/dist/SimpleMenu/SimpleMenu.cjs +9 -9
- package/dist/SimpleMenu/SimpleMenu.js +137 -163
- package/dist/Stack/Stack.cjs +3 -3
- package/dist/Stack/Stack.js +29 -50
- package/dist/Status/Status.cjs +4 -4
- package/dist/Status/Status.js +30 -50
- package/dist/SubNav/SubNav.cjs +3 -3
- package/dist/SubNav/SubNav.js +15 -37
- package/dist/SubNav/SubNavHeader.cjs +2 -2
- package/dist/SubNav/SubNavHeader.js +38 -39
- package/dist/SubNav/SubNavLink.cjs +6 -6
- package/dist/SubNav/SubNavLink.js +39 -61
- package/dist/SubNav/SubNavSections.cjs +1 -1
- package/dist/SubNav/SubNavSections.js +17 -39
- package/dist/Switch/Switch.cjs +5 -5
- package/dist/Switch/Switch.js +35 -57
- package/dist/Table/Cell.cjs +3 -3
- package/dist/Table/Cell.js +20 -40
- package/dist/Table/TFooter.cjs +3 -3
- package/dist/Table/TFooter.js +28 -50
- package/dist/Table/Table.cjs +5 -5
- package/dist/Table/Table.js +35 -55
- package/dist/Table/Tbody.cjs +2 -2
- package/dist/Table/Tbody.js +8 -17
- package/dist/Table/Thead.cjs +2 -2
- package/dist/Table/Thead.js +8 -17
- package/dist/Table/Tr.cjs +2 -2
- package/dist/Table/Tr.js +8 -17
- package/dist/Tabs/TabGroup.cjs +1 -1
- package/dist/Tabs/TabGroup.js +26 -45
- package/dist/Tabs/TabPanels.cjs +1 -1
- package/dist/Tabs/TabPanels.js +24 -43
- package/dist/Tabs/Tabs.cjs +2 -2
- package/dist/Tabs/Tabs.js +94 -112
- package/dist/Tag/Tag.cjs +4 -4
- package/dist/Tag/Tag.js +27 -50
- package/dist/TextButton/TextButton.cjs +6 -6
- package/dist/TextButton/TextButton.js +39 -59
- package/dist/TextInput/TextInput.cjs +1 -1
- package/dist/TextInput/TextInput.js +49 -69
- package/dist/Textarea/Textarea.cjs +3 -3
- package/dist/Textarea/Textarea.js +43 -63
- package/dist/Textarea/TextareaInput.cjs +4 -4
- package/dist/Textarea/TextareaInput.js +30 -50
- package/dist/TimePicker/TimePicker.cjs +3 -3
- package/dist/TimePicker/TimePicker.js +62 -95
- package/dist/ToggleCheckbox/ToggleCheckbox.cjs +8 -8
- package/dist/ToggleCheckbox/ToggleCheckbox.js +56 -78
- package/dist/ToggleInput/ToggleInput.cjs +3 -3
- package/dist/ToggleInput/ToggleInput.js +65 -97
- package/dist/Tooltip/Tooltip.cjs +2 -2
- package/dist/Tooltip/Tooltip.js +38 -57
- package/dist/Typography/TypographyProps.cjs +1 -1
- package/dist/Typography/TypographyProps.js +13 -22
- package/dist/helpers/getDefaultLocale.cjs +1 -1
- package/dist/helpers/getDefaultLocale.js +1 -1
- package/dist/helpers/handleResponsiveValues.cjs +5 -5
- package/dist/helpers/handleResponsiveValues.js +14 -14
- package/dist/index.cjs +1 -1
- package/dist/index.js +150 -148
- package/dist/themes/darkTheme/index.cjs +1 -1
- package/dist/themes/darkTheme/index.js +8 -18
- package/dist/themes/extendTheme.cjs +4 -4
- package/dist/themes/extendTheme.js +18 -29
- package/dist/themes/lightTheme/index.cjs +1 -1
- package/dist/themes/lightTheme/index.js +8 -18
- package/dist/v2/Breadcrumbs/Breadcrumbs.cjs +2 -2
- package/dist/v2/Breadcrumbs/Breadcrumbs.js +23 -43
- package/dist/v2/Breadcrumbs/Crumb.cjs +1 -1
- package/dist/v2/Breadcrumbs/Crumb.js +22 -44
- package/dist/v2/Breadcrumbs/CrumbLink.cjs +2 -2
- package/dist/v2/Breadcrumbs/CrumbLink.js +14 -35
- package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs +2 -2
- package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js +19 -41
- package/dist/v2/Link/Link.cjs +5 -5
- package/dist/v2/Link/Link.js +42 -64
- package/dist/v2/LinkButton/LinkButton.cjs +10 -10
- package/dist/v2/LinkButton/LinkButton.js +51 -75
- package/dist/v2/MainNav/MainNav.cjs +2 -2
- package/dist/v2/MainNav/MainNav.js +19 -40
- package/dist/v2/MainNav/NavBrand.cjs +3 -3
- package/dist/v2/MainNav/NavBrand.js +57 -78
- package/dist/v2/MainNav/NavCondense.cjs +3 -3
- package/dist/v2/MainNav/NavCondense.js +20 -40
- package/dist/v2/MainNav/NavFooter.cjs +3 -0
- package/dist/v2/MainNav/NavFooter.js +14 -0
- package/dist/v2/MainNav/NavLink.cjs +13 -13
- package/dist/v2/MainNav/NavLink.js +60 -81
- package/dist/v2/MainNav/NavSection.cjs +1 -1
- package/dist/v2/MainNav/NavSection.js +46 -67
- package/dist/v2/MainNav/NavSections.cjs +4 -1
- package/dist/v2/MainNav/NavSections.js +23 -40
- package/dist/v2/MainNav/NavUser.cjs +2 -6
- package/dist/v2/MainNav/NavUser.js +31 -55
- package/dist/v2/MainNav/index.cjs +1 -1
- package/dist/v2/MainNav/index.js +14 -12
- package/dist/v2/Pagination/components.cjs +7 -7
- package/dist/v2/Pagination/components.js +65 -89
- package/dist/v2/SimpleMenu/SimpleMenu.cjs +9 -9
- package/dist/v2/SimpleMenu/SimpleMenu.js +131 -156
- package/dist/v2/SubNav/SubNav.cjs +3 -3
- package/dist/v2/SubNav/SubNav.js +15 -37
- package/dist/v2/SubNav/SubNavHeader.cjs +2 -2
- package/dist/v2/SubNav/SubNavHeader.js +38 -39
- package/dist/v2/SubNav/SubNavLink.cjs +6 -6
- package/dist/v2/SubNav/SubNavLink.js +42 -64
- package/dist/v2/SubNav/SubNavSections.cjs +1 -1
- package/dist/v2/SubNav/SubNavSections.js +17 -39
- package/dist/v2/index.cjs +1 -1
- package/dist/v2/index.js +37 -35
- package/package.json +4 -4
package/dist/Card/CardTimer.js
CHANGED
|
@@ -1,48 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
if (a)
|
|
8
|
-
for (var o of a(e))
|
|
9
|
-
m.call(e, o) && p(r, o, e[o]);
|
|
10
|
-
return r;
|
|
11
|
-
};
|
|
12
|
-
var n = (r, e) => {
|
|
13
|
-
var o = {};
|
|
14
|
-
for (var t in r)
|
|
15
|
-
i.call(r, t) && e.indexOf(t) < 0 && (o[t] = r[t]);
|
|
16
|
-
if (r != null && a)
|
|
17
|
-
for (var t of a(r))
|
|
18
|
-
e.indexOf(t) < 0 && m.call(r, t) && (o[t] = r[t]);
|
|
19
|
-
return o;
|
|
20
|
-
};
|
|
21
|
-
import d from "react";
|
|
22
|
-
import c from "prop-types";
|
|
23
|
-
import u from "styled-components";
|
|
24
|
-
import { Box as f } from "../Box/Box.js";
|
|
25
|
-
import { Typography as y } from "../Typography/Typography.js";
|
|
26
|
-
const T = u(f)`
|
|
1
|
+
import e from "react";
|
|
2
|
+
import t from "prop-types";
|
|
3
|
+
import a from "styled-components";
|
|
4
|
+
import { Box as p } from "../Box/Box.js";
|
|
5
|
+
import { Typography as i } from "../Typography/Typography.js";
|
|
6
|
+
const m = a(p)`
|
|
27
7
|
position: absolute;
|
|
28
8
|
bottom: ${({ theme: r }) => r.spaces[1]};
|
|
29
9
|
right: ${({ theme: r }) => r.spaces[1]};
|
|
30
|
-
`,
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
g.propTypes = {
|
|
44
|
-
children: c.node.isRequired
|
|
10
|
+
`, s = ({ children: r, ...o }) => /* @__PURE__ */ e.createElement(m, {
|
|
11
|
+
padding: 1,
|
|
12
|
+
background: "neutral800",
|
|
13
|
+
color: "neutral0",
|
|
14
|
+
as: "time",
|
|
15
|
+
hasRadius: !0,
|
|
16
|
+
...o
|
|
17
|
+
}, /* @__PURE__ */ e.createElement(i, {
|
|
18
|
+
variant: "pi",
|
|
19
|
+
textColor: "neutral0"
|
|
20
|
+
}, r));
|
|
21
|
+
s.propTypes = {
|
|
22
|
+
children: t.node.isRequired
|
|
45
23
|
};
|
|
46
24
|
export {
|
|
47
|
-
|
|
25
|
+
s as CardTimer
|
|
48
26
|
};
|
package/dist/Card/CardTitle.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),e=require("../Typography/Typography.cjs"),i=require("./CardContext.cjs"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=l(o),n=t=>{const{id:a}=i.useCard();return r.default.createElement(e.Typography,{variant:"pi",id:`${a}-title`,textColor:"neutral800",fontWeight:"bold",as:"div",...t})},u=t=>r.default.createElement(e.Typography,{variant:"pi",...t,textColor:"neutral600",as:"div"});exports.CardSubtitle=u;exports.CardTitle=n;
|
package/dist/Card/CardTitle.js
CHANGED
|
@@ -1,34 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
c.call(t, e) && i(r, e, t[e]);
|
|
8
|
-
if (a)
|
|
9
|
-
for (var e of a(t))
|
|
10
|
-
s.call(t, e) && i(r, e, t[e]);
|
|
11
|
-
return r;
|
|
12
|
-
}, n = (r, t) => p(r, u(t));
|
|
13
|
-
import l from "react";
|
|
14
|
-
import { Typography as d } from "../Typography/Typography.js";
|
|
15
|
-
import { useCard as f } from "./CardContext.js";
|
|
16
|
-
const g = (r) => {
|
|
17
|
-
const { id: t } = f();
|
|
18
|
-
return /* @__PURE__ */ l.createElement(d, o({
|
|
1
|
+
import r from "react";
|
|
2
|
+
import { Typography as e } from "../Typography/Typography.js";
|
|
3
|
+
import { useCard as a } from "./CardContext.js";
|
|
4
|
+
const d = (t) => {
|
|
5
|
+
const { id: o } = a();
|
|
6
|
+
return /* @__PURE__ */ r.createElement(e, {
|
|
19
7
|
variant: "pi",
|
|
20
|
-
id: `${
|
|
8
|
+
id: `${o}-title`,
|
|
21
9
|
textColor: "neutral800",
|
|
22
10
|
fontWeight: "bold",
|
|
23
|
-
as: "div"
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
11
|
+
as: "div",
|
|
12
|
+
...t
|
|
13
|
+
});
|
|
14
|
+
}, m = (t) => /* @__PURE__ */ r.createElement(e, {
|
|
15
|
+
variant: "pi",
|
|
16
|
+
...t,
|
|
28
17
|
textColor: "neutral600",
|
|
29
18
|
as: "div"
|
|
30
|
-
})
|
|
19
|
+
});
|
|
31
20
|
export {
|
|
32
|
-
|
|
33
|
-
|
|
21
|
+
m as CardSubtitle,
|
|
22
|
+
d as CardTitle
|
|
34
23
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),j=require("prop-types"),A=require("styled-components"),L=require("@strapi/icons/ChevronRight"),k=require("@strapi/icons/ChevronLeft"),g=require("../Icon/Icon.cjs"),l=require("../Box/Box.cjs"),B=require("../Typography/Typography.cjs"),K=require("../Flex/Flex.cjs"),w=require("../Tooltip/Tooltip.cjs"),b=require("../helpers/keyboardKeys.cjs"),n=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},t=n(o),e=n(j),d=n(A),I=n(L),D=n(k),F=d.default(l.Box)`
|
|
2
2
|
display: grid;
|
|
3
3
|
grid-template-columns: auto 1fr auto;
|
|
4
4
|
grid-template-areas: 'startAction slides endAction';
|
|
5
|
-
`,
|
|
5
|
+
`,P=d.default(l.Box)`
|
|
6
6
|
grid-area: slides;
|
|
7
|
-
`,
|
|
8
|
-
grid-area: ${({area:
|
|
7
|
+
`,v=d.default.button`
|
|
8
|
+
grid-area: ${({area:r})=>r};
|
|
9
9
|
|
|
10
10
|
&:focus svg path,
|
|
11
11
|
&:hover svg path {
|
|
12
|
-
fill: ${({theme:
|
|
12
|
+
fill: ${({theme:r})=>r.colors.neutral900};
|
|
13
13
|
}
|
|
14
|
-
`,
|
|
14
|
+
`,s=({actions:r,children:m,label:q,nextLabel:R,onNext:u,onPrevious:c,previousLabel:x,secondaryLabel:i,selectedSlide:C,...T})=>{const f=o.useRef(null),p=o.useRef(null),h=o.Children.toArray(m).map((a,_)=>o.cloneElement(a,{selected:_===C})),E=a=>{switch(a.key){case b.KeyboardKeys.RIGHT:{a.preventDefault(),p.current.focus(),u();break}case b.KeyboardKeys.LEFT:{a.preventDefault(),f.current.focus(),c();break}}},y=h.length>1;return t.default.createElement(l.Box,{...T,onKeyDown:E},t.default.createElement(l.Box,{padding:2,borderColor:"neutral200",hasRadius:!0,background:"neutral100"},t.default.createElement(F,{as:"section","aria-roledescription":"carousel","aria-label":q,position:"relative"},y&&t.default.createElement(v,{onClick:c,area:"startAction",ref:f,"aria-label":x,type:"button"},t.default.createElement(g.Icon,{as:D.default,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})),y&&t.default.createElement(v,{onClick:u,area:"endAction",ref:p,"aria-label":R,type:"button"},t.default.createElement(g.Icon,{as:I.default,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})),t.default.createElement(P,{"aria-live":"polite",paddingLeft:2,paddingRight:2,width:"100%",overflow:"hidden"},h),r),i&&t.default.createElement(l.Box,{paddingTop:2,paddingLeft:4,paddingRight:4},t.default.createElement(w.Tooltip,{label:i},t.default.createElement(K.Flex,{justifyContent:"center"},t.default.createElement(B.Typography,{variant:"pi",textColor:"neutral600",ellipsis:!0},i))))))};s.defaultProps={actions:void 0,error:void 0,hint:void 0,required:!1,secondaryLabel:void 0};s.propTypes={actions:e.default.node,children:e.default.node.isRequired,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),label:e.default.string.isRequired,nextLabel:e.default.string.isRequired,onNext:e.default.func.isRequired,onPrevious:e.default.func.isRequired,previousLabel:e.default.string.isRequired,required:e.default.bool,secondaryLabel:e.default.string,selectedSlide:e.default.number.isRequired};exports.Carousel=s;
|
|
@@ -1,161 +1,131 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var x = (e, r) => {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var n in e)
|
|
16
|
-
v.call(e, n) && r.indexOf(n) < 0 && (t[n] = e[n]);
|
|
17
|
-
if (e != null && s)
|
|
18
|
-
for (var n of s(e))
|
|
19
|
-
r.indexOf(n) < 0 && R.call(e, n) && (t[n] = e[n]);
|
|
20
|
-
return t;
|
|
21
|
-
};
|
|
22
|
-
import i, { useRef as q, Children as S, cloneElement as _ } from "react";
|
|
23
|
-
import o from "prop-types";
|
|
24
|
-
import c from "styled-components";
|
|
25
|
-
import $ from "@strapi/icons/ChevronRight";
|
|
26
|
-
import j from "@strapi/icons/ChevronLeft";
|
|
27
|
-
import { Icon as A } from "../Icon/Icon.js";
|
|
28
|
-
import { Box as l } from "../Box/Box.js";
|
|
29
|
-
import { Typography as B } from "../Typography/Typography.js";
|
|
30
|
-
import { Flex as H } from "../Flex/Flex.js";
|
|
31
|
-
import { Tooltip as z } from "../Tooltip/Tooltip.js";
|
|
32
|
-
import { KeyboardKeys as T } from "../helpers/keyboardKeys.js";
|
|
33
|
-
const J = c(l)`
|
|
1
|
+
import r, { useRef as m, Children as T, cloneElement as w } from "react";
|
|
2
|
+
import e from "prop-types";
|
|
3
|
+
import a from "styled-components";
|
|
4
|
+
import k from "@strapi/icons/ChevronRight";
|
|
5
|
+
import L from "@strapi/icons/ChevronLeft";
|
|
6
|
+
import { Icon as f } from "../Icon/Icon.js";
|
|
7
|
+
import { Box as i } from "../Box/Box.js";
|
|
8
|
+
import { Typography as D } from "../Typography/Typography.js";
|
|
9
|
+
import { Flex as K } from "../Flex/Flex.js";
|
|
10
|
+
import { Tooltip as F } from "../Tooltip/Tooltip.js";
|
|
11
|
+
import { KeyboardKeys as h } from "../helpers/keyboardKeys.js";
|
|
12
|
+
const G = a(i)`
|
|
34
13
|
display: grid;
|
|
35
14
|
grid-template-columns: auto 1fr auto;
|
|
36
15
|
grid-template-areas: 'startAction slides endAction';
|
|
37
|
-
`,
|
|
16
|
+
`, I = a(i)`
|
|
38
17
|
grid-area: slides;
|
|
39
|
-
`,
|
|
40
|
-
grid-area: ${({ area:
|
|
18
|
+
`, g = a.button`
|
|
19
|
+
grid-area: ${({ area: t }) => t};
|
|
41
20
|
|
|
42
21
|
&:focus svg path,
|
|
43
22
|
&:hover svg path {
|
|
44
|
-
fill: ${({ theme:
|
|
23
|
+
fill: ${({ theme: t }) => t.colors.neutral900};
|
|
45
24
|
}
|
|
46
|
-
`,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
"previousLabel",
|
|
65
|
-
"secondaryLabel",
|
|
66
|
-
"selectedSlide"
|
|
67
|
-
]);
|
|
68
|
-
const f = q(null), h = q(null), g = S.toArray(r).map(
|
|
69
|
-
(a, G) => _(a, { selected: G === D })
|
|
70
|
-
), F = (a) => {
|
|
71
|
-
switch (a.key) {
|
|
72
|
-
case T.RIGHT: {
|
|
73
|
-
a.preventDefault(), h.current.focus(), p();
|
|
25
|
+
`, y = ({
|
|
26
|
+
actions: t,
|
|
27
|
+
children: b,
|
|
28
|
+
label: v,
|
|
29
|
+
nextLabel: R,
|
|
30
|
+
onNext: l,
|
|
31
|
+
onPrevious: s,
|
|
32
|
+
previousLabel: E,
|
|
33
|
+
secondaryLabel: n,
|
|
34
|
+
selectedSlide: C,
|
|
35
|
+
...x
|
|
36
|
+
}) => {
|
|
37
|
+
const d = m(null), c = m(null), p = T.toArray(b).map(
|
|
38
|
+
(o, A) => w(o, { selected: A === C })
|
|
39
|
+
), q = (o) => {
|
|
40
|
+
switch (o.key) {
|
|
41
|
+
case h.RIGHT: {
|
|
42
|
+
o.preventDefault(), c.current.focus(), l();
|
|
74
43
|
break;
|
|
75
44
|
}
|
|
76
|
-
case
|
|
77
|
-
|
|
45
|
+
case h.LEFT: {
|
|
46
|
+
o.preventDefault(), d.current.focus(), s();
|
|
78
47
|
break;
|
|
79
48
|
}
|
|
80
49
|
}
|
|
81
|
-
},
|
|
82
|
-
return /* @__PURE__ */
|
|
83
|
-
|
|
84
|
-
|
|
50
|
+
}, u = p.length > 1;
|
|
51
|
+
return /* @__PURE__ */ r.createElement(i, {
|
|
52
|
+
...x,
|
|
53
|
+
onKeyDown: q
|
|
54
|
+
}, /* @__PURE__ */ r.createElement(i, {
|
|
85
55
|
padding: 2,
|
|
86
56
|
borderColor: "neutral200",
|
|
87
57
|
hasRadius: !0,
|
|
88
58
|
background: "neutral100"
|
|
89
|
-
}, /* @__PURE__ */
|
|
59
|
+
}, /* @__PURE__ */ r.createElement(G, {
|
|
90
60
|
as: "section",
|
|
91
61
|
"aria-roledescription": "carousel",
|
|
92
|
-
"aria-label":
|
|
62
|
+
"aria-label": v,
|
|
93
63
|
position: "relative"
|
|
94
|
-
},
|
|
95
|
-
onClick:
|
|
64
|
+
}, u && /* @__PURE__ */ r.createElement(g, {
|
|
65
|
+
onClick: s,
|
|
96
66
|
area: "startAction",
|
|
97
|
-
ref:
|
|
98
|
-
"aria-label":
|
|
67
|
+
ref: d,
|
|
68
|
+
"aria-label": E,
|
|
99
69
|
type: "button"
|
|
100
|
-
}, /* @__PURE__ */
|
|
101
|
-
as:
|
|
70
|
+
}, /* @__PURE__ */ r.createElement(f, {
|
|
71
|
+
as: L,
|
|
102
72
|
"aria-hidden": !0,
|
|
103
73
|
width: "6px",
|
|
104
74
|
height: "10px",
|
|
105
75
|
color: "neutral600"
|
|
106
|
-
})),
|
|
107
|
-
onClick:
|
|
76
|
+
})), u && /* @__PURE__ */ r.createElement(g, {
|
|
77
|
+
onClick: l,
|
|
108
78
|
area: "endAction",
|
|
109
|
-
ref:
|
|
110
|
-
"aria-label":
|
|
79
|
+
ref: c,
|
|
80
|
+
"aria-label": R,
|
|
111
81
|
type: "button"
|
|
112
|
-
}, /* @__PURE__ */
|
|
113
|
-
as:
|
|
82
|
+
}, /* @__PURE__ */ r.createElement(f, {
|
|
83
|
+
as: k,
|
|
114
84
|
"aria-hidden": !0,
|
|
115
85
|
width: "6px",
|
|
116
86
|
height: "10px",
|
|
117
87
|
color: "neutral600"
|
|
118
|
-
})), /* @__PURE__ */
|
|
88
|
+
})), /* @__PURE__ */ r.createElement(I, {
|
|
119
89
|
"aria-live": "polite",
|
|
120
90
|
paddingLeft: 2,
|
|
121
91
|
paddingRight: 2,
|
|
122
92
|
width: "100%",
|
|
123
93
|
overflow: "hidden"
|
|
124
|
-
},
|
|
94
|
+
}, p), t), n && /* @__PURE__ */ r.createElement(i, {
|
|
125
95
|
paddingTop: 2,
|
|
126
96
|
paddingLeft: 4,
|
|
127
97
|
paddingRight: 4
|
|
128
|
-
}, /* @__PURE__ */
|
|
129
|
-
label:
|
|
130
|
-
}, /* @__PURE__ */
|
|
98
|
+
}, /* @__PURE__ */ r.createElement(F, {
|
|
99
|
+
label: n
|
|
100
|
+
}, /* @__PURE__ */ r.createElement(K, {
|
|
131
101
|
justifyContent: "center"
|
|
132
|
-
}, /* @__PURE__ */
|
|
102
|
+
}, /* @__PURE__ */ r.createElement(D, {
|
|
133
103
|
variant: "pi",
|
|
134
104
|
textColor: "neutral600",
|
|
135
105
|
ellipsis: !0
|
|
136
|
-
},
|
|
106
|
+
}, n))))));
|
|
137
107
|
};
|
|
138
|
-
|
|
108
|
+
y.defaultProps = {
|
|
139
109
|
actions: void 0,
|
|
140
110
|
error: void 0,
|
|
141
111
|
hint: void 0,
|
|
142
112
|
required: !1,
|
|
143
113
|
secondaryLabel: void 0
|
|
144
114
|
};
|
|
145
|
-
|
|
146
|
-
actions:
|
|
147
|
-
children:
|
|
148
|
-
error:
|
|
149
|
-
hint:
|
|
150
|
-
label:
|
|
151
|
-
nextLabel:
|
|
152
|
-
onNext:
|
|
153
|
-
onPrevious:
|
|
154
|
-
previousLabel:
|
|
155
|
-
required:
|
|
156
|
-
secondaryLabel:
|
|
157
|
-
selectedSlide:
|
|
115
|
+
y.propTypes = {
|
|
116
|
+
actions: e.node,
|
|
117
|
+
children: e.node.isRequired,
|
|
118
|
+
error: e.string,
|
|
119
|
+
hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
|
|
120
|
+
label: e.string.isRequired,
|
|
121
|
+
nextLabel: e.string.isRequired,
|
|
122
|
+
onNext: e.func.isRequired,
|
|
123
|
+
onPrevious: e.func.isRequired,
|
|
124
|
+
previousLabel: e.string.isRequired,
|
|
125
|
+
required: e.bool,
|
|
126
|
+
secondaryLabel: e.string,
|
|
127
|
+
selectedSlide: e.number.isRequired
|
|
158
128
|
};
|
|
159
129
|
export {
|
|
160
|
-
|
|
130
|
+
y as Carousel
|
|
161
131
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),o=require("../Stack/Stack.cjs"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},c=a(e),n=t=>c.default.createElement(o.Stack,{justifyContent:"center",horizontal:!0,spacing:1,position:"absolute",width:"100%",bottom:1,...t});exports.CarouselActions=n;
|
|
@@ -1,24 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var i = (e, t, o) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, n = (e, t) => {
|
|
5
|
-
for (var o in t || (t = {}))
|
|
6
|
-
c.call(t, o) && i(e, o, t[o]);
|
|
7
|
-
if (r)
|
|
8
|
-
for (var o of r(t))
|
|
9
|
-
s.call(t, o) && i(e, o, t[o]);
|
|
10
|
-
return e;
|
|
11
|
-
};
|
|
12
|
-
import m from "react";
|
|
13
|
-
import { Stack as l } from "../Stack/Stack.js";
|
|
14
|
-
const b = (e) => /* @__PURE__ */ m.createElement(l, n({
|
|
1
|
+
import o from "react";
|
|
2
|
+
import { Stack as e } from "../Stack/Stack.js";
|
|
3
|
+
const n = (t) => /* @__PURE__ */ o.createElement(e, {
|
|
15
4
|
justifyContent: "center",
|
|
16
5
|
horizontal: !0,
|
|
17
6
|
spacing: 1,
|
|
18
7
|
position: "absolute",
|
|
19
8
|
width: "100%",
|
|
20
|
-
bottom: 1
|
|
21
|
-
|
|
9
|
+
bottom: 1,
|
|
10
|
+
...t
|
|
11
|
+
});
|
|
22
12
|
export {
|
|
23
|
-
|
|
13
|
+
n as CarouselActions
|
|
24
14
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),n=require("prop-types"),d=require("styled-components"),p=require("../Box/Box.cjs"),f=require("../Tooltip/Tooltip.cjs"),y=require("../Typography/utils.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(a),s=r(n),g=r(d),l=g.default(p.Box)`
|
|
2
2
|
height: 100%;
|
|
3
|
-
${
|
|
4
|
-
`,
|
|
3
|
+
${y.ellipsisStyle({ellipsis:!0})}
|
|
4
|
+
`,o=e=>{const[u,i]=a.useState(!1),c=()=>{i(!0)};return u?t.default.createElement(f.Tooltip,{description:e.alt??""},t.default.createElement(l,{as:"img",...e})):t.default.createElement(l,{as:"img",...e,onError:c})};o.defaultProps={src:void 0,alt:void 0};o.propTypes={alt:s.default.string,src:s.default.string};exports.CarouselImage=o;
|
|
@@ -1,47 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
if (m)
|
|
9
|
-
for (var t of m(r))
|
|
10
|
-
y.call(r, t) && l(e, t, r[t]);
|
|
11
|
-
return e;
|
|
12
|
-
}, a = (e, r) => g(e, u(r));
|
|
13
|
-
import s, { useState as I } from "react";
|
|
14
|
-
import n from "prop-types";
|
|
15
|
-
import h from "styled-components";
|
|
16
|
-
import { Box as S } from "../Box/Box.js";
|
|
17
|
-
import { Tooltip as T } from "../Tooltip/Tooltip.js";
|
|
18
|
-
import { ellipsisStyle as v } from "../Typography/utils.js";
|
|
19
|
-
const p = h(S)`
|
|
1
|
+
import e, { useState as a } from "react";
|
|
2
|
+
import t from "prop-types";
|
|
3
|
+
import n from "styled-components";
|
|
4
|
+
import { Box as p } from "../Box/Box.js";
|
|
5
|
+
import { Tooltip as c } from "../Tooltip/Tooltip.js";
|
|
6
|
+
import { ellipsisStyle as f } from "../Typography/utils.js";
|
|
7
|
+
const o = n(p)`
|
|
20
8
|
height: 100%;
|
|
21
|
-
${
|
|
22
|
-
`,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
t(!0);
|
|
9
|
+
${f({ ellipsis: !0 })}
|
|
10
|
+
`, s = (r) => {
|
|
11
|
+
const [i, m] = a(!1), l = () => {
|
|
12
|
+
m(!0);
|
|
26
13
|
};
|
|
27
|
-
return
|
|
28
|
-
description:
|
|
29
|
-
}, /* @__PURE__ */
|
|
30
|
-
as: "img"
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
14
|
+
return i ? /* @__PURE__ */ e.createElement(c, {
|
|
15
|
+
description: r.alt ?? ""
|
|
16
|
+
}, /* @__PURE__ */ e.createElement(o, {
|
|
17
|
+
as: "img",
|
|
18
|
+
...r
|
|
19
|
+
})) : /* @__PURE__ */ e.createElement(o, {
|
|
20
|
+
as: "img",
|
|
21
|
+
...r,
|
|
22
|
+
onError: l
|
|
23
|
+
});
|
|
36
24
|
};
|
|
37
|
-
|
|
25
|
+
s.defaultProps = {
|
|
38
26
|
src: void 0,
|
|
39
27
|
alt: void 0
|
|
40
28
|
};
|
|
41
|
-
|
|
42
|
-
alt:
|
|
43
|
-
src:
|
|
29
|
+
s.propTypes = {
|
|
30
|
+
alt: t.string,
|
|
31
|
+
src: t.string
|
|
44
32
|
};
|
|
45
33
|
export {
|
|
46
|
-
|
|
34
|
+
s as CarouselImage
|
|
47
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),m=require("prop-types"),E=require("./Carousel.cjs"),R=require("../Field/Field.cjs"),L=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const I=require("../Field/FieldHint.cjs"),S=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const _=require("../Stack/Stack.cjs"),C=require("../helpers/useId.cjs"),u=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=u(v),e=u(m),l=({actions:t,children:a,error:n,hint:s,label:i,labelAction:o,nextLabel:c,onNext:f,onPrevious:p,previousLabel:F,required:q,secondaryLabel:b,selectedSlide:g,id:j,...y})=>{const d=C.useId("carouselinput",j);return r.default.createElement(R.Field,{hint:s,error:n,id:d,required:q},r.default.createElement(_.Stack,{spacing:1},i&&r.default.createElement(L.FieldLabel,{action:o},i),r.default.createElement(E.Carousel,{actions:t,label:i,nextLabel:c,onNext:f,onPrevious:p,previousLabel:F,secondaryLabel:b,selectedSlide:g,id:d,...y},a),r.default.createElement(I.FieldHint,null),r.default.createElement(S.FieldError,null)))};l.defaultProps={actions:void 0,error:void 0,hint:void 0,id:void 0,labelAction:void 0,required:!1,secondaryLabel:void 0};l.propTypes={actions:e.default.node,children:e.default.node.isRequired,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string.isRequired,labelAction:e.default.element,nextLabel:e.default.string.isRequired,onNext:e.default.func.isRequired,onPrevious:e.default.func.isRequired,previousLabel:e.default.string.isRequired,required:e.default.bool,secondaryLabel:e.default.string,selectedSlide:e.default.number.isRequired};exports.CarouselInput=l;
|