@entur/layout 3.4.0 → 3.4.1-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/beta/cjs/Flex/Flex.cjs +105 -101
- package/dist/beta/cjs/Flex/Flex.cjs.map +1 -1
- package/dist/beta/cjs/Grid/Grid.cjs +74 -70
- package/dist/beta/cjs/Grid/Grid.cjs.map +1 -1
- package/dist/beta/cjs/Grid/GridItem.cjs +35 -31
- package/dist/beta/cjs/Grid/GridItem.cjs.map +1 -1
- package/dist/beta/cjs/templates/Sidebar.cjs +85 -67
- package/dist/beta/cjs/templates/Sidebar.cjs.map +1 -1
- package/dist/beta/cjs/templates/portal/Portal.cjs +35 -36
- package/dist/beta/cjs/templates/portal/Portal.cjs.map +1 -1
- package/dist/beta/esm/Flex/Flex.mjs +105 -101
- package/dist/beta/esm/Flex/Flex.mjs.map +1 -1
- package/dist/beta/esm/Grid/Grid.mjs +74 -70
- package/dist/beta/esm/Grid/Grid.mjs.map +1 -1
- package/dist/beta/esm/Grid/GridItem.mjs +35 -31
- package/dist/beta/esm/Grid/GridItem.mjs.map +1 -1
- package/dist/beta/esm/templates/Sidebar.mjs +85 -67
- package/dist/beta/esm/templates/Sidebar.mjs.map +1 -1
- package/dist/beta/esm/templates/portal/Portal.mjs +35 -36
- package/dist/beta/esm/templates/portal/Portal.mjs.map +1 -1
- package/dist/beta/styles/index.css +15 -5
- package/dist/beta/types/Flex/Flex.d.ts +3 -1
- package/dist/beta/types/Grid/Grid.d.ts +3 -1
- package/dist/beta/types/Grid/GridItem.d.ts +3 -1
- package/dist/beta/types/templates/Sidebar.d.ts +32 -8
- package/dist/beta/types/templates/portal/Portal.d.ts +21 -4
- package/package.json +2 -2
|
@@ -1,111 +1,115 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
4
5
|
const classNames = require("classnames");
|
|
5
6
|
const utils = require("../LayoutWrapper/utils.cjs");
|
|
6
7
|
const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
|
|
7
8
|
;/* empty css */
|
|
8
9
|
const defaultElement = "div";
|
|
9
|
-
const Flex = (
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
10
|
+
const Flex = React.forwardRef(
|
|
11
|
+
({
|
|
12
|
+
direction,
|
|
13
|
+
wrap,
|
|
14
|
+
align,
|
|
15
|
+
justify,
|
|
16
|
+
alignContent,
|
|
17
|
+
gap,
|
|
18
|
+
rowGap,
|
|
19
|
+
columnGap,
|
|
20
|
+
flex,
|
|
21
|
+
grow,
|
|
22
|
+
shrink,
|
|
23
|
+
basis,
|
|
24
|
+
width,
|
|
25
|
+
height,
|
|
26
|
+
minWidth,
|
|
27
|
+
minHeight,
|
|
28
|
+
maxWidth,
|
|
29
|
+
maxHeight,
|
|
30
|
+
as,
|
|
31
|
+
className,
|
|
32
|
+
children,
|
|
33
|
+
style,
|
|
34
|
+
...rest
|
|
35
|
+
}, ref) => {
|
|
36
|
+
const Element = as || defaultElement;
|
|
37
|
+
const resolvedDirection = useResponsiveValue.useResponsiveValue(direction);
|
|
38
|
+
const resolvedWrap = useResponsiveValue.useResponsiveValue(wrap);
|
|
39
|
+
const resolvedAlign = useResponsiveValue.useResponsiveValue(align);
|
|
40
|
+
const resolvedJustify = useResponsiveValue.useResponsiveValue(justify);
|
|
41
|
+
const resolvedAlignContent = useResponsiveValue.useResponsiveValue(alignContent);
|
|
42
|
+
const resolvedGap = useResponsiveValue.useResponsiveValue(gap);
|
|
43
|
+
const resolvedRowGap = useResponsiveValue.useResponsiveValue(rowGap);
|
|
44
|
+
const resolvedColumnGap = useResponsiveValue.useResponsiveValue(columnGap);
|
|
45
|
+
const flexStyle = {
|
|
46
|
+
...resolvedDirection && {
|
|
47
|
+
"--flex-direction": resolvedDirection
|
|
48
|
+
},
|
|
49
|
+
...resolvedWrap && {
|
|
50
|
+
"--flex-wrap": resolvedWrap
|
|
51
|
+
},
|
|
52
|
+
...resolvedAlign && {
|
|
53
|
+
"--flex-align-items": resolvedAlign
|
|
54
|
+
},
|
|
55
|
+
...resolvedJustify && {
|
|
56
|
+
"--flex-justify-content": resolvedJustify
|
|
57
|
+
},
|
|
58
|
+
...resolvedAlignContent && {
|
|
59
|
+
"--flex-align-content": resolvedAlignContent
|
|
60
|
+
},
|
|
61
|
+
...resolvedGap && {
|
|
62
|
+
"--flex-gap": utils.getSpacingValue(resolvedGap, "Flex")
|
|
63
|
+
},
|
|
64
|
+
...resolvedRowGap && {
|
|
65
|
+
"--flex-row-gap": utils.getSpacingValue(resolvedRowGap, "Flex")
|
|
66
|
+
},
|
|
67
|
+
...resolvedColumnGap && {
|
|
68
|
+
"--flex-column-gap": utils.getSpacingValue(resolvedColumnGap, "Flex")
|
|
69
|
+
},
|
|
70
|
+
...flex !== void 0 && {
|
|
71
|
+
"--flex": flex
|
|
72
|
+
},
|
|
73
|
+
...grow !== void 0 && {
|
|
74
|
+
"--flex-grow": grow
|
|
75
|
+
},
|
|
76
|
+
...shrink !== void 0 && {
|
|
77
|
+
"--flex-shrink": shrink
|
|
78
|
+
},
|
|
79
|
+
...basis !== void 0 && {
|
|
80
|
+
"--flex-basis": basis
|
|
81
|
+
},
|
|
82
|
+
...width && {
|
|
83
|
+
"--flex-width": width
|
|
84
|
+
},
|
|
85
|
+
...height && {
|
|
86
|
+
"--flex-height": height
|
|
87
|
+
},
|
|
88
|
+
...minWidth && {
|
|
89
|
+
"--flex-min-width": minWidth
|
|
90
|
+
},
|
|
91
|
+
...minHeight && {
|
|
92
|
+
"--flex-min-height": minHeight
|
|
93
|
+
},
|
|
94
|
+
...maxWidth && {
|
|
95
|
+
"--flex-max-width": maxWidth
|
|
96
|
+
},
|
|
97
|
+
...maxHeight && {
|
|
98
|
+
"--flex-max-height": maxHeight
|
|
99
|
+
},
|
|
100
|
+
...style
|
|
101
|
+
};
|
|
102
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
103
|
+
Element,
|
|
104
|
+
{
|
|
105
|
+
ref,
|
|
106
|
+
className: classNames("eds-layout-flex", className),
|
|
107
|
+
style: flexStyle,
|
|
108
|
+
...rest,
|
|
109
|
+
children
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
);
|
|
110
114
|
exports.Flex = Flex;
|
|
111
115
|
//# sourceMappingURL=Flex.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.cjs","sources":["../../../../src/beta/Flex/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\n\nimport './Flex.scss';\n\nexport type FlexSpacingValue = GridSpacingValue;\n\ntype FlexDirection = React.CSSProperties['flexDirection'];\ntype FlexWrap = React.CSSProperties['flexWrap'];\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\ntype FlexBasis = React.CSSProperties['flexBasis'];\ntype FlexValue = React.CSSProperties['flex'];\n\nexport type FlexOwnProps = {\n /** CSS flex-direction value (supports responsive objects)\n * @default \"row\"\n */\n direction?: FlexDirection | ResponsiveValue<FlexDirection>;\n /** CSS flex-wrap value (supports responsive objects)\n * @default \"nowrap\"\n */\n wrap?: FlexWrap | ResponsiveValue<FlexWrap>;\n /** CSS align-items value (supports responsive objects) */\n align?: AlignItems | ResponsiveValue<AlignItems>;\n /** CSS justify-content value (supports responsive objects) */\n justify?: JustifyContent | ResponsiveValue<JustifyContent>;\n /** CSS align-content value (supports responsive objects) */\n alignContent?: AlignContent | ResponsiveValue<AlignContent>;\n /** Spacing between flex items (supports responsive objects) */\n gap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n /** Vertical spacing between rows (supports responsive objects) */\n rowGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n /** Horizontal spacing between columns (supports responsive objects) */\n columnGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n /** CSS flex shorthand value */\n flex?: FlexValue;\n /** CSS flex-grow value */\n grow?: number;\n /** CSS flex-shrink value */\n shrink?: number;\n /** CSS flex-basis value */\n basis?: FlexBasis;\n /** CSS width value */\n width?: string;\n /** CSS height value */\n height?: string;\n /** CSS min-width value */\n minWidth?: string;\n /** CSS min-height value */\n minHeight?: string;\n /** CSS max-width value */\n maxWidth?: string;\n /** CSS max-height value */\n maxHeight?: string;\n /** HTML element or React component used to render the Flex container\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Additional class names */\n className?: string;\n /** Content of the Flex container */\n children?: React.ReactNode;\n};\n\nexport type FlexProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, FlexOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Flex = <E extends React.ElementType = typeof defaultElement>({\n
|
|
1
|
+
{"version":3,"file":"Flex.cjs","sources":["../../../../src/beta/Flex/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\n\nimport './Flex.scss';\n\nexport type FlexSpacingValue = GridSpacingValue;\n\ntype FlexDirection = React.CSSProperties['flexDirection'];\ntype FlexWrap = React.CSSProperties['flexWrap'];\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\ntype FlexBasis = React.CSSProperties['flexBasis'];\ntype FlexValue = React.CSSProperties['flex'];\n\nexport type FlexOwnProps = {\n /** CSS flex-direction value (supports responsive objects)\n * @default \"row\"\n */\n direction?: FlexDirection | ResponsiveValue<FlexDirection>;\n /** CSS flex-wrap value (supports responsive objects)\n * @default \"nowrap\"\n */\n wrap?: FlexWrap | ResponsiveValue<FlexWrap>;\n /** CSS align-items value (supports responsive objects) */\n align?: AlignItems | ResponsiveValue<AlignItems>;\n /** CSS justify-content value (supports responsive objects) */\n justify?: JustifyContent | ResponsiveValue<JustifyContent>;\n /** CSS align-content value (supports responsive objects) */\n alignContent?: AlignContent | ResponsiveValue<AlignContent>;\n /** Spacing between flex items (supports responsive objects) */\n gap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n /** Vertical spacing between rows (supports responsive objects) */\n rowGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n /** Horizontal spacing between columns (supports responsive objects) */\n columnGap?: FlexSpacingValue | ResponsiveValue<FlexSpacingValue>;\n /** CSS flex shorthand value */\n flex?: FlexValue;\n /** CSS flex-grow value */\n grow?: number;\n /** CSS flex-shrink value */\n shrink?: number;\n /** CSS flex-basis value */\n basis?: FlexBasis;\n /** CSS width value */\n width?: string;\n /** CSS height value */\n height?: string;\n /** CSS min-width value */\n minWidth?: string;\n /** CSS min-height value */\n minHeight?: string;\n /** CSS max-width value */\n maxWidth?: string;\n /** CSS max-height value */\n maxHeight?: string;\n /** HTML element or React component used to render the Flex container\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Additional class names */\n className?: string;\n /** Content of the Flex container */\n children?: React.ReactNode;\n};\n\nexport type FlexProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, FlexOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Flex = React.forwardRef(\n <E extends React.ElementType = typeof defaultElement>(\n {\n direction,\n wrap,\n align,\n justify,\n alignContent,\n gap,\n rowGap,\n columnGap,\n flex,\n grow,\n shrink,\n basis,\n width,\n height,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n as,\n className,\n children,\n style,\n ...rest\n }: FlexProps<E>,\n ref?: React.Ref<Element>,\n ): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n\n const resolvedDirection = useResponsiveValue(direction);\n const resolvedWrap = useResponsiveValue(wrap);\n const resolvedAlign = useResponsiveValue(align);\n const resolvedJustify = useResponsiveValue(justify);\n const resolvedAlignContent = useResponsiveValue(alignContent);\n const resolvedGap = useResponsiveValue(gap);\n const resolvedRowGap = useResponsiveValue(rowGap);\n const resolvedColumnGap = useResponsiveValue(columnGap);\n\n const flexStyle: React.CSSProperties = {\n ...(resolvedDirection && {\n '--flex-direction': resolvedDirection,\n }),\n ...(resolvedWrap && {\n '--flex-wrap': resolvedWrap,\n }),\n ...(resolvedAlign && {\n '--flex-align-items': resolvedAlign,\n }),\n ...(resolvedJustify && {\n '--flex-justify-content': resolvedJustify,\n }),\n ...(resolvedAlignContent && {\n '--flex-align-content': resolvedAlignContent,\n }),\n ...(resolvedGap && {\n '--flex-gap': getSpacingValue(resolvedGap, 'Flex'),\n }),\n ...(resolvedRowGap && {\n '--flex-row-gap': getSpacingValue(resolvedRowGap, 'Flex'),\n }),\n ...(resolvedColumnGap && {\n '--flex-column-gap': getSpacingValue(resolvedColumnGap, 'Flex'),\n }),\n ...(flex !== undefined && {\n '--flex': flex,\n }),\n ...(grow !== undefined && {\n '--flex-grow': grow,\n }),\n ...(shrink !== undefined && {\n '--flex-shrink': shrink,\n }),\n ...(basis !== undefined && {\n '--flex-basis': basis,\n }),\n ...(width && {\n '--flex-width': width,\n }),\n ...(height && {\n '--flex-height': height,\n }),\n ...(minWidth && {\n '--flex-min-width': minWidth,\n }),\n ...(minHeight && {\n '--flex-min-height': minHeight,\n }),\n ...(maxWidth && {\n '--flex-max-width': maxWidth,\n }),\n ...(maxHeight && {\n '--flex-max-height': maxHeight,\n }),\n ...style,\n } as React.CSSProperties;\n\n return (\n <Element\n ref={ref}\n className={classNames('eds-layout-flex', className)}\n style={flexStyle}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n"],"names":["useResponsiveValue","getSpacingValue","jsx"],"mappings":";;;;;;;;AAyEA,MAAM,iBAAiB;AAEhB,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACgB;AAChB,UAAM,UAA6B,MAAM;AAEzC,UAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AACtD,UAAM,eAAeA,mBAAAA,mBAAmB,IAAI;AAC5C,UAAM,gBAAgBA,mBAAAA,mBAAmB,KAAK;AAC9C,UAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,UAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAC5D,UAAM,cAAcA,mBAAAA,mBAAmB,GAAG;AAC1C,UAAM,iBAAiBA,mBAAAA,mBAAmB,MAAM;AAChD,UAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AAEtD,UAAM,YAAiC;AAAA,MACrC,GAAI,qBAAqB;AAAA,QACvB,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,gBAAgB;AAAA,QAClB,eAAe;AAAA,MAAA;AAAA,MAEjB,GAAI,iBAAiB;AAAA,QACnB,sBAAsB;AAAA,MAAA;AAAA,MAExB,GAAI,mBAAmB;AAAA,QACrB,0BAA0B;AAAA,MAAA;AAAA,MAE5B,GAAI,wBAAwB;AAAA,QAC1B,wBAAwB;AAAA,MAAA;AAAA,MAE1B,GAAI,eAAe;AAAA,QACjB,cAAcC,MAAAA,gBAAgB,aAAa,MAAM;AAAA,MAAA;AAAA,MAEnD,GAAI,kBAAkB;AAAA,QACpB,kBAAkBA,MAAAA,gBAAgB,gBAAgB,MAAM;AAAA,MAAA;AAAA,MAE1D,GAAI,qBAAqB;AAAA,QACvB,qBAAqBA,MAAAA,gBAAgB,mBAAmB,MAAM;AAAA,MAAA;AAAA,MAEhE,GAAI,SAAS,UAAa;AAAA,QACxB,UAAU;AAAA,MAAA;AAAA,MAEZ,GAAI,SAAS,UAAa;AAAA,QACxB,eAAe;AAAA,MAAA;AAAA,MAEjB,GAAI,WAAW,UAAa;AAAA,QAC1B,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAI,UAAU,UAAa;AAAA,QACzB,gBAAgB;AAAA,MAAA;AAAA,MAElB,GAAI,SAAS;AAAA,QACX,gBAAgB;AAAA,MAAA;AAAA,MAElB,GAAI,UAAU;AAAA,QACZ,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAI,YAAY;AAAA,QACd,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,aAAa;AAAA,QACf,qBAAqB;AAAA,MAAA;AAAA,MAEvB,GAAI,YAAY;AAAA,QACd,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,aAAa;AAAA,QACf,qBAAqB;AAAA,MAAA;AAAA,MAEvB,GAAG;AAAA,IAAA;AAGL,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,mBAAmB,SAAS;AAAA,QAClD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;;"}
|
|
@@ -1,80 +1,84 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
4
5
|
const utils = require("../LayoutWrapper/utils.cjs");
|
|
5
6
|
const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
|
|
6
7
|
const classNames = require("classnames");
|
|
7
8
|
;/* empty css */
|
|
8
9
|
const defaultElement = "div";
|
|
9
|
-
const Grid = (
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}
|
|
10
|
+
const Grid = React.forwardRef(
|
|
11
|
+
({
|
|
12
|
+
templateColumns,
|
|
13
|
+
templateRows,
|
|
14
|
+
gap = "m",
|
|
15
|
+
rowGap,
|
|
16
|
+
columnGap,
|
|
17
|
+
autoFlow = "row",
|
|
18
|
+
align,
|
|
19
|
+
justify,
|
|
20
|
+
alignContent,
|
|
21
|
+
height,
|
|
22
|
+
as,
|
|
23
|
+
className,
|
|
24
|
+
children,
|
|
25
|
+
style,
|
|
26
|
+
...rest
|
|
27
|
+
}, ref) => {
|
|
28
|
+
const Element = as || defaultElement;
|
|
29
|
+
const resolvedTemplateColumns = useResponsiveValue.useResponsiveValue(templateColumns) ?? "repeat(12, 1fr)";
|
|
30
|
+
const resolvedTemplateRows = useResponsiveValue.useResponsiveValue(templateRows);
|
|
31
|
+
const resolvedGap = useResponsiveValue.useResponsiveValue(gap);
|
|
32
|
+
const resolvedRowGap = useResponsiveValue.useResponsiveValue(rowGap);
|
|
33
|
+
const resolvedColumnGap = useResponsiveValue.useResponsiveValue(columnGap);
|
|
34
|
+
const resolvedAutoFlow = useResponsiveValue.useResponsiveValue(autoFlow) ?? "row";
|
|
35
|
+
const resolvedAlign = useResponsiveValue.useResponsiveValue(align);
|
|
36
|
+
const resolvedJustify = useResponsiveValue.useResponsiveValue(justify);
|
|
37
|
+
const resolvedAlignContent = useResponsiveValue.useResponsiveValue(alignContent);
|
|
38
|
+
const gridStyle = {
|
|
39
|
+
...resolvedTemplateColumns && {
|
|
40
|
+
"--grid-template-columns": resolvedTemplateColumns
|
|
41
|
+
},
|
|
42
|
+
...resolvedTemplateRows && {
|
|
43
|
+
"--grid-template-rows": resolvedTemplateRows
|
|
44
|
+
},
|
|
45
|
+
...resolvedAutoFlow && {
|
|
46
|
+
"--grid-auto-flow": resolvedAutoFlow
|
|
47
|
+
},
|
|
48
|
+
...resolvedAlign && {
|
|
49
|
+
"--grid-align-items": resolvedAlign
|
|
50
|
+
},
|
|
51
|
+
...resolvedJustify && {
|
|
52
|
+
"--grid-justify-content": resolvedJustify
|
|
53
|
+
},
|
|
54
|
+
...resolvedAlignContent && {
|
|
55
|
+
"--grid-align-content": resolvedAlignContent
|
|
56
|
+
},
|
|
57
|
+
...resolvedGap && {
|
|
58
|
+
"--grid-gap": utils.getSpacingValue(resolvedGap)
|
|
59
|
+
},
|
|
60
|
+
...resolvedRowGap && {
|
|
61
|
+
"--grid-row-gap": utils.getSpacingValue(resolvedRowGap)
|
|
62
|
+
},
|
|
63
|
+
...resolvedColumnGap && {
|
|
64
|
+
"--grid-column-gap": utils.getSpacingValue(resolvedColumnGap)
|
|
65
|
+
},
|
|
66
|
+
...height && {
|
|
67
|
+
"--grid-height": height
|
|
68
|
+
},
|
|
69
|
+
...style
|
|
70
|
+
};
|
|
71
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
+
Element,
|
|
73
|
+
{
|
|
74
|
+
ref,
|
|
75
|
+
className: classNames("eds-layout-grid", className),
|
|
76
|
+
style: gridStyle,
|
|
77
|
+
...rest,
|
|
78
|
+
children
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
);
|
|
79
83
|
exports.Grid = Grid;
|
|
80
84
|
//# sourceMappingURL=Grid.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.cjs","sources":["../../../../src/beta/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport classNames from 'classnames';\n\nimport './Grid.scss';\n\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\n\nexport type GridOwnProps = {\n /** CSS grid-template-columns value (supports responsive objects)\n * @default \"repeat(12, 1fr)\"\n */\n templateColumns?: string | ResponsiveValue<string>;\n /** Spacing between grid items (supports responsive objects)\n * @default \"m\"\n */\n gap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Vertical spacing between grid rows (supports responsive objects) */\n rowGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Horizontal spacing between grid columns (supports responsive objects) */\n columnGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** CSS grid-template-rows value (supports responsive objects) */\n templateRows?: string | ResponsiveValue<string>;\n /** CSS grid-auto-flow value (supports responsive objects)\n * @default \"row\"\n */\n autoFlow?:\n | 'row'\n | 'column'\n | 'dense'\n | 'row dense'\n | 'column dense'\n | ResponsiveValue<\n 'row' | 'column' | 'dense' | 'row dense' | 'column dense'\n >;\n /** CSS align-items value (supports responsive objects) */\n align?: AlignItems | ResponsiveValue<AlignItems>;\n /** CSS justify-content value (supports responsive objects) */\n justify?: JustifyContent | ResponsiveValue<JustifyContent>;\n /** CSS align-content value (supports responsive objects) */\n alignContent?: AlignContent | ResponsiveValue<AlignContent>;\n /** The height of the grid container */\n height?: string;\n /** HTML element or React component used to render the Grid\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Additional class names */\n className?: string;\n /** Content of the Grid container */\n children?: React.ReactNode;\n};\n\nexport type GridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Grid = <E extends React.ElementType = typeof defaultElement>({\n
|
|
1
|
+
{"version":3,"file":"Grid.cjs","sources":["../../../../src/beta/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport classNames from 'classnames';\n\nimport './Grid.scss';\n\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\n\nexport type GridOwnProps = {\n /** CSS grid-template-columns value (supports responsive objects)\n * @default \"repeat(12, 1fr)\"\n */\n templateColumns?: string | ResponsiveValue<string>;\n /** Spacing between grid items (supports responsive objects)\n * @default \"m\"\n */\n gap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Vertical spacing between grid rows (supports responsive objects) */\n rowGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Horizontal spacing between grid columns (supports responsive objects) */\n columnGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** CSS grid-template-rows value (supports responsive objects) */\n templateRows?: string | ResponsiveValue<string>;\n /** CSS grid-auto-flow value (supports responsive objects)\n * @default \"row\"\n */\n autoFlow?:\n | 'row'\n | 'column'\n | 'dense'\n | 'row dense'\n | 'column dense'\n | ResponsiveValue<\n 'row' | 'column' | 'dense' | 'row dense' | 'column dense'\n >;\n /** CSS align-items value (supports responsive objects) */\n align?: AlignItems | ResponsiveValue<AlignItems>;\n /** CSS justify-content value (supports responsive objects) */\n justify?: JustifyContent | ResponsiveValue<JustifyContent>;\n /** CSS align-content value (supports responsive objects) */\n alignContent?: AlignContent | ResponsiveValue<AlignContent>;\n /** The height of the grid container */\n height?: string;\n /** HTML element or React component used to render the Grid\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Additional class names */\n className?: string;\n /** Content of the Grid container */\n children?: React.ReactNode;\n};\n\nexport type GridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Grid = React.forwardRef(\n <E extends React.ElementType = typeof defaultElement>(\n {\n templateColumns,\n templateRows,\n gap = 'm',\n rowGap,\n columnGap,\n autoFlow = 'row',\n align,\n justify,\n alignContent,\n height,\n as,\n className,\n children,\n style,\n ...rest\n }: GridProps<E>,\n ref?: React.Ref<Element>,\n ): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n\n const resolvedTemplateColumns =\n useResponsiveValue(templateColumns) ?? 'repeat(12, 1fr)';\n const resolvedTemplateRows = useResponsiveValue(templateRows);\n const resolvedGap = useResponsiveValue(gap);\n const resolvedRowGap = useResponsiveValue(rowGap);\n const resolvedColumnGap = useResponsiveValue(columnGap);\n const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? 'row';\n const resolvedAlign = useResponsiveValue(align);\n const resolvedJustify = useResponsiveValue(justify);\n const resolvedAlignContent = useResponsiveValue(alignContent);\n\n const gridStyle: React.CSSProperties = {\n ...(resolvedTemplateColumns && {\n '--grid-template-columns': resolvedTemplateColumns,\n }),\n ...(resolvedTemplateRows && {\n '--grid-template-rows': resolvedTemplateRows,\n }),\n ...(resolvedAutoFlow && {\n '--grid-auto-flow': resolvedAutoFlow,\n }),\n ...(resolvedAlign && {\n '--grid-align-items': resolvedAlign,\n }),\n ...(resolvedJustify && {\n '--grid-justify-content': resolvedJustify,\n }),\n ...(resolvedAlignContent && {\n '--grid-align-content': resolvedAlignContent,\n }),\n ...(resolvedGap && {\n '--grid-gap': getSpacingValue(resolvedGap),\n }),\n ...(resolvedRowGap && {\n '--grid-row-gap': getSpacingValue(resolvedRowGap),\n }),\n ...(resolvedColumnGap && {\n '--grid-column-gap': getSpacingValue(resolvedColumnGap),\n }),\n ...(height && {\n '--grid-height': height,\n }),\n ...style,\n } as React.CSSProperties;\n\n return (\n <Element\n ref={ref}\n className={classNames('eds-layout-grid', className)}\n style={gridStyle}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n"],"names":["useResponsiveValue","getSpacingValue","jsx"],"mappings":";;;;;;;;AA6DA,MAAM,iBAAiB;AAEhB,MAAM,OAAO,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACgB;AAChB,UAAM,UAA6B,MAAM;AAEzC,UAAM,0BACJA,mBAAAA,mBAAmB,eAAe,KAAK;AACzC,UAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAC5D,UAAM,cAAcA,mBAAAA,mBAAmB,GAAG;AAC1C,UAAM,iBAAiBA,mBAAAA,mBAAmB,MAAM;AAChD,UAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AACtD,UAAM,mBAAmBA,mBAAAA,mBAAmB,QAAQ,KAAK;AACzD,UAAM,gBAAgBA,mBAAAA,mBAAmB,KAAK;AAC9C,UAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,UAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAE5D,UAAM,YAAiC;AAAA,MACrC,GAAI,2BAA2B;AAAA,QAC7B,2BAA2B;AAAA,MAAA;AAAA,MAE7B,GAAI,wBAAwB;AAAA,QAC1B,wBAAwB;AAAA,MAAA;AAAA,MAE1B,GAAI,oBAAoB;AAAA,QACtB,oBAAoB;AAAA,MAAA;AAAA,MAEtB,GAAI,iBAAiB;AAAA,QACnB,sBAAsB;AAAA,MAAA;AAAA,MAExB,GAAI,mBAAmB;AAAA,QACrB,0BAA0B;AAAA,MAAA;AAAA,MAE5B,GAAI,wBAAwB;AAAA,QAC1B,wBAAwB;AAAA,MAAA;AAAA,MAE1B,GAAI,eAAe;AAAA,QACjB,cAAcC,MAAAA,gBAAgB,WAAW;AAAA,MAAA;AAAA,MAE3C,GAAI,kBAAkB;AAAA,QACpB,kBAAkBA,MAAAA,gBAAgB,cAAc;AAAA,MAAA;AAAA,MAElD,GAAI,qBAAqB;AAAA,QACvB,qBAAqBA,MAAAA,gBAAgB,iBAAiB;AAAA,MAAA;AAAA,MAExD,GAAI,UAAU;AAAA,QACZ,iBAAiB;AAAA,MAAA;AAAA,MAEnB,GAAG;AAAA,IAAA;AAGL,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,mBAAmB,SAAS;AAAA,QAClD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
4
5
|
const useResponsiveValue = require("../LayoutWrapper/useResponsiveValue.cjs");
|
|
5
6
|
const classNames = require("classnames");
|
|
6
7
|
;/* empty css */
|
|
@@ -14,36 +15,39 @@ const formatGridSpan = (value) => {
|
|
|
14
15
|
}
|
|
15
16
|
return value;
|
|
16
17
|
};
|
|
17
|
-
const GridItem = (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
18
|
+
const GridItem = React.forwardRef(
|
|
19
|
+
({
|
|
20
|
+
colSpan,
|
|
21
|
+
rowSpan = 1,
|
|
22
|
+
as,
|
|
23
|
+
className,
|
|
24
|
+
children,
|
|
25
|
+
style,
|
|
26
|
+
...rest
|
|
27
|
+
}, ref) => {
|
|
28
|
+
const Element = as || defaultElement;
|
|
29
|
+
const resolvedColSpan = useResponsiveValue.useResponsiveValue(colSpan);
|
|
30
|
+
const resolvedRowSpan = useResponsiveValue.useResponsiveValue(rowSpan);
|
|
31
|
+
const itemStyle = {
|
|
32
|
+
...resolvedColSpan !== void 0 && {
|
|
33
|
+
"--grid-item-column": formatGridSpan(resolvedColSpan)
|
|
34
|
+
},
|
|
35
|
+
...resolvedRowSpan !== void 0 && {
|
|
36
|
+
"--grid-item-row": formatGridSpan(resolvedRowSpan)
|
|
37
|
+
},
|
|
38
|
+
...style
|
|
39
|
+
};
|
|
40
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
|
+
Element,
|
|
42
|
+
{
|
|
43
|
+
ref,
|
|
44
|
+
className: classNames("eds-layout-grid-item", className),
|
|
45
|
+
style: itemStyle,
|
|
46
|
+
...rest,
|
|
47
|
+
children
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
);
|
|
48
52
|
exports.GridItem = GridItem;
|
|
49
53
|
//# sourceMappingURL=GridItem.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridItem.cjs","sources":["../../../../src/beta/Grid/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport type { ResponsiveValue } from '../LayoutWrapper/utils';\nimport classNames from 'classnames';\n\nimport './GridItem.scss';\n\nexport type GridItemOwnProps = {\n /** Number of columns the item should span (supports responsive objects)\n * If number: adds \"span\" prefix (e.g., 6 → \"span 6\")\n * If string: used directly (e.g., \"span 3\" or \"1 / 3\")\n */\n colSpan?: number | string | ResponsiveValue<number | string>;\n /** Number of rows the item should span (supports responsive objects)\n * @default 1\n * If number: adds \"span\" prefix (e.g., 2 → \"span 2\")\n * If string: used directly (e.g., \"span 2\" or \"1 / 3\")\n */\n rowSpan?: number | string | ResponsiveValue<number | string>;\n /** HTML element or React component used to render the Grid item\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Additional class names */\n className?: string;\n /** Content of the Grid item */\n children?: React.ReactNode;\n};\n\nexport type GridItemProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridItemOwnProps>;\n\nconst defaultElement = 'div';\n\nconst formatGridSpan = (\n value: number | string | undefined,\n): string | undefined => {\n if (value === undefined) {\n return undefined;\n }\n\n if (typeof value === 'number') {\n return `span ${value}`;\n }\n\n return value;\n};\n\nexport const GridItem = <E extends React.ElementType = typeof defaultElement>({\n
|
|
1
|
+
{"version":3,"file":"GridItem.cjs","sources":["../../../../src/beta/Grid/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport type { ResponsiveValue } from '../LayoutWrapper/utils';\nimport classNames from 'classnames';\n\nimport './GridItem.scss';\n\nexport type GridItemOwnProps = {\n /** Number of columns the item should span (supports responsive objects)\n * If number: adds \"span\" prefix (e.g., 6 → \"span 6\")\n * If string: used directly (e.g., \"span 3\" or \"1 / 3\")\n */\n colSpan?: number | string | ResponsiveValue<number | string>;\n /** Number of rows the item should span (supports responsive objects)\n * @default 1\n * If number: adds \"span\" prefix (e.g., 2 → \"span 2\")\n * If string: used directly (e.g., \"span 2\" or \"1 / 3\")\n */\n rowSpan?: number | string | ResponsiveValue<number | string>;\n /** HTML element or React component used to render the Grid item\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Additional class names */\n className?: string;\n /** Content of the Grid item */\n children?: React.ReactNode;\n};\n\nexport type GridItemProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridItemOwnProps>;\n\nconst defaultElement = 'div';\n\nconst formatGridSpan = (\n value: number | string | undefined,\n): string | undefined => {\n if (value === undefined) {\n return undefined;\n }\n\n if (typeof value === 'number') {\n return `span ${value}`;\n }\n\n return value;\n};\n\nexport const GridItem = React.forwardRef(\n <E extends React.ElementType = typeof defaultElement>(\n {\n colSpan,\n rowSpan = 1,\n as,\n className,\n children,\n style,\n ...rest\n }: GridItemProps<E>,\n ref?: React.Ref<Element>,\n ): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n\n const resolvedColSpan = useResponsiveValue(colSpan);\n const resolvedRowSpan = useResponsiveValue(rowSpan);\n\n const itemStyle: React.CSSProperties = {\n ...(resolvedColSpan !== undefined && {\n '--grid-item-column': formatGridSpan(resolvedColSpan),\n }),\n ...(resolvedRowSpan !== undefined && {\n '--grid-item-row': formatGridSpan(resolvedRowSpan),\n }),\n ...style,\n } as React.CSSProperties;\n\n return (\n <Element\n ref={ref}\n className={classNames('eds-layout-grid-item', className)}\n style={itemStyle}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n"],"names":["useResponsiveValue","jsx"],"mappings":";;;;;;;AAiCA,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB,CACrB,UACuB;AACvB,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,QAAQ,KAAK;AAAA,EACtB;AAEA,SAAO;AACT;AAEO,MAAM,WAAW,MAAM;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACgB;AAChB,UAAM,UAA6B,MAAM;AAEzC,UAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,UAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAElD,UAAM,YAAiC;AAAA,MACrC,GAAI,oBAAoB,UAAa;AAAA,QACnC,sBAAsB,eAAe,eAAe;AAAA,MAAA;AAAA,MAEtD,GAAI,oBAAoB,UAAa;AAAA,QACnC,mBAAmB,eAAe,eAAe;AAAA,MAAA;AAAA,MAEnD,GAAG;AAAA,IAAA;AAGL,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,wBAAwB,SAAS;AAAA,QACvD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;;"}
|