@mittwald/flow-react-components 1.3.0-next.12 → 1.3.0-next.14
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/AGENTS.md +18 -0
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Accordion/Accordion.mjs +23 -15
- package/dist/js/packages/components/src/components/Accordion/Accordion.mjs.map +1 -1
- package/dist/js/packages/components/src/components/DonutChart/DonutChart.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/Controls.mjs +1 -1
- package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/Controls.mjs.map +1 -1
- package/package.json +9 -9
|
@@ -9,9 +9,21 @@ import { Button } from "../Button/Button.mjs";
|
|
|
9
9
|
import { Activity } from "../Activity/Activity.mjs";
|
|
10
10
|
import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
|
|
11
11
|
import clsx from "clsx";
|
|
12
|
-
import { useId, useState } from "react";
|
|
12
|
+
import { useCallback, useId, useState } from "react";
|
|
13
13
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
14
|
//#region src/components/Accordion/Accordion.tsx
|
|
15
|
+
var HeaderButton = (props) => {
|
|
16
|
+
const { children, contentId, isExpanded, onToggle } = props;
|
|
17
|
+
return /* @__PURE__ */ jsxs(Button, {
|
|
18
|
+
tunnel: null,
|
|
19
|
+
unstyled: true,
|
|
20
|
+
"aria-expanded": isExpanded,
|
|
21
|
+
className: Accordion_module_default.headerButton,
|
|
22
|
+
onPress: onToggle,
|
|
23
|
+
"aria-controls": contentId,
|
|
24
|
+
children: [children, /* @__PURE__ */ jsx(IconChevronDown, { className: Accordion_module_default.chevron })]
|
|
25
|
+
});
|
|
26
|
+
};
|
|
15
27
|
/**
|
|
16
28
|
* @flr-generate all
|
|
17
29
|
* @flowStatus beta
|
|
@@ -22,18 +34,13 @@ var Accordion = flowComponent("Accordion", (props) => {
|
|
|
22
34
|
const rootClassName = clsx(Accordion_module_default.accordion, expanded && Accordion_module_default.expanded, variant === "outline" && Accordion_module_default.outline, className);
|
|
23
35
|
const headerId = useId();
|
|
24
36
|
const contentId = useId();
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
onPress: () => setExpanded((expanded) => !expanded),
|
|
33
|
-
"aria-controls": contentId,
|
|
34
|
-
children: [children, /* @__PURE__ */ jsx(IconChevronDown, { className: Accordion_module_default.chevron })]
|
|
35
|
-
});
|
|
36
|
-
};
|
|
37
|
+
const toggle = useCallback(() => setExpanded((expanded) => !expanded), []);
|
|
38
|
+
const renderHeaderButton = (children) => /* @__PURE__ */ jsx(HeaderButton, {
|
|
39
|
+
contentId,
|
|
40
|
+
isExpanded: expanded,
|
|
41
|
+
onToggle: toggle,
|
|
42
|
+
children
|
|
43
|
+
});
|
|
37
44
|
const propsContext = {
|
|
38
45
|
Content: {
|
|
39
46
|
className: Accordion_module_default.contentInner,
|
|
@@ -46,18 +53,19 @@ var Accordion = flowComponent("Accordion", (props) => {
|
|
|
46
53
|
className: Accordion_module_default.header,
|
|
47
54
|
level: 4,
|
|
48
55
|
size: "xs",
|
|
49
|
-
children: dynamic((props) =>
|
|
56
|
+
children: dynamic((props) => renderHeaderButton(props.children)),
|
|
50
57
|
Button: { size: "m" }
|
|
51
58
|
},
|
|
52
59
|
Label: {
|
|
53
60
|
className: Accordion_module_default.header,
|
|
54
|
-
children: dynamic((props) =>
|
|
61
|
+
children: dynamic((props) => renderHeaderButton(props.children))
|
|
55
62
|
}
|
|
56
63
|
};
|
|
57
64
|
return /* @__PURE__ */ jsx("div", {
|
|
58
65
|
...rest,
|
|
59
66
|
className: rootClassName,
|
|
60
67
|
children: /* @__PURE__ */ jsxs(PropsContextProvider, {
|
|
68
|
+
dependencies: [expanded],
|
|
61
69
|
props: propsContext,
|
|
62
70
|
children: [children, /* @__PURE__ */ jsx("div", {
|
|
63
71
|
"aria-labelledby": headerId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport { useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Activity } from \"@/components/Activity\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface AccordionProps extends PropsWithChildren<\n ComponentProps<\"div\">\n> {\n /** Whether the accordion should be initially expanded. */\n defaultExpanded?: boolean;\n /** The visual variant of the accordion. @default \"default\" */\n variant?: \"default\" | \"outline\";\n}\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n \"Accordion\",\n (props) => {\n const {\n children,\n className,\n defaultExpanded = false,\n variant = \"default\",\n ...rest\n } = props;\n const [expanded, setExpanded] = useState(defaultExpanded);\n\n const rootClassName = clsx(\n styles.accordion,\n expanded && styles.expanded,\n variant === \"outline\" && styles.outline,\n className,\n );\n\n const headerId = useId();\n\n const contentId = useId();\n\n const
|
|
1
|
+
{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useCallback, useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Activity } from \"@/components/Activity\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface AccordionProps extends PropsWithChildren<\n ComponentProps<\"div\">\n> {\n /** Whether the accordion should be initially expanded. */\n defaultExpanded?: boolean;\n /** The visual variant of the accordion. @default \"default\" */\n variant?: \"default\" | \"outline\";\n}\n\ninterface HeaderButtonProps extends PropsWithChildren {\n contentId: string;\n isExpanded: boolean;\n onToggle: () => void;\n}\n\n/*\n * Declared here and not inside the accordion: a component defined in a render\n * body gets a new identity on every render, so React unmounts and remounts it —\n * and the toggle loses the focus it just received on its own press.\n */\nconst HeaderButton: FC<HeaderButtonProps> = (props) => {\n const { children, contentId, isExpanded, onToggle } = props;\n\n return (\n <Button\n tunnel={null}\n unstyled\n aria-expanded={isExpanded}\n className={styles.headerButton}\n onPress={onToggle}\n aria-controls={contentId}\n >\n {children}\n <IconChevronDown className={styles.chevron} />\n </Button>\n );\n};\n\n/**\n * @flr-generate all\n * @flowStatus beta\n */\nexport const Accordion: FC<AccordionProps> = flowComponent(\n \"Accordion\",\n (props) => {\n const {\n children,\n className,\n defaultExpanded = false,\n variant = \"default\",\n ...rest\n } = props;\n const [expanded, setExpanded] = useState(defaultExpanded);\n\n const rootClassName = clsx(\n styles.accordion,\n expanded && styles.expanded,\n variant === \"outline\" && styles.outline,\n className,\n );\n\n const headerId = useId();\n\n const contentId = useId();\n\n const toggle = useCallback(() => setExpanded((expanded) => !expanded), []);\n\n const renderHeaderButton = (children: ReactNode) => (\n <HeaderButton\n contentId={contentId}\n isExpanded={expanded}\n onToggle={toggle}\n >\n {children}\n </HeaderButton>\n );\n\n const propsContext: PropsContext = {\n Content: {\n className: styles.contentInner,\n tunnel: {\n id: \"content\",\n component: \"Accordion\",\n },\n },\n Heading: {\n className: styles.header,\n level: 4,\n size: \"xs\",\n children: dynamic((props) => renderHeaderButton(props.children)),\n Button: { size: \"m\" },\n },\n Label: {\n className: styles.header,\n children: dynamic((props) => renderHeaderButton(props.children)),\n },\n };\n\n return (\n <div {...rest} className={rootClassName}>\n {/*\n * The props context is memoized, and the header button reads `expanded`\n * from it – without the dependency the toggle keeps announcing the state\n * it was first rendered with.\n */}\n {/*\n * The props context is memoized, and the header button takes `expanded`\n * from it – without the dependency the toggle keeps announcing the\n * state it was first rendered with.\n */}\n <PropsContextProvider dependencies={[expanded]} props={propsContext}>\n {children}\n <div\n aria-labelledby={headerId}\n id={contentId}\n role=\"region\"\n hidden={!expanded}\n className={styles.content}\n >\n <Activity isActive={expanded} inactiveDelay={1000}>\n <UiComponentTunnelExit id=\"content\" component=\"Accordion\" />\n </Activity>\n </div>\n </PropsContextProvider>\n </div>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;;;;AAgCA,IAAM,gBAAuC,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,YAAY,aAAa;CAEtD,OACE,qBAAC,QAAD;EACE,QAAQ;EACR,UAAA;EACA,iBAAe;EACf,WAAW,yBAAO;EAClB,SAAS;EACT,iBAAe;EANjB,UAAA,CAQG,UACD,oBAAC,iBAAD,EAAiB,WAAW,yBAAO,QAAU,CAAA,CACvC;;AAEZ;;;;;AAMA,IAAa,YAAgC,cAC3C,cACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,UAAU,WACV,GAAG,SACD;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,eAAe;CAExD,MAAM,gBAAgB,KACpB,yBAAO,WACP,YAAY,yBAAO,UACnB,YAAY,aAAa,yBAAO,SAChC,SACF;CAEA,MAAM,WAAW,MAAM;CAEvB,MAAM,YAAY,MAAM;CAExB,MAAM,SAAS,kBAAkB,aAAa,aAAa,CAAC,QAAQ,GAAG,CAAC,CAAC;CAEzE,MAAM,sBAAsB,aAC1B,oBAAC,cAAD;EACa;EACX,YAAY;EACZ,UAAU;EAET;CACW,CAAA;CAGhB,MAAM,eAA6B;EACjC,SAAS;GACP,WAAW,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,SAAS;GACP,WAAW,yBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UAAU,mBAAmB,MAAM,QAAQ,CAAC;GAC/D,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,OAAO;GACL,WAAW,yBAAO;GAClB,UAAU,SAAS,UAAU,mBAAmB,MAAM,QAAQ,CAAC;EACjE;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,WAAW;EAWxB,UAAA,qBAAC,sBAAD;GAAsB,cAAc,CAAC,QAAQ;GAAG,OAAO;GAAvD,UAAA,CACG,UACD,oBAAC,OAAD;IACE,mBAAiB;IACjB,IAAI;IACJ,MAAK;IACL,QAAQ,CAAC;IACT,WAAW,yBAAO;IAElB,UAAA,oBAAC,UAAD;KAAU,UAAU;KAAU,eAAe;KAC3C,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAa,CAAA;IACnD,CAAA;GACP,CAAA,CACe;;CACnB,CAAA;AAET,GACA,EACE,MAAM,SACR,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.module.scss"],"sourcesContent":[".donutChart {\n position: relative;\n width: fit-content;\n flex-shrink: 0;\n\n .border {\n stroke: var(--donut-chart--border-color);\n }\n\n .background {\n stroke: var(--donut-chart--background-color);\n }\n\n .value {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow-wrap: anywhere;\n padding: var(--donut-chart--padding--m);\n }\n\n &.size-l {\n .value {\n font-size: var(--font-size-heading--xl);\n padding: var(--donut-chart--padding--l);\n\n small {\n font-size: var(--font-size-heading--l);\n }\n }\n }\n\n /* Variants */\n @mixin status($status) {\n &.#{$status} {\n .fill {\n stroke: var(--donut-chart--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n}\n\n.donutChartContainer {\n display: flex;\n gap: var(--donut-chart--spacing-y) var(--donut-chart--spacing-x);\n align-items: center;\n\n &.bottom {\n flex-direction: column;\n }\n\n &.top {\n flex-direction: column-reverse;\n }\n\n &.right {\n .legend {\n justify-content: start;\n }\n }\n\n &.left {\n flex-direction: row-reverse;\n\n .legend {\n justify-content: start;\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"DonutChart.module.mjs","names":[],"sources":["../../../../../../../src/components/DonutChart/DonutChart.module.scss"],"sourcesContent":[".donutChart {\n position: relative;\n width: fit-content;\n height: fit-content;\n flex-shrink: 0;\n\n .border {\n stroke: var(--donut-chart--border-color);\n }\n\n .background {\n stroke: var(--donut-chart--background-color);\n }\n\n .value {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow-wrap: anywhere;\n padding: var(--donut-chart--padding--m);\n }\n\n &.size-l {\n .value {\n font-size: var(--font-size-heading--xl);\n padding: var(--donut-chart--padding--l);\n\n small {\n font-size: var(--font-size-heading--l);\n }\n }\n }\n\n /* Variants */\n @mixin status($status) {\n &.#{$status} {\n .fill {\n stroke: var(--donut-chart--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n}\n\n.donutChartContainer {\n display: flex;\n gap: var(--donut-chart--spacing-y) var(--donut-chart--spacing-x);\n align-items: center;\n\n &.bottom {\n flex-direction: column;\n }\n\n &.top {\n flex-direction: column-reverse;\n }\n\n &.right {\n .legend {\n justify-content: start;\n }\n }\n\n &.left {\n flex-direction: row-reverse;\n\n .legend {\n justify-content: start;\n }\n }\n}\n"],"mappings":""}
|
package/dist/js/packages/components/src/components/LightBox/components/LightBoxGallery/Controls.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
+
import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
|
|
3
4
|
import LightBoxGallery_module_default from "./LightBoxGallery.module.mjs";
|
|
4
5
|
import __locale_default from "../../../../../../../_virtual/_20.locale.mjs";
|
|
5
6
|
import clsx from "clsx";
|
|
6
7
|
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
import { useLocalizedStringFormatter } from "react-aria";
|
|
8
8
|
//#region src/components/LightBox/components/LightBoxGallery/Controls.tsx
|
|
9
9
|
var Controls = (props) => {
|
|
10
10
|
const { count, currentIndex } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Controls.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/Controls.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"
|
|
1
|
+
{"version":3,"file":"Controls.mjs","names":[],"sources":["../../../../../../../../../src/components/LightBox/components/LightBoxGallery/Controls.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss\";\nimport clsx from \"clsx\";\n/*\n * Flow's own formatter, not react-aria's: the indicator's message takes\n * variables, and only this one runs them through IntlMessageFormat –\n * react-aria's hands back the raw \"{current} of {count}\".\n */\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/*.locale.json\";\n\ninterface Props {\n count: number;\n currentIndex: number;\n}\n\nexport const Controls: FC<Props> = (props) => {\n const { count, currentIndex } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"LightBox\");\n\n const indicators = Array(count)\n .fill(\"\")\n .map((_, index) => (\n <span\n key={index}\n className={clsx(\n styles.indicator,\n currentIndex === index && styles.current,\n )}\n />\n ));\n\n return (\n <div\n className={styles.indicators}\n aria-label={stringFormatter.format(\"indicator\", {\n current: currentIndex + 1,\n count,\n })}\n >\n {indicators}\n </div>\n );\n};\n"],"mappings":";;;;;;;;AAgBA,IAAa,YAAuB,UAAU;CAC5C,MAAM,EAAE,OAAO,iBAAiB;CAEhC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,aAAa,MAAM,KAAK,CAAC,CAC5B,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UACP,oBAAC,QAAD,EAEE,WAAW,KACT,+BAAO,WACP,iBAAiB,SAAS,+BAAO,OACnC,EACD,GALM,KAKN,CACF;CAEH,OACE,oBAAC,OAAD;EACE,WAAW,+BAAO;EAClB,cAAY,gBAAgB,OAAO,aAAa;GAC9C,SAAS,eAAe;GACxB;EACF,CAAC;EAEA,UAAA;CACE,CAAA;AAET"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.3.0-next.
|
|
3
|
+
"version": "1.3.0-next.14",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
"@internationalized/string-compiler": "^3.4.1",
|
|
84
84
|
"@lezer/common": "^1.5.2",
|
|
85
85
|
"@lezer/highlight": "^1.2.3",
|
|
86
|
-
"@mittwald/flow-icons": "^1.3.0-next.
|
|
86
|
+
"@mittwald/flow-icons": "^1.3.0-next.14",
|
|
87
87
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
88
|
-
"@mittwald/react-tunnel": "^1.3.0-next.
|
|
88
|
+
"@mittwald/react-tunnel": "^1.3.0-next.14",
|
|
89
89
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
90
90
|
"@react-aria/form": "^3.2.1",
|
|
91
91
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -138,12 +138,12 @@
|
|
|
138
138
|
"@internationalized/date": "^3.12.3",
|
|
139
139
|
"@lezer/generator": "^1.8.0",
|
|
140
140
|
"@lezer/lr": "^1.4.10",
|
|
141
|
-
"@mittwald/flow-core": "1.3.0-next.
|
|
142
|
-
"@mittwald/flow-design-tokens": "1.3.0-next.
|
|
143
|
-
"@mittwald/flow-icons-base": "1.3.0-next.
|
|
141
|
+
"@mittwald/flow-core": "1.3.0-next.14",
|
|
142
|
+
"@mittwald/flow-design-tokens": "1.3.0-next.14",
|
|
143
|
+
"@mittwald/flow-icons-base": "1.3.0-next.14",
|
|
144
144
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
145
145
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
146
|
-
"@mittwald/typescript-config": "1.3.0-next.
|
|
146
|
+
"@mittwald/typescript-config": "1.3.0-next.14",
|
|
147
147
|
"@nx/storybook": "^22.7.6",
|
|
148
148
|
"@storybook/addon-a11y": "^10.5.10",
|
|
149
149
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
},
|
|
196
196
|
"peerDependencies": {
|
|
197
197
|
"@internationalized/date": "^3.12.2",
|
|
198
|
-
"@mittwald/flow-icons-pro": "1.3.0-next.
|
|
198
|
+
"@mittwald/flow-icons-pro": "1.3.0-next.14",
|
|
199
199
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
200
200
|
"next": "^16.2.3",
|
|
201
201
|
"react": "^19.2.0",
|
|
@@ -219,5 +219,5 @@
|
|
|
219
219
|
"browserslist": [
|
|
220
220
|
"baseline widely available"
|
|
221
221
|
],
|
|
222
|
-
"gitHead": "
|
|
222
|
+
"gitHead": "4fcbd2b4a9f5c2a6f96101731f1d83ed0b9681e0"
|
|
223
223
|
}
|