@frontify/fondue-components 5.0.0 → 5.1.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/fondue-components10.js +30 -16
- package/dist/fondue-components10.js.map +1 -1
- package/dist/fondue-components12.js +28 -14
- package/dist/fondue-components12.js.map +1 -1
- package/dist/fondue-components16.js +32 -6
- package/dist/fondue-components16.js.map +1 -1
- package/dist/fondue-components22.js.map +1 -1
- package/dist/fondue-components27.js +16 -16
- package/dist/fondue-components27.js.map +1 -1
- package/dist/fondue-components3.js +33 -11
- package/dist/fondue-components3.js.map +1 -1
- package/dist/fondue-components36.js.map +1 -1
- package/dist/fondue-components40.js +10 -10
- package/dist/fondue-components58.js +10 -10
- package/dist/index.d.ts +7 -6
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,22 +1,36 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { propsToCssVariables as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
5
|
-
as:
|
|
6
|
-
"data-test-id":
|
|
7
|
-
children:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { propsToCssVariables as y } from "./fondue-components24.js";
|
|
3
|
+
import m from "./fondue-components41.js";
|
|
4
|
+
const f = ({
|
|
5
|
+
as: a = "div",
|
|
6
|
+
"data-test-id": e = "fondue-flex",
|
|
7
|
+
children: i,
|
|
8
|
+
role: r,
|
|
9
|
+
"aria-label": d,
|
|
10
|
+
"aria-hidden": s,
|
|
11
|
+
"aria-describedby": t,
|
|
12
|
+
"aria-labelledby": l,
|
|
13
|
+
"aria-expanded": o,
|
|
14
|
+
"aria-haspopup": p,
|
|
15
|
+
...b
|
|
16
|
+
}) => /* @__PURE__ */ n(
|
|
17
|
+
a,
|
|
11
18
|
{
|
|
12
|
-
className:
|
|
13
|
-
"data-test-id":
|
|
14
|
-
style:
|
|
15
|
-
|
|
19
|
+
className: m.root,
|
|
20
|
+
"data-test-id": e,
|
|
21
|
+
style: y(b, { justify: "justify-content" }),
|
|
22
|
+
role: r,
|
|
23
|
+
"aria-label": d,
|
|
24
|
+
"aria-hidden": s,
|
|
25
|
+
"aria-describedby": t,
|
|
26
|
+
"aria-labelledby": l,
|
|
27
|
+
"aria-expanded": o,
|
|
28
|
+
"aria-haspopup": p,
|
|
29
|
+
children: i
|
|
16
30
|
}
|
|
17
31
|
);
|
|
18
|
-
|
|
32
|
+
f.displayName = "Flex";
|
|
19
33
|
export {
|
|
20
|
-
|
|
34
|
+
f as Flex
|
|
21
35
|
};
|
|
22
36
|
//# sourceMappingURL=fondue-components10.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components10.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n /**\n * The element to render the Flex component as.\n * @default 'div'\n */\n as?: 'div' | 'span';\n /**\n * The display property.\n * @default 'flex'\n */\n display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n /**\n * The direction of the children.\n * @default 'row'\n */\n direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n /**\n * The alignment of the children.\n */\n align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n /**\n * The justification of the children.\n */\n justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n /**\n * The wrap property.\n */\n wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n /**\n * The gap between the children.\n */\n gap?: Responsive<SizeValue>;\n /**\n * The horizontal gap between the children.\n */\n gapX?: Responsive<SizeValue>;\n /**\n * The vertical gap between the children.\n */\n gapY?: Responsive<SizeValue>;\n\n children?: ReactNode;\n 'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = ({\n as: Component = 'div',\n 'data-test-id': dataTestId = 'fondue-flex',\n children,\n ...props\n}: FlexProps) => {\n return (\n <Component\n className={styles.root}\n data-test-id={dataTestId}\n style={propsToCssVariables(props, { justify: 'justify-content' })}\n >\n {children}\n </Component>\n );\n};\nFlex.displayName = 'Flex';\n"],"names":["Flex","Component","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAuDO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,
|
|
1
|
+
{"version":3,"file":"fondue-components10.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n /**\n * The element to render the Flex component as.\n * @default 'div'\n */\n as?: 'div' | 'span';\n /**\n * The display property.\n * @default 'flex'\n */\n display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n /**\n * The direction of the children.\n * @default 'row'\n */\n direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n /**\n * The alignment of the children.\n */\n align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n /**\n * The justification of the children.\n */\n justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n /**\n * The wrap property.\n */\n wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n /**\n * The gap between the children.\n */\n gap?: Responsive<SizeValue>;\n /**\n * The horizontal gap between the children.\n */\n gapX?: Responsive<SizeValue>;\n /**\n * The vertical gap between the children.\n */\n gapY?: Responsive<SizeValue>;\n\n children?: ReactNode;\n 'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = ({\n as: Component = 'div',\n 'data-test-id': dataTestId = 'fondue-flex',\n children,\n role,\n 'aria-label': ariaLabel,\n 'aria-hidden': ariaHidden,\n 'aria-describedby': ariaDescribedBy,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n ...props\n}: FlexProps) => {\n return (\n <Component\n className={styles.root}\n data-test-id={dataTestId}\n style={propsToCssVariables(props, { justify: 'justify-content' })}\n role={role}\n aria-label={ariaLabel}\n aria-hidden={ariaHidden}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n >\n {children}\n </Component>\n );\n};\nFlex.displayName = 'Flex';\n"],"names":["Flex","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAuDO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,eAAeC;AAAA,EACf,oBAAoBC;AAAA,EACpB,mBAAmBC;AAAA,EACnB,iBAAiBC;AAAA,EACjB,iBAAiBC;AAAA,EACjB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACX;AAAA,EAAA;AAAA,IACG,WAAWY,EAAO;AAAA,IAClB,gBAAcX;AAAA,IACd,OAAOY,EAAoBH,GAAO,EAAE,SAAS,mBAAmB;AAAA,IAChE,MAAAP;AAAA,IACA,cAAYC;AAAA,IACZ,eAAaC;AAAA,IACb,oBAAkBC;AAAA,IAClB,mBAAiBC;AAAA,IACjB,iBAAeC;AAAA,IACf,iBAAeC;AAAA,IAEd,UAAAP;AAAA,EAAA;AACL;AAGRH,EAAK,cAAc;"}
|
|
@@ -1,22 +1,36 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { propsToCssVariables as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
5
|
-
as:
|
|
6
|
-
"data-test-id":
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { propsToCssVariables as y } from "./fondue-components24.js";
|
|
3
|
+
import n from "./fondue-components43.js";
|
|
4
|
+
const f = ({
|
|
5
|
+
as: a = "div",
|
|
6
|
+
"data-test-id": i = "fondue-grid",
|
|
7
7
|
children: r,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
s,
|
|
8
|
+
role: e,
|
|
9
|
+
"aria-label": d,
|
|
10
|
+
"aria-hidden": s,
|
|
11
|
+
"aria-describedby": t,
|
|
12
|
+
"aria-labelledby": l,
|
|
13
|
+
"aria-expanded": o,
|
|
14
|
+
"aria-haspopup": p,
|
|
15
|
+
...b
|
|
16
|
+
}) => /* @__PURE__ */ m(
|
|
17
|
+
a,
|
|
11
18
|
{
|
|
12
|
-
className:
|
|
13
|
-
"data-test-id":
|
|
14
|
-
style:
|
|
19
|
+
className: n.root,
|
|
20
|
+
"data-test-id": i,
|
|
21
|
+
style: y(b, { justify: "justify-items" }),
|
|
22
|
+
role: e,
|
|
23
|
+
"aria-label": d,
|
|
24
|
+
"aria-hidden": s,
|
|
25
|
+
"aria-describedby": t,
|
|
26
|
+
"aria-labelledby": l,
|
|
27
|
+
"aria-expanded": o,
|
|
28
|
+
"aria-haspopup": p,
|
|
15
29
|
children: r
|
|
16
30
|
}
|
|
17
31
|
);
|
|
18
|
-
|
|
32
|
+
f.displayName = "Grid";
|
|
19
33
|
export {
|
|
20
|
-
|
|
34
|
+
f as Grid
|
|
21
35
|
};
|
|
22
36
|
//# sourceMappingURL=fondue-components12.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components12.js","sources":["../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/grid.module.scss';\n\nexport type GridProps = LayoutComponentProps & {\n /**\n * The element to render the Grid component as.\n * @default 'div'\n */\n as?: 'div' | 'span';\n\n /**\n * The display property.\n * @default 'grid'\n */\n display?: 'none' | 'grid' | 'inline-grid';\n /**\n * The columns property.\n */\n columns?: Responsive<string | number>;\n /**\n * The rows property.\n */\n rows?: Responsive<string | number>;\n /**\n * The flow property.\n */\n flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;\n /**\n * The alignment of the children.\n */\n align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;\n /**\n * The justification of the children.\n */\n justify?: Responsive<'start' | 'center' | 'end' | 'between'>;\n /**\n * The gap between the children.\n */\n gap?: Responsive<SizeValue>;\n /**\n * The horizontal gap between the children.\n */\n gapX?: Responsive<SizeValue>;\n /**\n * The vertical gap between the children.\n */\n gapY?: Responsive<SizeValue>;\n\n children?: ReactNode;\n 'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Grid = ({\n as: Component = 'div',\n 'data-test-id': dataTestId = 'fondue-grid',\n children,\n ...props\n}: GridProps) => {\n return (\n <Component\n className={styles.root}\n data-test-id={dataTestId}\n style={propsToCssVariables(props, { justify: 'justify-items' })}\n >\n {children}\n </Component>\n );\n};\nGrid.displayName = 'Grid';\n"],"names":["Grid","Component","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AA2DO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,
|
|
1
|
+
{"version":3,"file":"fondue-components12.js","sources":["../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/grid.module.scss';\n\nexport type GridProps = LayoutComponentProps & {\n /**\n * The element to render the Grid component as.\n * @default 'div'\n */\n as?: 'div' | 'span';\n\n /**\n * The display property.\n * @default 'grid'\n */\n display?: 'none' | 'grid' | 'inline-grid';\n /**\n * The columns property.\n */\n columns?: Responsive<string | number>;\n /**\n * The rows property.\n */\n rows?: Responsive<string | number>;\n /**\n * The flow property.\n */\n flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;\n /**\n * The alignment of the children.\n */\n align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;\n /**\n * The justification of the children.\n */\n justify?: Responsive<'start' | 'center' | 'end' | 'between'>;\n /**\n * The gap between the children.\n */\n gap?: Responsive<SizeValue>;\n /**\n * The horizontal gap between the children.\n */\n gapX?: Responsive<SizeValue>;\n /**\n * The vertical gap between the children.\n */\n gapY?: Responsive<SizeValue>;\n\n children?: ReactNode;\n 'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Grid = ({\n as: Component = 'div',\n 'data-test-id': dataTestId = 'fondue-grid',\n children,\n role,\n 'aria-label': ariaLabel,\n 'aria-hidden': ariaHidden,\n 'aria-describedby': ariaDescribedBy,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n ...props\n}: GridProps) => {\n return (\n <Component\n className={styles.root}\n data-test-id={dataTestId}\n style={propsToCssVariables(props, { justify: 'justify-items' })}\n role={role}\n aria-label={ariaLabel}\n aria-hidden={ariaHidden}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n >\n {children}\n </Component>\n );\n};\nGrid.displayName = 'Grid';\n"],"names":["Grid","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","jsx","styles","propsToCssVariables"],"mappings":";;;AA2DO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,eAAeC;AAAA,EACf,oBAAoBC;AAAA,EACpB,mBAAmBC;AAAA,EACnB,iBAAiBC;AAAA,EACjB,iBAAiBC;AAAA,EACjB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACX;AAAA,EAAA;AAAA,IACG,WAAWY,EAAO;AAAA,IAClB,gBAAcX;AAAA,IACd,OAAOY,EAAoBH,GAAO,EAAE,SAAS,iBAAiB;AAAA,IAC9D,MAAAP;AAAA,IACA,cAAYC;AAAA,IACZ,eAAaC;AAAA,IACb,oBAAkBC;AAAA,IAClB,mBAAiBC;AAAA,IACjB,iBAAeC;AAAA,IACf,iBAAeC;AAAA,IAEd,UAAAP;AAAA,EAAA;AACL;AAGRH,EAAK,cAAc;"}
|
|
@@ -1,9 +1,35 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { propsToCssVariables as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
5
|
-
a
|
|
1
|
+
import { jsx as b } from "react/jsx-runtime";
|
|
2
|
+
import { propsToCssVariables as n } from "./fondue-components24.js";
|
|
3
|
+
import c from "./fondue-components46.js";
|
|
4
|
+
const m = ({
|
|
5
|
+
"data-test-id": a = "fondue-section",
|
|
6
|
+
children: e,
|
|
7
|
+
role: i,
|
|
8
|
+
"aria-label": r,
|
|
9
|
+
"aria-hidden": d,
|
|
10
|
+
"aria-describedby": s,
|
|
11
|
+
"aria-labelledby": o,
|
|
12
|
+
"aria-expanded": t,
|
|
13
|
+
"aria-haspopup": l,
|
|
14
|
+
...p
|
|
15
|
+
}) => /* @__PURE__ */ b(
|
|
16
|
+
"section",
|
|
17
|
+
{
|
|
18
|
+
className: c.root,
|
|
19
|
+
"data-test-id": a,
|
|
20
|
+
style: n(p),
|
|
21
|
+
role: i,
|
|
22
|
+
"aria-label": r,
|
|
23
|
+
"aria-hidden": d,
|
|
24
|
+
"aria-describedby": s,
|
|
25
|
+
"aria-labelledby": o,
|
|
26
|
+
"aria-expanded": t,
|
|
27
|
+
"aria-haspopup": l,
|
|
28
|
+
children: e
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
m.displayName = "Section";
|
|
6
32
|
export {
|
|
7
|
-
|
|
33
|
+
m as Section
|
|
8
34
|
};
|
|
9
35
|
//# sourceMappingURL=fondue-components16.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components16.js","sources":["../src/components/Section/Section.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/section.module.scss';\n\nexport type SectionProps = LayoutComponentProps & {\n /**\n * The display property.\n * @default 'block'\n */\n display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n children?: ReactNode;\n 'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Section = ({
|
|
1
|
+
{"version":3,"file":"fondue-components16.js","sources":["../src/components/Section/Section.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/section.module.scss';\n\nexport type SectionProps = LayoutComponentProps & {\n /**\n * The display property.\n * @default 'block'\n */\n display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n children?: ReactNode;\n 'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Section = ({\n 'data-test-id': dataTestId = 'fondue-section',\n children,\n role,\n 'aria-label': ariaLabel,\n 'aria-hidden': ariaHidden,\n 'aria-describedby': ariaDescribedBy,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n ...props\n}: SectionProps) => {\n return (\n <section\n className={styles.root}\n data-test-id={dataTestId}\n style={propsToCssVariables(props)}\n role={role}\n aria-label={ariaLabel}\n aria-hidden={ariaHidden}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n >\n {children}\n </section>\n );\n};\nSection.displayName = 'Section';\n"],"names":["Section","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAqBO,MAAMA,IAAU,CAAC;AAAA,EACpB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,eAAeC;AAAA,EACf,oBAAoBC;AAAA,EACpB,mBAAmBC;AAAA,EACnB,iBAAiBC;AAAA,EACjB,iBAAiBC;AAAA,EACjB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,gBAAcX;AAAA,IACd,OAAOY,EAAoBH,CAAK;AAAA,IAChC,MAAAP;AAAA,IACA,cAAYC;AAAA,IACZ,eAAaC;AAAA,IACb,oBAAkBC;AAAA,IAClB,mBAAiBC;AAAA,IACjB,iBAAeC;AAAA,IACf,iBAAeC;AAAA,IAEd,UAAAP;AAAA,EAAA;AACL;AAGRF,EAAQ,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components22.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n forwardRef,\n useRef,\n type ChangeEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type ReactNode,\n type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/text.module.scss';\n\nexport type TextInputProps = {\n id?: string;\n name?: string;\n /**\n * The place where the input slots are placed\n */\n children?: ReactNode;\n /**\n * The default value of the text input\n * Used for uncontrolled components\n */\n defaultValue?: string | number;\n /**\n * The controlled value of the text input\n */\n value?: string | number;\n /**\n * Type of the text input\n * @default \"text\"\n */\n type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n /**\n * The placeholder in the text input\n */\n placeholder?: string;\n /**\n * Disable the text input\n * @default false\n */\n disabled?: boolean;\n /**\n * Make the text input required in form\n * @default false\n */\n required?: boolean;\n /**\n * Make the text input spell-checkable\n * @default true\n */\n spellCheck?: boolean;\n /**\n * Make the text input read-only\n * @default false\n */\n readOnly?: boolean;\n /**\n * Set the type of input so autocomplete can help the user\n * @default \"on\"\n */\n autoComplete?: string;\n /**\n * The maximum length of the text input\n */\n maxLength?: number;\n /**\n * Status of the text input\n * @default \"neutral\"\n */\n status?: 'neutral' | 'success' | 'error' | 'loading';\n className?: string;\n /**\n * Event handler called when the text input value changes\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when the text input is blurred\n */\n onBlur?: (event:
|
|
1
|
+
{"version":3,"file":"fondue-components22.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n type FocusEvent,\n forwardRef,\n useRef,\n type ChangeEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type ReactNode,\n type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/text.module.scss';\n\nexport type TextInputProps = {\n id?: string;\n name?: string;\n /**\n * The place where the input slots are placed\n */\n children?: ReactNode;\n /**\n * The default value of the text input\n * Used for uncontrolled components\n */\n defaultValue?: string | number;\n /**\n * The controlled value of the text input\n */\n value?: string | number;\n /**\n * Type of the text input\n * @default \"text\"\n */\n type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n /**\n * The placeholder in the text input\n */\n placeholder?: string;\n /**\n * Disable the text input\n * @default false\n */\n disabled?: boolean;\n /**\n * Make the text input required in form\n * @default false\n */\n required?: boolean;\n /**\n * Make the text input spell-checkable\n * @default true\n */\n spellCheck?: boolean;\n /**\n * Make the text input read-only\n * @default false\n */\n readOnly?: boolean;\n /**\n * Set the type of input so autocomplete can help the user\n * @default \"on\"\n */\n autoComplete?: string;\n /**\n * The maximum length of the text input\n */\n maxLength?: number;\n /**\n * Status of the text input\n * @default \"neutral\"\n */\n status?: 'neutral' | 'success' | 'error' | 'loading';\n className?: string;\n /**\n * Event handler called when the text input value changes\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when the text input is blurred\n */\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when the text input is focused\n */\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when a key is pressed\n */\n onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when a key is released\n */\n onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when the text inside of text input is selected\n */\n onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n 'data-test-id'?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n 'aria-describedby'?: string;\n};\n\nexport const TextFieldRoot = (\n {\n children,\n className,\n status = 'neutral',\n 'data-test-id': dataTestId = 'fondue-text-input',\n ...inputProps\n }: TextInputProps,\n ref: ForwardedRef<HTMLInputElement>,\n) => {\n const wasClicked = useRef(false);\n\n return (\n <div className={cn(styles.root, className)} data-status={status} data-test-id={dataTestId}>\n {status === 'loading' ? (\n <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />\n ) : null}\n <input\n onMouseDown={(mouseEvent) => {\n wasClicked.current = true;\n mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n }}\n type=\"text\"\n {...inputProps}\n onFocus={(focusEvent) => {\n if (!wasClicked.current) {\n focusEvent.target.dataset.showFocusRing = 'true';\n }\n inputProps.onFocus?.(focusEvent);\n }}\n onBlur={(blurEvent) => {\n blurEvent.target.dataset.showFocusRing = 'false';\n wasClicked.current = false;\n inputProps.onBlur?.(blurEvent);\n }}\n ref={ref}\n className={styles.input}\n aria-invalid={status === 'error'}\n />\n\n {status === 'success' ? (\n <IconCheckMark size={16} className={styles.iconSuccess} data-test-id={`${dataTestId}-success-icon`} />\n ) : null}\n\n {status === 'error' ? (\n <IconExclamationMarkTriangle\n size={16}\n className={styles.iconError}\n data-test-id={`${dataTestId}-error-icon`}\n />\n ) : null}\n\n {children}\n </div>\n );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n children: ReactNode;\n name?: 'left' | 'right';\n className?: string;\n};\n\nexport const TextFieldSlot = (\n { name, className, ...slotProps }: TextFieldSlotProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div\n data-slot={true}\n data-name={name}\n {...slotProps}\n ref={forwardedRef}\n className={cn(styles.slot, className)}\n />\n );\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n Root: typeof ForwardedRefTextFieldRoot;\n Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA4GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAaC,EAAO,EAAK;AAG3B,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,EAAO,MAAMT,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAWD,MAAA,YACP,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGP,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,aAAa,CAACC,MAAe;AACzB,UAAAN,EAAW,UAAU,IACVM,EAAA,cAAc,QAAQ,gBAAgB;AAAA,QACrD;AAAA,QACA,MAAK;AAAA,QACJ,GAAGR;AAAA,QACJ,SAAS,CAACS,MAAe;;AACjB,UAACP,EAAW,YACDO,EAAA,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,QACzB;AAAA,QACA,QAAQ,CAACE,MAAc;;AACT,UAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,QACxB;AAAA,QACA,KAAAV;AAAA,QACA,WAAWK,EAAO;AAAA,QAClB,gBAAcR,MAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,IAECA,MAAW,YACP,gBAAAS,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGP,CAAU,gBAAiB,CAAA,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAS;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGP,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EAAA,GACL;AAER;AACAD,EAAc,cAAc;AAQf,MAAAmB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAlB,GAAW,GAAGmB,KACtBC,MAGI,gBAAAV;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWQ;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWZ,EAAGC,EAAO,MAAMT,CAAS;AAAA,EAAA;AACxC;AAIRiB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6CxB,CAAa,GACtFyB,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { FOCUS_OUTLINE as t } from "./fondue-components61.js";
|
|
2
2
|
import { sv as e } from "./fondue-components26.js";
|
|
3
3
|
const o = e({
|
|
4
|
-
base: `tw-group tw-
|
|
4
|
+
base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ${t}`,
|
|
5
5
|
variants: {
|
|
6
6
|
disabled: {
|
|
7
|
-
true: "tw-not-allowed tw-pointer-events-none tw-
|
|
7
|
+
true: "tw-not-allowed tw-pointer-events-none tw-text-box-disabled-inverse tw-bg-box-disabled"
|
|
8
8
|
},
|
|
9
9
|
rounding: {
|
|
10
10
|
medium: "tw-rounded",
|
|
@@ -40,79 +40,79 @@ const o = e({
|
|
|
40
40
|
disabled: !1,
|
|
41
41
|
variant: "default",
|
|
42
42
|
emphasis: "default",
|
|
43
|
-
class: "tw-bg-button-background
|
|
43
|
+
class: "tw-bg-button-background hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
46
|
disabled: !1,
|
|
47
47
|
variant: "default",
|
|
48
48
|
emphasis: "weak",
|
|
49
|
-
class: "
|
|
49
|
+
class: "hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
52
|
disabled: !1,
|
|
53
53
|
variant: "default",
|
|
54
54
|
emphasis: "strong",
|
|
55
|
-
class: "tw-bg-button-strong-background
|
|
55
|
+
class: "tw-bg-button-strong-background hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed"
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
disabled: !1,
|
|
59
59
|
variant: "positive",
|
|
60
60
|
emphasis: "default",
|
|
61
|
-
class: "tw-bg-button-positive-background
|
|
61
|
+
class: "tw-bg-button-positive-background hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
disabled: !1,
|
|
65
65
|
variant: "positive",
|
|
66
66
|
emphasis: "weak",
|
|
67
|
-
class: "
|
|
67
|
+
class: "hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
|
|
68
68
|
},
|
|
69
69
|
{
|
|
70
70
|
disabled: !1,
|
|
71
71
|
variant: "positive",
|
|
72
72
|
emphasis: "strong",
|
|
73
|
-
class: "tw-bg-button-strong-positive-background
|
|
73
|
+
class: "tw-bg-button-strong-positive-background hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed"
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
disabled: !1,
|
|
77
77
|
variant: "negative",
|
|
78
78
|
emphasis: "default",
|
|
79
|
-
class: "tw-bg-button-negative-background
|
|
79
|
+
class: "tw-bg-button-negative-background hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
|
|
80
80
|
},
|
|
81
81
|
{
|
|
82
82
|
disabled: !1,
|
|
83
83
|
variant: "negative",
|
|
84
84
|
emphasis: "weak",
|
|
85
|
-
class: "
|
|
85
|
+
class: "hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
disabled: !1,
|
|
89
89
|
variant: "negative",
|
|
90
90
|
emphasis: "strong",
|
|
91
|
-
class: "tw-bg-button-strong-negative-background
|
|
91
|
+
class: "tw-bg-button-strong-negative-background hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed"
|
|
92
92
|
},
|
|
93
93
|
{
|
|
94
94
|
disabled: !1,
|
|
95
95
|
variant: "danger",
|
|
96
96
|
emphasis: "default",
|
|
97
|
-
class: "tw-bg-button-background
|
|
97
|
+
class: "tw-bg-button-background hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
100
|
disabled: !1,
|
|
101
101
|
variant: "danger",
|
|
102
102
|
emphasis: "weak",
|
|
103
|
-
class: "
|
|
103
|
+
class: "hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
104
104
|
},
|
|
105
105
|
{
|
|
106
106
|
disabled: !1,
|
|
107
107
|
variant: "danger",
|
|
108
108
|
emphasis: "strong",
|
|
109
|
-
class: "tw-bg-button-danger-background
|
|
109
|
+
class: "tw-bg-button-danger-background hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed"
|
|
110
110
|
},
|
|
111
111
|
{
|
|
112
112
|
disabled: !1,
|
|
113
113
|
variant: "loud",
|
|
114
114
|
emphasis: "default",
|
|
115
|
-
class: "tw-bg-box-selected
|
|
115
|
+
class: "tw-bg-box-selected hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
|
|
116
116
|
},
|
|
117
117
|
{
|
|
118
118
|
disabled: !1,
|
|
@@ -124,7 +124,7 @@ const o = e({
|
|
|
124
124
|
disabled: !1,
|
|
125
125
|
variant: "loud",
|
|
126
126
|
emphasis: "strong",
|
|
127
|
-
class: "tw-bg-box-selected-strong
|
|
127
|
+
class: "tw-bg-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
|
|
128
128
|
},
|
|
129
129
|
{
|
|
130
130
|
aspect: "default",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components27.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n base:\n 'tw-group tw-
|
|
1
|
+
{"version":3,"file":"fondue-components27.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n base:\n 'tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ' +\n `${FOCUS_OUTLINE}`,\n variants: {\n disabled: {\n true: 'tw-not-allowed tw-pointer-events-none tw-text-box-disabled-inverse tw-bg-box-disabled',\n },\n rounding: {\n medium: 'tw-rounded',\n full: 'tw-rounded-full',\n },\n size: {\n small: 'tw-h-6 tw-text-body-small',\n medium: 'tw-h-9 tw-text-body-medium',\n large: 'tw-h-12 tw-text-body-large',\n },\n aspect: {\n square: 'tw-aspect-square tw-px-0',\n default: '',\n },\n hugWidth: {\n false: 'tw-w-full',\n },\n emphasis: {\n default: '',\n weak: '',\n strong: '',\n },\n variant: {\n default: '',\n positive: '',\n negative: '',\n danger: '',\n loud: '',\n },\n },\n compoundVariants: [\n {\n disabled: false,\n variant: 'default',\n emphasis: 'default',\n class:\n 'tw-bg-button-background ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n disabled: false,\n variant: 'default',\n emphasis: 'weak',\n class: 'hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed',\n },\n {\n disabled: false,\n variant: 'default',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-background ' +\n 'hover:tw-bg-button-strong-background-hover ' +\n 'active:tw-bg-button-strong-background-pressed',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'default',\n class:\n 'tw-bg-button-positive-background ' +\n 'hover:tw-bg-button-positive-background-hover ' +\n 'active:tw-bg-button-positive-background-pressed',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'weak',\n class: 'hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-positive-background ' +\n 'hover:tw-bg-button-strong-positive-background-hover ' +\n 'active:tw-bg-button-strong-positive-background-pressed',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'default',\n class:\n 'tw-bg-button-negative-background ' +\n 'hover:tw-bg-button-negative-background-hover ' +\n 'active:tw-bg-button-negative-background-pressed',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'weak',\n class: 'hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-negative-background ' +\n 'hover:tw-bg-button-strong-negative-background-hover ' +\n 'active:tw-bg-button-strong-negative-background-pressed',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'default',\n class:\n 'tw-bg-button-background ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'weak',\n class: 'hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'strong',\n class:\n 'tw-bg-button-danger-background ' +\n 'hover:tw-bg-button-danger-background-hover ' +\n 'active:tw-bg-button-danger-background-pressed',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'default',\n class: 'tw-bg-box-selected hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'weak',\n class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'strong',\n class:\n 'tw-bg-box-selected-strong ' +\n 'hover:tw-bg-box-selected-strong-hover ' +\n 'active:tw-bg-box-selected-strong-pressed ',\n },\n {\n aspect: 'default',\n size: 'small',\n class: 'tw-px-2',\n },\n {\n aspect: 'default',\n size: 'medium',\n class: 'tw-px-4',\n },\n {\n aspect: 'default',\n size: 'large',\n class: 'tw-px-6',\n },\n ],\n defaultVariants: {\n variant: 'default',\n emphasis: 'strong',\n size: 'medium',\n rounding: 'medium',\n hugWidth: true,\n aspect: 'default',\n disabled: false,\n },\n});\n"],"names":["buttonStyles","sv","FOCUS_OUTLINE"],"mappings":";;AAKO,MAAMA,IAAeC,EAAG;AAAA,EAC3B,MACI,qIACGC,CAAa;AAAA,EACpB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACJ,QAAQ;AAAA,MACR,SAAS;AAAA,IACb;AAAA,IACA,UAAU;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EAEd;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAElB,CAAC;"}
|
|
@@ -1,14 +1,36 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { propsToCssVariables as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
5
|
-
as:
|
|
6
|
-
"data-test-id":
|
|
7
|
-
children:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { propsToCssVariables as n } from "./fondue-components24.js";
|
|
3
|
+
import x from "./fondue-components25.js";
|
|
4
|
+
const y = ({
|
|
5
|
+
as: a = "div",
|
|
6
|
+
"data-test-id": e = "fondue-box",
|
|
7
|
+
children: r,
|
|
8
|
+
role: i,
|
|
9
|
+
"aria-label": d,
|
|
10
|
+
"aria-hidden": s,
|
|
11
|
+
"aria-describedby": o,
|
|
12
|
+
"aria-labelledby": l,
|
|
13
|
+
"aria-expanded": p,
|
|
14
|
+
"aria-haspopup": t,
|
|
15
|
+
...b
|
|
16
|
+
}) => /* @__PURE__ */ m(
|
|
17
|
+
a,
|
|
18
|
+
{
|
|
19
|
+
className: x.root,
|
|
20
|
+
"data-test-id": e,
|
|
21
|
+
style: n(b),
|
|
22
|
+
role: i,
|
|
23
|
+
"aria-label": d,
|
|
24
|
+
"aria-hidden": s,
|
|
25
|
+
"aria-describedby": o,
|
|
26
|
+
"aria-labelledby": l,
|
|
27
|
+
"aria-expanded": p,
|
|
28
|
+
"aria-haspopup": t,
|
|
29
|
+
children: r
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
y.displayName = "Box";
|
|
11
33
|
export {
|
|
12
|
-
|
|
34
|
+
y as Box
|
|
13
35
|
};
|
|
14
36
|
//# sourceMappingURL=fondue-components3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components3.js","sources":["../src/components/Box/Box.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/box.module.scss';\n\nexport type BoxProps = LayoutComponentProps & {\n /**\n * The element to render the Box component as.\n * @default 'div'\n */\n as?: 'div' | 'span';\n /**\n * The display property.\n * @default 'block'\n */\n display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n children?: ReactNode;\n 'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Box = ({\n as: Component = 'div',\n 'data-test-id': dataTestId = 'fondue-box',\n children,\n ...props\n}: BoxProps) => {\n return (\n <Component
|
|
1
|
+
{"version":3,"file":"fondue-components3.js","sources":["../src/components/Box/Box.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/box.module.scss';\n\nexport type BoxProps = LayoutComponentProps & {\n /**\n * The element to render the Box component as.\n * @default 'div'\n */\n as?: 'div' | 'span';\n /**\n * The display property.\n * @default 'block'\n */\n display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n children?: ReactNode;\n 'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Box = ({\n as: Component = 'div',\n 'data-test-id': dataTestId = 'fondue-box',\n children,\n role,\n 'aria-label': ariaLabel,\n 'aria-hidden': ariaHidden,\n 'aria-describedby': ariaDescribedBy,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-expanded': ariaExpanded,\n 'aria-haspopup': ariaHasPopup,\n ...props\n}: BoxProps) => {\n return (\n <Component\n className={styles.root}\n data-test-id={dataTestId}\n style={propsToCssVariables(props)}\n role={role}\n aria-label={ariaLabel}\n aria-hidden={ariaHidden}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n >\n {children}\n </Component>\n );\n};\nBox.displayName = 'Box';\n"],"names":["Box","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","jsx","styles","propsToCssVariables"],"mappings":";;;AA0BO,MAAMA,IAAM,CAAC;AAAA,EAChB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,eAAeC;AAAA,EACf,oBAAoBC;AAAA,EACpB,mBAAmBC;AAAA,EACnB,iBAAiBC;AAAA,EACjB,iBAAiBC;AAAA,EACjB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACX;AAAA,EAAA;AAAA,IACG,WAAWY,EAAO;AAAA,IAClB,gBAAcX;AAAA,IACd,OAAOY,EAAoBH,CAAK;AAAA,IAChC,MAAAP;AAAA,IACA,cAAYC;AAAA,IACZ,eAAaC;AAAA,IACb,oBAAkBC;AAAA,IAClB,mBAAiBC;AAAA,IACjB,iBAAeC;AAAA,IACf,iBAAeC;AAAA,IAEd,UAAAP;AAAA,EAAA;AACL;AAGRH,EAAI,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components36.js","sources":["../src/utilities/domUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FocusEvent, type MouseEvent as ReactMouseEvent, type ForwardedRef, type RefObject } from 'react';\n\nexport const MAX_HEIGHT_MARGIN = 8;\n\n/**\n * Sets the maximum height for a dialog element based on its position on the viewport.\n * The function calculates the space below the dialog up to the bottom of the viewport window,\n * subtracting a default margin, and sets this value as the max-height style of the dialog.\n *\n * @param {HTMLElement} dialog - The dialog element whose maximum height is to be set.\n *\n * @example\n * // Suppose you have a dialog element with id 'my-dialog'.\n * const dialogElement = myDialogRef.current || document.getElementById('my-dialog');\n * // Setting its max height relative to its current position and the viewport's dimensions.\n * setMaxHeightToAvailableSpace(dialogElement);\n */\nexport function setMaxHeightToAvailableSpace(dialog: HTMLElement) {\n if (!window) {\n throw new Error('Window object not found, this method should be used in a browser environment');\n }\n\n dialog.style.maxHeight = '';\n\n const { top, bottom } = dialog.getBoundingClientRect();\n if (top - MAX_HEIGHT_MARGIN < 0) {\n // if the dialog is overflowing to the top\n dialog.style.maxHeight = `${bottom - MAX_HEIGHT_MARGIN}px`;\n } else if (bottom + MAX_HEIGHT_MARGIN > window.innerHeight) {\n // if the dialog is overflowing to the bottom\n dialog.style.maxHeight = `${window.innerHeight - top - MAX_HEIGHT_MARGIN}px`;\n }\n}\n\n/**\n * Checks if a specified HTML element is visible within the viewport.\n * Visibility is determined by several factors:\n * - The element must have non-zero dimensions.\n * - The element's computed style must not be `display: none`, `visibility: hidden`, or `opacity: 0`.\n * - The element must be within the bounds of the current viewport.\n *\n * @param {HTMLElement} element - The HTML element to check for visibility.\n * @returns {boolean} Returns true if the element is visible according to the criteria specified, otherwise returns false.\n */\nexport function isElementVisible(element: HTMLElement) {\n const rect = element.getBoundingClientRect();\n const hasSize = rect.width > 0 && rect.height > 0;\n\n const style = window.getComputedStyle(element);\n const isVisibleStyle = style.display !== 'none' && style.visibility !== 'hidden' && parseFloat(style.opacity) !== 0;\n\n // Check if the element is within the viewport\n const isInViewport =\n rect.top < window.innerHeight && rect.left < window.innerWidth && rect.bottom > 0 && rect.right > 0;\n\n return hasSize && isVisibleStyle && isInViewport;\n}\n\n/**\n * Assigns a local DOM ref to a forwarded ref.\n *\n * @param {RefObject<HTMLDivElement>} localRef - The local React reference to an HTMLDivElement.\n * @param {ForwardedRef<HTMLDivElement>} forwardedRef - The ref forwarded from a parent component.\n */\nexport function syncRefs(localRef: RefObject<
|
|
1
|
+
{"version":3,"file":"fondue-components36.js","sources":["../src/utilities/domUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FocusEvent, type MouseEvent as ReactMouseEvent, type ForwardedRef, type RefObject } from 'react';\n\nexport const MAX_HEIGHT_MARGIN = 8;\n\n/**\n * Sets the maximum height for a dialog element based on its position on the viewport.\n * The function calculates the space below the dialog up to the bottom of the viewport window,\n * subtracting a default margin, and sets this value as the max-height style of the dialog.\n *\n * @param {HTMLElement} dialog - The dialog element whose maximum height is to be set.\n *\n * @example\n * // Suppose you have a dialog element with id 'my-dialog'.\n * const dialogElement = myDialogRef.current || document.getElementById('my-dialog');\n * // Setting its max height relative to its current position and the viewport's dimensions.\n * setMaxHeightToAvailableSpace(dialogElement);\n */\nexport function setMaxHeightToAvailableSpace(dialog: HTMLElement) {\n if (!window) {\n throw new Error('Window object not found, this method should be used in a browser environment');\n }\n\n dialog.style.maxHeight = '';\n\n const { top, bottom } = dialog.getBoundingClientRect();\n if (top - MAX_HEIGHT_MARGIN < 0) {\n // if the dialog is overflowing to the top\n dialog.style.maxHeight = `${bottom - MAX_HEIGHT_MARGIN}px`;\n } else if (bottom + MAX_HEIGHT_MARGIN > window.innerHeight) {\n // if the dialog is overflowing to the bottom\n dialog.style.maxHeight = `${window.innerHeight - top - MAX_HEIGHT_MARGIN}px`;\n }\n}\n\n/**\n * Checks if a specified HTML element is visible within the viewport.\n * Visibility is determined by several factors:\n * - The element must have non-zero dimensions.\n * - The element's computed style must not be `display: none`, `visibility: hidden`, or `opacity: 0`.\n * - The element must be within the bounds of the current viewport.\n *\n * @param {HTMLElement} element - The HTML element to check for visibility.\n * @returns {boolean} Returns true if the element is visible according to the criteria specified, otherwise returns false.\n */\nexport function isElementVisible(element: HTMLElement) {\n const rect = element.getBoundingClientRect();\n const hasSize = rect.width > 0 && rect.height > 0;\n\n const style = window.getComputedStyle(element);\n const isVisibleStyle = style.display !== 'none' && style.visibility !== 'hidden' && parseFloat(style.opacity) !== 0;\n\n // Check if the element is within the viewport\n const isInViewport =\n rect.top < window.innerHeight && rect.left < window.innerWidth && rect.bottom > 0 && rect.right > 0;\n\n return hasSize && isVisibleStyle && isInViewport;\n}\n\n/**\n * Assigns a local DOM ref to a forwarded ref.\n *\n * @param {RefObject<HTMLDivElement>} localRef - The local React reference to an HTMLDivElement.\n * @param {ForwardedRef<HTMLDivElement>} forwardedRef - The ref forwarded from a parent component.\n */\nexport function syncRefs<TElement = HTMLElement>(localRef: RefObject<TElement>, forwardedRef: ForwardedRef<TElement>) {\n if (!forwardedRef) {\n return;\n }\n\n if (typeof forwardedRef === 'function') {\n forwardedRef(localRef.current);\n } else if (forwardedRef && 'current' in forwardedRef) {\n forwardedRef.current = localRef.current;\n }\n}\n\n/**\n * Sets the 'autoFocusVisible' data attribute to 'false' on the current target of a mouse event.\n * This function is typically used to indicate that an element has been interacted with via mouse,\n * which should prevent the focus ring from being displayed when the element receives focus.\n *\n * @param mouseEvent - The mouse event object.\n */\nexport function addAutoFocusAttribute(mouseEvent: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n mouseEvent.currentTarget.dataset.autoFocusVisible = 'false';\n}\n\n/**\n * Manages the focus ring visibility based on the previous focus state and the current focus event.\n * This function sets the 'showFocusRing' data attribute on the target element and updates the\n * 'autoFocusVisible' data attribute on the previously focused element.\n *\n * ! This function should be used in conjunction with the 'addAutoFocusAttribute' function and the autoFocusVisible data autoFocusTrigger.\n *\n * @param event - The focus event object.\n */\nexport function addShowFocusRing(event: FocusEvent<HTMLDivElement, HTMLElement>) {\n const triggerElement = event.relatedTarget;\n\n if (!triggerElement?.dataset.autoFocusTrigger) {\n return;\n }\n\n if (triggerElement.dataset.autoFocusVisible === 'true') {\n event.target.dataset.showFocusRing = 'true';\n } else {\n event.target.dataset.showFocusRing = 'false';\n }\n\n triggerElement.dataset.autoFocusVisible = 'true';\n}\n"],"names":["MAX_HEIGHT_MARGIN","setMaxHeightToAvailableSpace","dialog","top","bottom","isElementVisible","element","rect","hasSize","style","isVisibleStyle","isInViewport","syncRefs","localRef","forwardedRef","addAutoFocusAttribute","mouseEvent","addShowFocusRing","event","triggerElement"],"mappings":"AAIO,MAAMA,IAAoB;AAe1B,SAASC,EAA6BC,GAAqB;AAC9D,MAAI,CAAC;AACK,UAAA,IAAI,MAAM,8EAA8E;AAGlG,EAAAA,EAAO,MAAM,YAAY;AAEzB,QAAM,EAAE,KAAAC,GAAK,QAAAC,MAAWF,EAAO,sBAAsB;AACjD,EAAAC,IAAM,IAAoB,IAE1BD,EAAO,MAAM,YAAY,GAAGE,IAAS,CAAiB,OAC/CA,IAAS,IAAoB,OAAO,gBAE3CF,EAAO,MAAM,YAAY,GAAG,OAAO,cAAcC,IAAM,CAAiB;AAEhF;AAYO,SAASE,EAAiBC,GAAsB;AAC7C,QAAAC,IAAOD,EAAQ,sBAAsB,GACrCE,IAAUD,EAAK,QAAQ,KAAKA,EAAK,SAAS,GAE1CE,IAAQ,OAAO,iBAAiBH,CAAO,GACvCI,IAAiBD,EAAM,YAAY,UAAUA,EAAM,eAAe,YAAY,WAAWA,EAAM,OAAO,MAAM,GAG5GE,IACFJ,EAAK,MAAM,OAAO,eAAeA,EAAK,OAAO,OAAO,cAAcA,EAAK,SAAS,KAAKA,EAAK,QAAQ;AAEtG,SAAOC,KAAWE,KAAkBC;AACxC;AAQgB,SAAAC,EAAiCC,GAA+BC,GAAsC;AAClH,EAAKA,MAID,OAAOA,KAAiB,aACxBA,EAAaD,EAAS,OAAO,IACtBC,KAAgB,aAAaA,MACpCA,EAAa,UAAUD,EAAS;AAExC;AASO,SAASE,EAAsBC,GAA4D;AACnF,EAAAA,EAAA,cAAc,QAAQ,mBAAmB;AACxD;AAWO,SAASC,EAAiBC,GAAgD;AAC7E,QAAMC,IAAiBD,EAAM;AAEzB,EAACC,KAAA,QAAAA,EAAgB,QAAQ,qBAIzBA,EAAe,QAAQ,qBAAqB,SACtCD,EAAA,OAAO,QAAQ,gBAAgB,SAE/BA,EAAA,OAAO,QAAQ,gBAAgB,SAGzCC,EAAe,QAAQ,mBAAmB;AAC9C;"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
const t = "
|
|
1
|
+
const t = "_content_zlne2_5", n = "_subContent_zlne2_6", e = "_item_zlne2_19", o = "_subTrigger_zlne2_19", s = "_itemContent_zlne2_95", _ = "_subMenuIndicator_zlne2_106", u = "_group_zlne2_112", c = "_slot_zlne2_119", l = {
|
|
2
2
|
content: t,
|
|
3
3
|
subContent: n,
|
|
4
|
-
item:
|
|
5
|
-
subTrigger:
|
|
4
|
+
item: e,
|
|
5
|
+
subTrigger: o,
|
|
6
6
|
itemContent: s,
|
|
7
7
|
subMenuIndicator: _,
|
|
8
|
-
group:
|
|
9
|
-
slot:
|
|
8
|
+
group: u,
|
|
9
|
+
slot: c
|
|
10
10
|
};
|
|
11
11
|
export {
|
|
12
12
|
t as content,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
l as default,
|
|
14
|
+
u as group,
|
|
15
|
+
e as item,
|
|
16
16
|
s as itemContent,
|
|
17
|
-
|
|
17
|
+
c as slot,
|
|
18
18
|
n as subContent,
|
|
19
19
|
_ as subMenuIndicator,
|
|
20
|
-
|
|
20
|
+
o as subTrigger
|
|
21
21
|
};
|
|
22
22
|
//# sourceMappingURL=fondue-components40.js.map
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
const t = "
|
|
1
|
+
const t = "_root_1s2mi_5", r = "_triggerList_1s2mi_14", i = "_triggerListWrapper_1s2mi_28", s = "_trigger_1s2mi_14", e = "_content_1s2mi_78", o = "_activeIndicator_1s2mi_82", g = {
|
|
2
2
|
root: t,
|
|
3
3
|
triggerList: r,
|
|
4
|
-
triggerListWrapper:
|
|
5
|
-
trigger:
|
|
6
|
-
content:
|
|
7
|
-
activeIndicator:
|
|
4
|
+
triggerListWrapper: i,
|
|
5
|
+
trigger: s,
|
|
6
|
+
content: e,
|
|
7
|
+
activeIndicator: o
|
|
8
8
|
};
|
|
9
9
|
export {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
o as activeIndicator,
|
|
11
|
+
e as content,
|
|
12
|
+
g as default,
|
|
13
13
|
t as root,
|
|
14
|
-
|
|
14
|
+
s as trigger,
|
|
15
15
|
r as triggerList,
|
|
16
|
-
|
|
16
|
+
i as triggerListWrapper
|
|
17
17
|
};
|
|
18
18
|
//# sourceMappingURL=fondue-components58.js.map
|