@strapi/design-system 1.7.1 → 1.7.2
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/Accordion.cjs +5 -5
- package/dist/Accordion/AccordionGroup.cjs +4 -4
- package/dist/Accordion/AccordionToggle.cjs +6 -6
- package/dist/Alert/Alert.cjs +10 -10
- package/dist/Avatar/Avatar.cjs +5 -5
- package/dist/Avatar/AvatarGroup.cjs +3 -3
- package/dist/Badge/Badge.cjs +4 -4
- package/dist/BaseButton/BaseButton.cjs +2 -2
- package/dist/BaseCheckbox/BaseCheckbox.cjs +2 -2
- package/dist/BaseLink/BaseLink.cjs +1 -1
- package/dist/BaseRadio/BaseRadio.cjs +8 -8
- package/dist/Box/Box.cjs +2 -2
- package/dist/Breadcrumbs/Breadcrumbs.cjs +3 -3
- package/dist/Button/Button.cjs +11 -11
- package/dist/Card/CardAction.cjs +2 -2
- package/dist/Card/CardAsset.cjs +4 -4
- package/dist/Card/CardBadge.cjs +3 -3
- package/dist/Card/CardContent.cjs +2 -2
- package/dist/Card/CardHeader.cjs +2 -2
- package/dist/CarouselInput/Carousel.cjs +6 -6
- package/dist/CarouselInput/CarouselImage.cjs +3 -3
- package/dist/CarouselInput/CarouselInput.cjs +1 -1
- package/dist/CarouselInput/CarouselSlide.cjs +2 -2
- package/dist/Checkbox/Checkbox.cjs +3 -3
- package/dist/Combobox/Combobox.cjs +9 -9
- package/dist/DatePicker/DatePicker.cjs +5 -5
- package/dist/DatePicker/DatePickerTd.cjs +3 -3
- package/dist/DatePicker/DatePickerTh.cjs +4 -4
- package/dist/DatePicker/components.cjs +8 -8
- package/dist/Dialog/Dialog.cjs +6 -6
- package/dist/Dialog/DialogBody.cjs +2 -2
- package/dist/Dialog/DialogFooter.cjs +3 -3
- package/dist/DismissibleLayer/index.cjs +1 -1
- package/dist/Divider/Divider.cjs +2 -2
- package/dist/EmptyStateLayout/EmptyStateLayout.cjs +3 -3
- package/dist/Field/FieldAction.cjs +2 -2
- package/dist/Field/FieldInput.cjs +7 -7
- package/dist/Field/FieldLabel.cjs +4 -4
- package/dist/Flex/Flex.cjs +3 -3
- package/dist/Grid/Grid.cjs +3 -3
- package/dist/Grid/GridItem.cjs +2 -2
- package/dist/Icon/Icon.cjs +4 -4
- package/dist/IconButton/IconButton.cjs +4 -4
- package/dist/JSONInput/JSONInputContainer.cjs +3 -3
- package/dist/Layout/ActionLayout.cjs +3 -3
- package/dist/Layout/ContentLayout.cjs +1 -1
- package/dist/Layout/GridLayout.cjs +3 -3
- package/dist/Layout/HeaderLayout.cjs +4 -4
- package/dist/Layout/Layout.cjs +3 -3
- package/dist/Layout/TwoColsLayout.cjs +1 -1
- package/dist/Link/Link.cjs +5 -5
- package/dist/LinkButton/LinkButton.cjs +7 -7
- package/dist/Loader/Loader.cjs +5 -5
- package/dist/Main/Main.cjs +2 -2
- package/dist/Main/SkipToContent.cjs +2 -2
- package/dist/MainNav/MainNav.cjs +2 -2
- package/dist/MainNav/NavBrand.cjs +6 -6
- package/dist/MainNav/NavCondense.cjs +3 -3
- package/dist/MainNav/NavFooter.cjs +1 -1
- package/dist/MainNav/NavLink.cjs +10 -10
- package/dist/MainNav/NavSection.cjs +1 -1
- package/dist/MainNav/NavSections.cjs +2 -2
- package/dist/MainNav/NavUser.cjs +3 -3
- package/dist/ModalLayout/ModalBody.cjs +2 -2
- package/dist/ModalLayout/ModalFooter.cjs +3 -3
- package/dist/ModalLayout/ModalHeader.cjs +2 -2
- package/dist/ModalLayout/ModalLayout.cjs +4 -4
- package/dist/NumberInput/NumberInput.cjs +6 -6
- package/dist/Pagination/Pagination.cjs +2 -2
- package/dist/Pagination/components.cjs +7 -7
- package/dist/Popover/Popover.cjs +3 -3
- package/dist/Portal/Portal.cjs +1 -1
- package/dist/ProgressBar/ProgressBar.cjs +2 -2
- package/dist/Radio/Radio.cjs +2 -2
- package/dist/Searchbar/Searchbar.cjs +7 -7
- package/dist/Select/MultiSelect.cjs +7 -7
- package/dist/Select/MultiSelectNested.cjs +3 -3
- package/dist/Select/Select.cjs +2 -2
- package/dist/Select/SelectList.cjs +2 -2
- package/dist/Select/SelectParts.cjs +10 -10
- package/dist/Select/SingleSelect.cjs +1 -1
- package/dist/SimpleMenu/SimpleMenu.cjs +11 -11
- package/dist/Stack/Stack.cjs +5 -5
- package/dist/Status/Status.cjs +7 -7
- package/dist/SubNav/SubNav.cjs +5 -5
- package/dist/SubNav/SubNavHeader.cjs +3 -3
- package/dist/SubNav/SubNavLink.cjs +5 -5
- package/dist/SubNav/SubNavLinkSection.cjs +6 -6
- package/dist/SubNav/SubNavSection.cjs +3 -3
- package/dist/SubNav/SubNavSectionLabel.cjs +4 -4
- package/dist/SubNav/SubNavSections.cjs +1 -1
- package/dist/Switch/Switch.cjs +5 -5
- package/dist/Table/Cell.cjs +3 -3
- package/dist/Table/TFooter.cjs +5 -5
- package/dist/Table/Table.cjs +5 -5
- package/dist/Table/Tbody.cjs +2 -2
- package/dist/Table/Thead.cjs +2 -2
- package/dist/Table/Tr.cjs +2 -2
- package/dist/Tabs/TabGroup.cjs +1 -1
- package/dist/Tabs/TabPanels.cjs +1 -1
- package/dist/Tabs/Tabs.cjs +2 -2
- package/dist/Tabs/components.cjs +17 -17
- package/dist/Tag/Tag.cjs +4 -4
- package/dist/TextButton/TextButton.cjs +6 -6
- package/dist/Textarea/Textarea.cjs +2 -2
- package/dist/Textarea/TextareaInput.cjs +4 -4
- package/dist/TimePicker/TimePicker.cjs +3 -3
- package/dist/ToggleCheckbox/ToggleCheckbox.cjs +8 -8
- package/dist/ToggleInput/ToggleInput.cjs +3 -3
- package/dist/Tooltip/Tooltip.cjs +2 -2
- package/dist/Typography/Typography.cjs +8 -8
- package/dist/VisuallyHidden/VisuallyHidden.cjs +2 -2
- package/dist/hooks/useComposeRefs.cjs +1 -1
- package/dist/hooks/useControllableState.cjs +1 -1
- package/dist/hooks/useId.cjs +1 -1
- package/dist/v2/Breadcrumbs/Breadcrumbs.cjs +3 -3
- package/dist/v2/Breadcrumbs/Crumb.cjs +1 -1
- package/dist/v2/Breadcrumbs/CrumbLink.cjs +2 -2
- package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs +2 -2
- package/dist/v2/Link/Link.cjs +3 -3
- package/dist/v2/LinkButton/LinkButton.cjs +7 -7
- package/dist/v2/MainNav/MainNav.cjs +2 -2
- package/dist/v2/MainNav/NavBrand.cjs +6 -6
- package/dist/v2/MainNav/NavCondense.cjs +3 -3
- package/dist/v2/MainNav/NavFooter.cjs +1 -1
- package/dist/v2/MainNav/NavLink.cjs +10 -10
- package/dist/v2/MainNav/NavSection.cjs +1 -1
- package/dist/v2/MainNav/NavSections.cjs +2 -2
- package/dist/v2/MainNav/NavUser.cjs +3 -3
- package/dist/v2/Pagination/Pagination.cjs +2 -2
- package/dist/v2/Pagination/components.cjs +7 -7
- package/dist/v2/SimpleMenu/Menu.cjs +13 -13
- package/dist/v2/SubNav/SubNav.cjs +5 -5
- package/dist/v2/SubNav/SubNavHeader.cjs +3 -3
- package/dist/v2/SubNav/SubNavLink.cjs +4 -4
- package/dist/v2/SubNav/SubNavLinkSection.cjs +6 -6
- package/dist/v2/SubNav/SubNavSection.cjs +3 -3
- package/dist/v2/SubNav/SubNavSectionLabel.cjs +4 -4
- package/dist/v2/SubNav/SubNavSections.cjs +1 -1
- package/package.json +4 -4
package/dist/Tabs/Tabs.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),I=require("react"),q=require("prop-types"),j=require("styled-components"),g=require("./components.cjs"),w=require("./TabsContext.cjs"),R=require("./useTabsFocus.cjs"),T=require("../helpers/keyboardKeys.cjs"),C=require("../Typography/Typography.cjs"),D=r=>r&&r.__esModule?r:{default:r},i=D(q),P=D(j),_=P.default.button`
|
|
2
2
|
&[aria-disabled='true'] {
|
|
3
3
|
cursor: not-allowed;
|
|
4
4
|
}
|
|
5
|
-
`,
|
|
5
|
+
`,k=({children:r,...u})=>{const{id:h,selectedTabIndex:b,selectTabIndex:o,label:p,variant:f,onTabChange:m}=w.useTabs(),y=R.useTabsFocus(b,m),a=I.Children.toArray(r).map((t,d)=>I.cloneElement(t,{id:`${h}-${d}`,index:d,selectedTabIndex:b,onTabClick:()=>o(d),variant:f})),x=t=>{if(!a.every(n=>n.props.disabled))switch(t.key){case T.KeyboardKeys.RIGHT:{const n=b+1,e=s=>a[s].props.disabled?s===a.length-1?e(0):e(s+1):s,c=e(n>=a.length?0:n);o(c);break}case T.KeyboardKeys.LEFT:{const n=b-1,e=s=>a[s].props.disabled?e(s===0?a.length-1:s-1):s,c=e(n<0?a.length-1:n);o(c);break}case T.KeyboardKeys.HOME:{const n=a.findIndex(e=>!e.props.disabled);o(n);break}case T.KeyboardKeys.END:{const e=a.map((c,s)=>({isDisabled:c.props.disabled,index:s})).reverse().find(({isDisabled:c})=>!c);e&&o(e.index);break}}};return f==="simple"?l.jsx("div",{ref:y,role:"tablist","aria-label":p,onKeyDown:x,...u,children:a}):l.jsx(g.DefaultTabsRow,{ref:y,role:"tablist",alignItems:"flex-end","aria-label":p,onKeyDown:x,...u,children:a})};k.propTypes={children:i.default.node.isRequired};const v=({disabled:r,id:u,children:h,variant:b,hasError:o,index:p,selectedTabIndex:f,onTabClick:m,...y})=>{const a=`${u}-tab`,x=`${u}-tabpanel`,t=p===f,d=()=>{r||m()};if(b==="simple"){let e;return o?e="danger600":t?e="primary600":e="neutral600",l.jsx(_,{id:a,role:"tab","aria-controls":t?x:void 0,tabIndex:t?0:-1,"aria-selected":t,type:"button",onClick:d,"aria-disabled":r,...y,children:l.jsx(g.SimpleTabBox,{padding:4,selected:t,hasError:o,children:l.jsx(C.Typography,{variant:"sigma",textColor:e,children:h})})})}o&&console.warn('The "hasError" prop is only available for the "simple" variant.');const n=f-1===p;return l.jsx(g.DefaultTabButton,{id:a,role:"tab",type:"button","aria-controls":t?x:void 0,tabIndex:t?0:-1,"aria-selected":t,onClick:d,"aria-disabled":r,showRightBorder:n,...y,children:l.jsx(g.DefaultTabBox,{padding:t?4:3,background:t?"neutral0":"neutral100",selected:t,children:l.jsx(C.Typography,{fontWeight:"bold",textColor:t?"primary700":"neutral600",children:h})})})};v.defaultProps={disabled:!1,hasError:!1,id:void 0,index:void 0,onTabClick:void 0,selectedTabIndex:void 0,variant:void 0};v.propTypes={children:i.default.node.isRequired,disabled:i.default.bool,hasError:i.default.bool,id:i.default.string,index:i.default.number,onTabClick:i.default.func,selectedTabIndex:i.default.number,variant:i.default.oneOf(["simple"])};exports.Tab=v;exports.Tabs=k;
|
package/dist/Tabs/components.cjs
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),l=require("../Box/Box.cjs"),u=require("../Flex/Flex.cjs"),s=o=>o&&o.__esModule?o:{default:o},a=s(n),i=a.default(l.Box)`
|
|
2
2
|
border-bottom: 2px solid
|
|
3
|
-
${({theme:
|
|
4
|
-
`,
|
|
5
|
-
border-bottom: 1px solid ${({theme:
|
|
6
|
-
`,t=a.button`
|
|
3
|
+
${({theme:o,selected:e,hasError:d})=>e?d?o.colors.danger600:o.colors.primary600:"transparent"};
|
|
4
|
+
`,r=a.default(l.Box)`
|
|
5
|
+
border-bottom: 1px solid ${({theme:o,selected:e})=>e?o.colors.neutral0:o.colors.neutral150};
|
|
6
|
+
`,t=a.default.button`
|
|
7
7
|
border: none;
|
|
8
8
|
background: transparent;
|
|
9
9
|
padding: 0;
|
|
10
10
|
|
|
11
|
-
& + & > ${
|
|
12
|
-
border-left: 1px solid ${({theme:
|
|
11
|
+
& + & > ${r} {
|
|
12
|
+
border-left: 1px solid ${({theme:o})=>o.colors.neutral150};
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
${
|
|
16
|
-
border-right: ${({theme:
|
|
15
|
+
${r} {
|
|
16
|
+
border-right: ${({theme:o,showRightBorder:e})=>e?`1px solid ${o.colors.neutral150}`:"none"};
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
// Hack preventing the outline from being overflow by the following tab
|
|
@@ -22,22 +22,22 @@
|
|
|
22
22
|
&[aria-disabled='true'] {
|
|
23
23
|
cursor: not-allowed;
|
|
24
24
|
}
|
|
25
|
-
`,
|
|
25
|
+
`,b=a.default(u.Flex)`
|
|
26
26
|
& > * {
|
|
27
27
|
flex: 1;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
& ${t}:first-of-type ${
|
|
31
|
-
border-radius: ${({theme:
|
|
30
|
+
& ${t}:first-of-type ${r} {
|
|
31
|
+
border-radius: ${({theme:o})=>`${o.borderRadius} 0 0 0`};
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
& ${t}:last-of-type ${
|
|
35
|
-
border-radius: ${({theme:
|
|
34
|
+
& ${t}:last-of-type ${r} {
|
|
35
|
+
border-radius: ${({theme:o})=>`0 ${o.borderRadius} 0 0`};
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
& ${t}[aria-selected="true"] ${
|
|
39
|
-
border-radius: ${({theme:
|
|
38
|
+
& ${t}[aria-selected="true"] ${r} {
|
|
39
|
+
border-radius: ${({theme:o})=>`${o.borderRadius} ${o.borderRadius} 0 0`};
|
|
40
40
|
border-left: none;
|
|
41
41
|
border-right: none;
|
|
42
42
|
}
|
|
43
|
-
`;exports.DefaultTabBox=
|
|
43
|
+
`;exports.DefaultTabBox=r;exports.DefaultTabButton=t;exports.DefaultTabsRow=b;exports.SimpleTabBox=i;
|
package/dist/Tag/Tag.cjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("styled-components"),u=require("../Flex/Flex.cjs"),c=require("../Typography/Typography.cjs"),p=r=>r&&r.__esModule?r:{default:r},i=p(d),g=({children:r,icon:e,disabled:t=!1,onClick:a,...l})=>{const n=s=>{t||!a||a(s)};return o.jsxs(h,{as:"button",background:t?"neutral200":"primary100",color:t?"neutral700":"primary600",paddingLeft:3,paddingRight:3,onClick:n,"aria-disabled":t,disabled:t,borderWidth:"1px",borderStyle:"solid",borderColor:t?"neutral300":"primary200",hasRadius:!0,height:`${32/16}rem`,gap:2,...l,children:[o.jsx(y,{$disabled:t,variant:"pi",fontWeight:"bold",as:"span",children:r}),e]})},h=i.default(u.Flex)`
|
|
2
2
|
& > svg {
|
|
3
3
|
height: ${8/16}rem;
|
|
4
4
|
width: ${8/16}rem;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
& > svg path {
|
|
8
|
-
fill: ${({theme:r,...
|
|
8
|
+
fill: ${({theme:r,...e})=>e["aria-disabled"]?r.colors.neutral600:r.colors.primary600};
|
|
9
9
|
}
|
|
10
|
-
`,
|
|
10
|
+
`,y=i.default(c.Typography)`
|
|
11
11
|
color: inherit;
|
|
12
|
-
border-right: 1px solid ${({theme:r,$disabled:
|
|
12
|
+
border-right: 1px solid ${({theme:r,$disabled:e})=>e?r.colors.neutral300:r.colors.primary200};
|
|
13
13
|
padding-right: ${({theme:r})=>r.spaces[2]};
|
|
14
14
|
`;exports.Tag=g;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),y=require("react"),g=require("@strapi/icons"),l=require("styled-components"),b=require("../themes/utils.cjs"),m=require("../Flex/Flex.cjs"),x=require("../Typography/Typography.cjs"),h=e=>e&&e.__esModule?e:{default:e};function j(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const _=j(y),u=h(l),T=l.keyframes`
|
|
2
2
|
from {
|
|
3
3
|
transform: rotate(0deg);
|
|
4
4
|
}
|
|
5
5
|
to {
|
|
6
6
|
transform: rotate(359deg);
|
|
7
7
|
}
|
|
8
|
-
`,
|
|
9
|
-
animation: ${
|
|
8
|
+
`,q=u.default.div`
|
|
9
|
+
animation: ${T} 2s infinite linear;
|
|
10
10
|
will-change: transform;
|
|
11
|
-
`,
|
|
11
|
+
`,v=u.default(m.Flex)`
|
|
12
12
|
border: none;
|
|
13
13
|
|
|
14
14
|
&[aria-disabled='true'] {
|
|
@@ -22,5 +22,5 @@
|
|
|
22
22
|
fill: ${({theme:e})=>e.colors.primary600};
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
${
|
|
26
|
-
`,
|
|
25
|
+
${b.buttonFocusStyle}
|
|
26
|
+
`,c=_.forwardRef(({children:e,startIcon:r,endIcon:t,onClick:n,disabled:a=!1,loading:s=!1,...d},f)=>{const p=n&&!a?n:void 0,i=a||s;return o.jsxs(v,{ref:f,"aria-disabled":i,onClick:p,as:"button",type:"button",background:"transparent",gap:2,...d,children:[s?o.jsx(q,{"aria-hidden":!0,children:o.jsx(g.Loader,{})}):r,o.jsx(x.Typography,{variant:"pi",textColor:i?"neutral600":"primary600",children:e}),t]})});c.displayName="TextButton";exports.TextButton=c;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("react"),q=require("prop-types"),m=require("styled-components"),T=require("./TextareaInput.cjs"),v=require("../hooks/useId.cjs"),y=require("../Field/Field.cjs"),d=require("../Flex/Flex.cjs"),F=require("../Field/FieldLabel.cjs"),b=require("../Field/FieldHint.cjs"),j=require("../Field/FieldError.cjs"),l=t=>t&&t.__esModule?t:{default:t},_=l(g),e=l(q),I=l(m),O=I.default.div`
|
|
2
2
|
& textarea {
|
|
3
3
|
// TODO: remove when we'll have fonts in the theme
|
|
4
4
|
height: ${80/16}rem;
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
color: ${({theme:t})=>t.colors.neutral500};
|
|
13
13
|
opacity: 1;
|
|
14
14
|
}
|
|
15
|
-
`,i=
|
|
15
|
+
`,i=_.default.forwardRef(({name:t,hint:n,error:o,label:a,children:s,labelAction:u,id:c,required:f,...h},x)=>{const p=v.useId(c);return r.jsx(O,{children:r.jsx(y.Field,{name:t,hint:n,error:o,id:p,required:f,children:r.jsxs(d.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[a&&r.jsx(d.Flex,{children:r.jsx(F.FieldLabel,{action:u,children:a})}),r.jsx(T.TextareaInput,{ref:x,as:"textarea",value:s,...h}),r.jsx(b.FieldHint,{}),r.jsx(j.FieldError,{})]})})})});i.displayName="Textarea";i.defaultProps={"aria-label":void 0,label:void 0,labelAction:void 0,error:void 0,hint:void 0,id:void 0,children:"",required:!1};i.propTypes={"aria-label":e.default.string,children:e.default.string,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,labelAction:e.default.element,name:e.default.string.isRequired,required:e.default.bool};exports.Textarea=i;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),$=require("react"),b=require("prop-types"),y=require("styled-components"),g=require("../themes/utils.cjs"),x=require("../Field/FieldContext.cjs"),l=e=>e&&e.__esModule?e:{default:e},T=l(b),d=l(y),q=d.default.div`
|
|
2
2
|
border: 1px solid ${({theme:e,hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
|
|
3
3
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
4
4
|
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
padding-bottom: ${({theme:e})=>`${e.spaces[3]}`};
|
|
9
9
|
|
|
10
10
|
background: ${({theme:e,disabled:r})=>r?e.colors.neutral150:e.colors.neutral0};
|
|
11
|
-
${
|
|
12
|
-
`,
|
|
11
|
+
${g.inputFocusStyle()}
|
|
12
|
+
`,h=d.default.textarea`
|
|
13
13
|
display: block;
|
|
14
14
|
width: 100%;
|
|
15
15
|
font-weight: 400;
|
|
@@ -27,4 +27,4 @@
|
|
|
27
27
|
&:focus-within {
|
|
28
28
|
outline: none;
|
|
29
29
|
}
|
|
30
|
-
`,o=$.forwardRef(({disabled:e,...r},
|
|
30
|
+
`,o=$.forwardRef(({disabled:e,...r},u)=>{const{id:t,error:n,hint:c,name:p,required:f}=x.useField();let a;n?a=`${t}-error`:c&&(a=`${t}-hint`);const s=!!n;return i.jsx(q,{hasError:s,disabled:e,children:i.jsx(h,{id:t,name:p,ref:u,"aria-describedby":a,"aria-invalid":s,disabled:e,hasError:s,"aria-required":f,...r})})});o.displayName="TextareaInput";o.defaultProps={disabled:!1};o.propTypes={disabled:T.default.bool};exports.TextareaInput=o;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime")
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),$=require("@strapi/icons"),b=require("styled-components"),j=require("../hooks/useId.cjs"),d=require("../Select/SingleSelect.cjs"),q=require("../Flex/Flex.cjs"),I=t=>t&&t.__esModule?t:{default:t},_=I(b),v=({id:t,value:c,step:h=15,onChange:u,...p})=>{const g=j.useId(t),m=24,s=[];let n=0;for(let e=0;e<m;e++)for(n=0;n<60;)s.push(`${e<10?`0${e}`:e}:${n<10?`0${n}`:n}`),n+=h;const f=()=>{const[e,a]=c?.split(":")??[],x=s.reduce((r,o)=>{const[l]=o.split(":");return Math.abs(l-e)<Math.abs(r-e)?l:r},s[0].split(":")[0]),M=s.reduce((r,o)=>{const l=o.split(":")[1];return Math.abs(l-a)<Math.abs(r-a)?l:r},s[0].split(":")[1]);return`${x}:${M}`},S=e=>{u&&u(e.toString())};return i.jsx(d.SingleSelect,{id:g,placeholder:"--:--",value:c?f():void 0,startIcon:i.jsx(y,{as:"span",children:i.jsx($.Clock,{})}),onChange:S,...p,children:s.map(e=>i.jsx(d.SingleSelectOption,{value:e,children:e},e))})},y=_.default(q.Flex)`
|
|
2
2
|
& > svg {
|
|
3
3
|
height: 1rem;
|
|
4
4
|
width: 1rem;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
& > svg path {
|
|
8
|
-
fill: ${({theme:
|
|
8
|
+
fill: ${({theme:t})=>t.colors.neutral500};
|
|
9
9
|
}
|
|
10
|
-
`;exports.TimePicker=
|
|
10
|
+
`;exports.TimePicker=v;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),$=require("react"),_=require("prop-types"),L=require("styled-components"),m=require("../themes/sizes.cjs"),z=require("../themes/utils.cjs"),S=require("../Box/Box.cjs"),F=require("../Flex/Flex.cjs"),W=require("../Field/FieldContext.cjs"),B=require("../VisuallyHidden/VisuallyHidden.cjs"),h=require("../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},M=c($),n=c(_),i=c(L),P=i.default.label`
|
|
2
2
|
position: relative;
|
|
3
3
|
display: inline-block;
|
|
4
4
|
z-index: 0;
|
|
5
5
|
width: 100%;
|
|
6
|
-
`,
|
|
6
|
+
`,I=i.default(S.Box)`
|
|
7
7
|
cursor: ${({disabled:e})=>e?"not-allowed":void 0};
|
|
8
8
|
// Masks the background of each value
|
|
9
9
|
overflow: hidden;
|
|
10
10
|
flex-wrap: wrap;
|
|
11
11
|
|
|
12
|
-
${
|
|
13
|
-
`,g=
|
|
14
|
-
background-color: ${({theme:e,checked:
|
|
12
|
+
${z.inputFocusStyle()}
|
|
13
|
+
`,g=i.default(F.Flex).attrs({hasRadius:!0})`
|
|
14
|
+
background-color: ${({theme:e,checked:l,disabled:a})=>l?a?e.colors.neutral200:e.colors.neutral0:"transparent"};
|
|
15
15
|
border: 1px solid
|
|
16
|
-
${({theme:e,checked:
|
|
16
|
+
${({theme:e,checked:l,disabled:a})=>l&&l!==null?a?e.colors.neutral300:e.colors.neutral200:a?e.colors.neutral150:e.colors.neutral100};
|
|
17
17
|
position: relative;
|
|
18
18
|
user-select: none;
|
|
19
19
|
z-index: 2;
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
*/
|
|
26
26
|
padding-top: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
|
|
27
27
|
padding-bottom: ${({size:e})=>`${e==="S"?"2px":"6px"}`};
|
|
28
|
-
`,
|
|
28
|
+
`,O=i.default.input`
|
|
29
29
|
height: 100%;
|
|
30
30
|
left: 0;
|
|
31
31
|
opacity: 0;
|
|
@@ -33,4 +33,4 @@
|
|
|
33
33
|
top: 0;
|
|
34
34
|
z-index: 1;
|
|
35
35
|
width: 100%;
|
|
36
|
-
`,s=
|
|
36
|
+
`,s=M.default.forwardRef(({size:e,onLabel:l,offLabel:a,children:x,checked:t,disabled:r,onChange:b,...y},C)=>{const{error:q,hint:w,id:p,name:j,required:T}=W.useField(),f="neutral600";let v=!t&&t!==null?"danger700":f,R=t?"primary600":f;const k=d=>{r||b(d)};let u;return q?u=`${p}-error`:w&&(u=`${p}-hint`),o.jsxs(P,{children:[o.jsx(B.VisuallyHidden,{children:x}),o.jsxs(I,{hasRadius:!0,disabled:r,padding:1,display:"flex",background:r?"neutral150":"neutral100",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral200",children:[o.jsx(g,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:t===null?!1:!t,disabled:r,children:o.jsx(h.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:r?"neutral700":v,children:a})}),o.jsx(g,{size:e,paddingLeft:3,paddingRight:3,justifyContent:"center",alignItems:"center","aria-hidden":!0,checked:t===null?!1:t,disabled:r,children:o.jsx(h.Typography,{variant:"pi",fontWeight:"bold",textTransform:"uppercase",textColor:r?"neutral700":R,children:l})}),o.jsx(O,{type:"checkbox","aria-disabled":r,"aria-describedby":u,onChange:d=>k(d),name:j,ref:C,"aria-required":T,...y,checked:!(t===null||!t)})]})]})});s.displayName="ToggleCheckbox";s.defaultProps={disabled:!1,checked:!1,onChange:void 0,size:"M"};s.propTypes={checked:n.default.bool,children:n.default.string.isRequired,disabled:n.default.bool,offLabel:n.default.string.isRequired,onChange:n.default.func,onLabel:n.default.string.isRequired,size:n.default.oneOf(Object.keys(m.sizes.input))};exports.ToggleCheckbox=s;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const T=require("prop-types"),j=require("styled-components"),y=require("../hooks/useId.cjs"),m=require("../themes/sizes.cjs"),v=require("../ToggleCheckbox/ToggleCheckbox.cjs"),I=require("../Field/Field.cjs"),_=require("../TextButton/TextButton.cjs"),u=require("../Flex/Flex.cjs"),k=require("../Field/FieldLabel.cjs"),C=require("../Field/FieldHint.cjs"),O=require("../Field/FieldError.cjs"),a=l=>l&&l.__esModule?l:{default:l},e=a(T),c=a(j),z=c.default(I.Field)`
|
|
2
2
|
max-width: 320px;
|
|
3
|
-
`,
|
|
3
|
+
`,P=c.default(_.TextButton)`
|
|
4
4
|
align-self: flex-end;
|
|
5
5
|
margin-left: auto;
|
|
6
|
-
`,
|
|
6
|
+
`,r=({disabled:l,size:f,error:g,hint:p,label:i,name:x,labelAction:b,required:q,id:h,onClear:d,clearLabel:n,checked:o,...F})=>{const s=y.useId(h);return t.jsx(z,{name:x,hint:p,error:g,id:s,required:q,children:t.jsxs(u.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsxs(u.Flex,{children:[t.jsx(k.FieldLabel,{action:b,children:i}),n&&d&&o!==null&&!l&&t.jsx(P,{onClick:d,children:n})]}),t.jsx(v.ToggleCheckbox,{id:s,size:f,checked:o,disabled:l,...F,children:i}),t.jsx(C.FieldHint,{}),t.jsx(O.FieldError,{})]})})};r.displayName="ToggleInput";r.defaultProps={checked:!1,clearLabel:void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:"",labelAction:void 0,name:"",onClear:void 0,required:!1,size:"M"};r.propTypes={checked:e.default.bool,clearLabel:e.default.string,disabled:e.default.bool,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,labelAction:e.default.node,name:e.default.string,onClear:e.default.func,required:e.default.bool,size:e.default.oneOf(Object.keys(m.sizes.input))};exports.ToggleInput=r;
|
package/dist/Tooltip/Tooltip.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("react"),x=require("styled-components"),j=require("./hooks/useTooltipHandlers.cjs"),h=require("./hooks/useTooltipLayout.cjs"),l=require("../hooks/useId.cjs"),T=require("../Portal/Portal.cjs"),q=require("../Box/Box.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("react"),x=require("styled-components"),j=require("./hooks/useTooltipHandlers.cjs"),h=require("./hooks/useTooltipLayout.cjs"),l=require("../hooks/useId.cjs"),T=require("../Portal/Portal.cjs"),q=require("../Box/Box.cjs"),_=require("../VisuallyHidden/VisuallyHidden.cjs"),m=require("../Typography/Typography.cjs"),v=e=>e&&e.__esModule?e:{default:e};function I(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const O=I(g),R=v(x),H=R.default(q.Box)`
|
|
2
2
|
/* z-index exist because of its position inside Modals */
|
|
3
3
|
z-index: 4;
|
|
4
4
|
display: ${({visible:e})=>e?"revert":"none"};
|
|
5
|
-
`,
|
|
5
|
+
`,M=({children:e,label:r,description:t,delay:n=500,position:d="top",id:u,...a})=>{const i=l.useId(u),c=l.useId(),{visible:s,...p}=j.useTooltipHandlers(n),{tooltipWrapperRef:f,toggleSourceRef:b}=h.useTooltipLayout(s,d),y=O.cloneElement(e,{tabIndex:0,"aria-labelledby":r?i:void 0,"aria-describedby":t?i:void 0,...p});return o.jsxs(o.Fragment,{children:[o.jsx(T.Portal,{children:o.jsxs(H,{id:i,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:f,visible:s,position:"absolute",...a,children:[s&&o.jsx(_.VisuallyHidden,{id:c,children:t}),o.jsx(m.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0",children:r||t})]})}),o.jsx("span",{ref:b,children:y})]})};exports.Tooltip=M;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
-
${
|
|
3
|
-
${
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),o=require("./utils.cjs"),r=require("../helpers/theme.cjs"),i=e=>e&&e.__esModule?e:{default:e},a=i(n),s={fontSize:!0,fontWeight:!0},l=a.default.span.withConfig({shouldForwardProp:(e,t)=>!s[e]&&t(e)})`
|
|
2
|
+
${o.variantStyle}
|
|
3
|
+
${o.ellipsisStyle}
|
|
4
4
|
|
|
5
5
|
// These properties need to come after {variantStyle}, because they might
|
|
6
6
|
// overwrite a variant attribute
|
|
7
|
-
font-weight: ${({theme:e,fontWeight:t})=>
|
|
8
|
-
font-size: ${({theme:e,fontSize:t})=>
|
|
9
|
-
line-height: ${({theme:e,lineHeight:t})=>
|
|
10
|
-
color: ${
|
|
7
|
+
font-weight: ${({theme:e,fontWeight:t})=>r.extractStyleFromTheme(e.fontWeights,t,void 0)};
|
|
8
|
+
font-size: ${({theme:e,fontSize:t})=>r.extractStyleFromTheme(e.fontSizes,t,void 0)};
|
|
9
|
+
line-height: ${({theme:e,lineHeight:t})=>r.extractStyleFromTheme(e.lineHeights,t,void 0)};
|
|
10
|
+
color: ${o.handleColor};
|
|
11
11
|
text-align: ${({textAlign:e})=>e};
|
|
12
12
|
text-decoration: ${({textDecoration:e})=>e};
|
|
13
13
|
text-transform: ${({textTransform:e})=>e};
|
|
14
|
-
`;exports.Typography=
|
|
14
|
+
`;exports.Typography=l;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),d=e=>e&&e.__esModule?e:{default:e},i=d(t),l=i.default.div`
|
|
2
2
|
border: 0;
|
|
3
3
|
clip: rect(0 0 0 0);
|
|
4
4
|
height: 1px;
|
|
@@ -7,4 +7,4 @@
|
|
|
7
7
|
padding: 0;
|
|
8
8
|
position: absolute;
|
|
9
9
|
width: 1px;
|
|
10
|
-
`;exports.VisuallyHidden=
|
|
10
|
+
`;exports.VisuallyHidden=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react");function r(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const s=r(u);function
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react");function r(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const s=r(u);function i(e,t){typeof e=="function"?e(t):e!=null&&(e.current=t)}function c(...e){return t=>e.forEach(n=>i(n,t))}function f(...e){return s.useCallback(c(...e),e)}exports.composeRefs=c;exports.useComposedRefs=f;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),i=require("@radix-ui/react-use-callback-ref");function g(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=C({defaultProp:o,onChange:n}),r=e!==void 0,s=typeof e=="function"?e(t):e,d=r?s:t,a=i.useCallbackRef(n),b=u.useCallback(l=>{if(r){const f=typeof l=="function"?l(s):l;f!==s&&(a(f),c(l))}else c(l)},[r,s,c,a]);return[d,b]}function C({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=i.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),i=require("@radix-ui/react-use-callback-ref");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=C({defaultProp:o,onChange:n}),r=e!==void 0,s=typeof e=="function"?e(t):e,d=r?s:t,a=i.useCallbackRef(n),b=u.useCallback(l=>{if(r){const f=typeof l=="function"?l(s):l;f!==s&&(a(f),c(l))}else c(l)},[r,s,c,a]);return[d,b]}function C({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=i.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;
|
package/dist/hooks/useId.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),n=t=>t&&t.__esModule?t:{default:t},c=n(e),d=c.default["useId".toString()]||(()=>{});let r=0;const a=t=>{const[u,o]=e.useState(d());return e.useLayoutEffect(()=>{t||o(s=>s??String(r++))},[t]),t?.toString()??(u||"")};exports.useId=a;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),f=require("prop-types"),m=require("styled-components"),p=require("./Divider.cjs"),a=require("../../Flex/Flex.cjs"),y=require("../../Box/Box.cjs"),l=e=>e&&e.__esModule?e:{default:e},r=l(f),b=l(m),g=b.default(a.Flex)`
|
|
2
2
|
// CrumbLinks do have padding-x, because they need to have a
|
|
3
3
|
// interaction effect, which mis-aligns the breadcrumbs on the left.
|
|
4
4
|
// This normalizes the behavior by moving the first item to left by
|
|
5
5
|
// the same amount it has inner padding
|
|
6
6
|
:first-child {
|
|
7
|
-
margin-left: ${({theme:
|
|
7
|
+
margin-left: ${({theme:e})=>`calc(-1*${e.spaces[2]})`};
|
|
8
8
|
}
|
|
9
|
-
`,
|
|
9
|
+
`,s=({label:e,children:d,...o})=>{const i=n.Children.toArray(d);return t.jsx(y.Box,{"aria-label":e,...o,children:t.jsx(g,{as:"ol",horizontal:!0,children:n.Children.map(i,(u,c)=>{const h=i.length>1&&c+1<i.length;return t.jsxs(a.Flex,{inline:!0,as:"li",children:[u,h&&t.jsx(p.Divider,{})]})})})})};s.displayName="Breadcrumbs";s.propTypes={children:r.default.oneOfType([r.default.arrayOf(r.default.node),r.default.node]).isRequired,label:r.default.string.isRequired};exports.Breadcrumbs=s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const a=require("prop-types"),u=require("../../Box/Box.cjs"),d=require("../../Typography/Typography.cjs"),p=e=>e&&e.__esModule?e:{default:e},i=p(a),r=({children:e,isCurrent:t,...n})=>o.jsx(u.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1,children:o.jsx(d.Typography,{variant:"pi",textColor:"neutral800",fontWeight:t?"bold":"normal","aria-current":t,...n,children:e})});r.displayName="Crumb";r.defaultProps={isCurrent:!1};r.propTypes={children:i.default.node.isRequired,isCurrent:i.default.bool};exports.Crumb=r;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");require("react");const i=require("prop-types"),u=require("styled-components"),l=require("../../BaseLink/BaseLink.cjs"),t=e=>e&&e.__esModule?e:{default:e},r=t(i),d=t(u),a=d.default(l.BaseLink)`
|
|
2
2
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
3
3
|
color: ${({theme:e})=>e.colors.neutral600};
|
|
4
4
|
font-size: ${({theme:e})=>e.fontSizes[1]};
|
|
@@ -11,4 +11,4 @@
|
|
|
11
11
|
background-color: ${({theme:e})=>e.colors.neutral200};
|
|
12
12
|
color: ${({theme:e})=>e.colors.neutral700};
|
|
13
13
|
}
|
|
14
|
-
`,
|
|
14
|
+
`,o=({children:e,...s})=>n.jsx(a,{...s,children:e});o.displayName="CrumbLink";o.defaultProps={to:void 0};o.propTypes={children:r.default.node.isRequired,to:r.default.string};exports.CrumbLink=o;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime");require("react");const s=require("@strapi/icons"),i=require("prop-types"),l=require("styled-components"),a=require("../SimpleMenu/SimpleMenu.cjs"),d=require("../../Button/Button.cjs"),o=e=>e&&e.__esModule?e:{default:e},r=o(i),c=o(l),p=c.default(d.Button)`
|
|
2
2
|
padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
|
|
3
3
|
|
|
4
4
|
:hover,
|
|
5
5
|
:focus {
|
|
6
6
|
background-color: ${({theme:e})=>e.colors.neutral200};
|
|
7
7
|
}
|
|
8
|
-
`,
|
|
8
|
+
`,t=({children:e,...n})=>u.jsx(a.SimpleMenu,{noBorder:!0,icon:u.jsx(s.CarretDown,{}),as:p,size:"S",...n,children:e});t.displayName="CrumbSimpleMenu";t.propTypes={"aria-label":r.default.string.isRequired,children:r.default.oneOfType([r.default.arrayOf(r.default.node),r.default.node]).isRequired};exports.CrumbSimpleMenu=t;
|
package/dist/v2/Link/Link.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),d=require("@strapi/icons"),f=require("styled-components"),y=require("../../themes/utils.cjs"),m=require("../../BaseLink/BaseLink.cjs"),x=require("../../Typography/Typography.cjs"),i=e=>e&&e.__esModule?e:{default:e},g=i(p),k=i(f),q=k.default(m.BaseLink)`
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
text-decoration: none;
|
|
@@ -21,5 +21,5 @@
|
|
|
21
21
|
color: ${({theme:e})=>e.colors.primary700};
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
${
|
|
25
|
-
`,
|
|
24
|
+
${y.buttonFocusStyle};
|
|
25
|
+
`,l=g.default.forwardRef(({children:e,href:r,disabled:o=!1,startIcon:a,endIcon:n,isExternal:s=!0,...c},u)=>t.jsxs(q,{ref:u,href:r,disabled:o,isExternal:s,...c,children:[a,t.jsx(x.Typography,{textColor:o?"neutral600":"primary600",children:e}),n,r&&!n&&s&&t.jsx(d.ExternalLink,{})]}));l.displayName="Link";exports.Link=l;
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),b=require("react"),x=require("styled-components"),t=require("../../Button/utils.cjs"),B=require("../../BaseButton/BaseButton.cjs"),s=require("../../BaseLink/BaseLink.cjs"),l=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},v=c(b),k=c(x),q=k.default(B.BaseButtonWrapper)`
|
|
2
2
|
text-decoration: none;
|
|
3
3
|
|
|
4
4
|
&[aria-disabled='true'] {
|
|
5
|
-
${
|
|
5
|
+
${t.getDisabledStyle}
|
|
6
6
|
&:active {
|
|
7
|
-
${
|
|
7
|
+
${t.getDisabledStyle}
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
&:hover {
|
|
12
|
-
${
|
|
12
|
+
${t.getHoverStyle}
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
&:active {
|
|
16
|
-
${
|
|
16
|
+
${t.getActiveStyle}
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
${
|
|
20
|
-
`,
|
|
19
|
+
${t.getVariantStyle}
|
|
20
|
+
`,p=v.default.forwardRef(({variant:e="default",startIcon:i,endIcon:a,disabled:o=!1,children:g,size:r="S",as:f=s.BaseLink,...y},h)=>{const d=r==="S"?2:"10px",u=4;return n.jsxs(q,{ref:h,"aria-disabled":o,size:r,variant:e,background:"buttonPrimary600",borderColor:"buttonPrimary600",hasRadius:!0,gap:2,inline:!0,paddingBottom:d,paddingLeft:u,paddingRight:u,paddingTop:d,pointerEvents:o?"none":void 0,...y,as:f||s.BaseLink,children:[i&&n.jsx(l.Flex,{"aria-hidden":!0,children:i}),n.jsx(S.Typography,{variant:r==="S"?"pi":void 0,fontWeight:"bold",textColor:"buttonNeutral0",children:g}),a&&n.jsx(l.Flex,{"aria-hidden":!0,children:a})]})});p.displayName="LinkButton";exports.LinkButton=p;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const a=require("prop-types"),s=require("styled-components"),i=require("./MainNavContext.cjs"),l=require("../../Flex/Flex.cjs"),r=e=>e&&e.__esModule?e:{default:e},u=r(a),d=r(s),c=d.default(l.Flex)`
|
|
2
2
|
width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
|
|
3
3
|
border-right: 1px solid ${({theme:e})=>e.colors.neutral150};
|
|
4
|
-
`,
|
|
4
|
+
`,t=({condensed:e,...n})=>o.jsx(i.MainNavContext.Provider,{value:e,children:o.jsx(c,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n})});t.defaultProps={condensed:!1};t.propTypes={condensed:u.default.bool};exports.MainNav=t;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
-
border-radius: ${({theme:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),g=require("react"),f=require("prop-types"),y=require("styled-components"),j=require("./MainNavContext.cjs"),h=require("../../BaseLink/BaseLink.cjs"),t=require("../../Box/Box.cjs"),u=require("../../VisuallyHidden/VisuallyHidden.cjs"),q=require("../../Flex/Flex.cjs"),c=require("../../Typography/Typography.cjs"),i=e=>e&&e.__esModule?e:{default:e},B=i(g),r=i(f),x=i(y),p=x.default.div`
|
|
2
|
+
border-radius: ${({theme:e})=>e.borderRadius};
|
|
3
3
|
|
|
4
4
|
svg,
|
|
5
5
|
img {
|
|
6
|
-
height: ${({condensed:
|
|
7
|
-
width: ${({condensed:
|
|
6
|
+
height: ${({condensed:e})=>e?`${40/16}rem`:`${32/16}rem`};
|
|
7
|
+
width: ${({condensed:e})=>e?`${40/16}rem`:`${32/16}rem`};
|
|
8
8
|
}
|
|
9
|
-
`,
|
|
9
|
+
`,m=x.default(h.BaseLink)`
|
|
10
10
|
text-decoration: unset;
|
|
11
11
|
color: inherit;
|
|
12
|
-
`,
|
|
12
|
+
`,d=B.default.forwardRef(({workplace:e,title:s,icon:a,...o},l)=>j.useMainNav()?n.jsx(h.BaseLink,{ref:l,...o,children:n.jsx(t.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:n.jsxs(p,{condensed:!0,children:[a,n.jsxs(u.VisuallyHidden,{children:[n.jsx("span",{children:s}),n.jsx("span",{children:e})]})]})})}):n.jsx(m,{ref:l,...o,children:n.jsx(t.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:n.jsxs(q.Flex,{children:[n.jsx(p,{"aria-hidden":!0,tabIndex:-1,children:a}),n.jsxs(t.Box,{paddingLeft:2,children:[n.jsxs(c.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span",children:[s,n.jsx(u.VisuallyHidden,{as:"span",children:e})]}),n.jsx(c.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0,children:e})]})]})})}));d.displayName="NavBrand";d.defaultProps={to:"/"};d.propTypes={icon:r.default.node.isRequired,title:r.default.string.isRequired,to:r.default.string,workplace:r.default.string.isRequired};exports.NavBrand=d;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const s=require("@strapi/icons"),d=require("prop-types"),a=require("styled-components"),u=require("./MainNavContext.cjs"),l=require("../../Icon/Icon.cjs"),c=require("../../VisuallyHidden/VisuallyHidden.cjs"),o=e=>e&&e.__esModule?e:{default:e},h=o(d),p=o(a),g=p.default.button`
|
|
2
2
|
background: ${({theme:e})=>e.colors.neutral0};
|
|
3
3
|
border: 1px solid ${({theme:e})=>e.colors.neutral150};
|
|
4
4
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
justify-content: center;
|
|
8
8
|
position: absolute;
|
|
9
9
|
bottom: ${(9+4)/16}rem; // 9 is the height of the svg and 4 is the padding below
|
|
10
|
-
right: ${({theme:e,condensed:
|
|
10
|
+
right: ${({theme:e,condensed:t})=>t?0:e.spaces[5]};
|
|
11
11
|
transform: ${({condensed:e})=>e?"translateX(50%)":void 0};
|
|
12
12
|
z-index: 2;
|
|
13
13
|
width: ${18/16}rem;
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
width: ${6/16}rem;
|
|
18
18
|
height: ${9/16}rem;
|
|
19
19
|
}
|
|
20
|
-
`,
|
|
20
|
+
`,i=({children:e,...t})=>{const n=u.useMainNav();return r.jsxs(g,{as:"button",condensed:n,...t,children:[r.jsx(l.Icon,{as:n?s.ChevronRight:s.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),r.jsx(c.VisuallyHidden,{children:e})]})};i.propTypes={children:h.default.string.isRequired};exports.NavCondense=i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const t=require("prop-types"),s=require("../../Box/Box.cjs"),i=e=>e&&e.__esModule?e:{default:e},u=i(t),o=({children:e})=>r.jsx(s.Box,{position:"relative",children:e});o.displayName="NavFooter";o.propTypes={children:u.default.node.isRequired};exports.NavFooter=o;
|