@mrfylke/contact-form 0.1.3

package/lib/components/form/file-input.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FileInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const form_module_css_1 = __importDefault(require("./form.module.css"));
+const form_component_label_1 = __importDefault(require("./form-component-label"));
+const typography_1 = require("../typography");
+const button_1 = require("../button");
+const icon_1 = require("../icon");
+const error_message_1 = require("../error-message");
+const translations_1 = require("../../translations");
+const theme_1 = require("../../modules/theme");
+const MAX_ALLOWED_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+function FileInput({ id, onChange, iconLabel, label, isRequired = false, name, errorMessage, }) {
+    const { t } = (0, translations_1.useTranslation)();
+    const { theme } = (0, theme_1.useTheme)();
+    const { background } = theme.color;
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const handleFileChange = (event) => {
+        if (event.target.files) {
+            const newFilesArray = Array.from(event.target.files);
+            handleFileUpload(newFilesArray);
+        }
+    };
+    const handleRemoveFile = (indexToRemove) => {
+        const updatedFiles = files.filter((_, index) => index !== indexToRemove);
+        setFiles(updatedFiles);
+        if (onChange) {
+            onChange(updatedFiles);
+        }
+    };
+    const handleDragOver = (event) => {
+        event.preventDefault();
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        if (event.dataTransfer.files) {
+            const droppedFiles = Array.from(event.dataTransfer.files);
+            handleFileUpload(droppedFiles);
+        }
+    };
+    const handleFileUpload = (uploadedFiles) => {
+        const filteredFiles = uploadedFiles.filter((file) => {
+            const isTooLarge = file.size > MAX_ALLOWED_FILE_SIZE;
+            if (isTooLarge) {
+                alert(t(translations_1.PageText.Contact.components.fileinput.errorMessages.tooLarge(file.name)));
+            }
+            return !isTooLarge;
+        });
+        setFiles((prevFiles) => [...prevFiles, ...filteredFiles]);
+        if (onChange) {
+            onChange([...files, ...filteredFiles]);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { onDragOver: handleDragOver, onDrop: handleDrop, className: form_module_css_1.default.file_input__container, children: [(0, jsx_runtime_1.jsx)("input", { id: `file_input__${id}`, type: "file", onChange: handleFileChange, name: name, className: form_module_css_1.default.input__file, multiple: true, accept: "image/*,.pdf,.doc,docx,.txt", "aria-invalid": !!errorMessage, "aria-describedby": errorMessage ? `error-file_input__${id}` : undefined }), label && ((0, jsx_runtime_1.jsx)(form_component_label_1.default, { label: label, htmlFor: label, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)("label", { htmlFor: `file_input__${id}`, className: form_module_css_1.default.label__file, tabIndex: 0, onKeyDown: (e) => {
+                    if (e.key === ' ' || e.key === 'Enter') {
+                        e.preventDefault();
+                        e.target.click();
+                    }
+                }, children: [(0, jsx_runtime_1.jsx)(FileIcon, { color: background.neutral[0].foreground.primary }), (0, jsx_runtime_1.jsx)(typography_1.Typo.span, { textType: "body__m", children: iconLabel })] }), files.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: form_module_css_1.default.fileList, children: files.map((file, index) => ((0, jsx_runtime_1.jsxs)("div", { className: form_module_css_1.default.fileItem, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: "compact", icon: { left: (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { size: "small", icon: "actions/Delete" }) }, onClick: () => handleRemoveFile(index) }), (0, jsx_runtime_1.jsx)(typography_1.Typo.span, { textType: "body__s", children: file.name })] }, index))) })), errorMessage && (0, jsx_runtime_1.jsx)(error_message_1.ErrorMessage, { message: errorMessage, id: `error-file_input__${id}` })] }));
+}
+function FileIcon({ color }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.6222 9.08056L10.1092 16.5936C8.40066 18.3021 5.63057 18.3021 3.92203 16.5936C2.21349 14.885 2.21349 12.1149 3.92203 10.4063L11.4351 2.89333C12.5741 1.75431 14.4208 1.75431 15.5598 2.89333C16.6988 4.03236 16.6988 5.8791 15.5598 7.01812L8.34149 14.2365C7.77193 14.8061 6.84856 14.8061 6.27906 14.2365C5.70954 13.667 5.70954 12.7436 6.27906 12.1741L12.6136 5.83961", stroke: color, strokeWidth: "1.66667", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/lib/components/form/form-component-label/form-component-label.module.css

@@ -0,0 +1,10 @@
+.required::after {
+    content: '*';
+    color: token('color.status.error.primary.background');
+    margin-left: token('spacing.small');
+}
+
+.disabled,
+.disabled::after {
+    color: token('color.foreground.dynamic.disabled');
+}

package/lib/components/form/form-component-label/index.d.ts

@@ -0,0 +1,9 @@
+type FormComponentLabelProps = {
+    label: string;
+    htmlFor: string;
+    disabled?: boolean;
+    isRequired?: boolean;
+};
+export declare const FormComponentLabel: ({ label, htmlFor, disabled, isRequired, }: FormComponentLabelProps) => import("react/jsx-runtime").JSX.Element;
+export default FormComponentLabel;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/form/form-component-label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/form-component-label/index.tsx"],"names":[],"mappings":"AAIA,KAAK,uBAAuB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,2CAKG,uBAAuB,4CAc5D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/form/form-component-label/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormComponentLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const typography_1 = require("../../typography");
+const form_component_label_module_css_1 = __importDefault(require("./form-component-label.module.css"));
+const css_1 = require("../../../utils/css");
+const FormComponentLabel = ({ label, htmlFor, disabled = false, isRequired = false, }) => {
+    return ((0, jsx_runtime_1.jsx)("label", { htmlFor: htmlFor, children: (0, jsx_runtime_1.jsx)(typography_1.Typo.span, { textType: "body__m", className: (0, css_1.andIf)({
+                [form_component_label_module_css_1.default.disabled]: disabled,
+                [form_component_label_module_css_1.default.required]: isRequired,
+            }), children: label }) }));
+};
+exports.FormComponentLabel = FormComponentLabel;
+exports.default = exports.FormComponentLabel;

package/lib/components/form/form.module.css

@@ -0,0 +1,573 @@
+@value typo-body__s from "@atb-as/theme/lib/generated/typography.module.css";
+
+@value typo-body__m from "@atb-as/theme/lib/generated/typography.module.css";
+
+.container {
+    composes: typo-body__s;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: token('spacing.small');
+    color: token('color.background.neutral.0.foreground.primary');
+    background-color: token('color.background.neutral.0.background');
+}
+
+.rowDisplay {
+    flex-direction: row-reverse;
+    justify-content: start;
+    gap: token('spacing.small');
+}
+
+.input {
+    background: transparent;
+    color: token('color.foreground.dynamic.primary');
+
+    padding: token('spacing.small');
+
+    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+    border-radius: token('border.radius.small');
+    width: 100%;
+}
+
+.input:focus {
+    outline: 0;
+}
+
+.input::placeholder {
+    color: token('color.foreground.dynamic.secondary');
+    opacity: 1;
+}
+
+.input:disabled {
+    cursor: not-allowed;
+}
+
+.input:disabled::placeholder {
+    color: token('color.foreground.dynamic.disabled');
+}
+
+.input:focus-within {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+}
+
+.input__error {
+    border-color: token('color.status.error.primary.background');
+}
+
+/* radio */
+.input__radio {
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    display: block;
+}
+
+.input__radio:focus + .label__radio .label__radioBox {
+    outline: 2px solid token('color.interactive.2.outline.background');
+    outline-offset: 2px;
+}
+
+.label__radioBox:hover {
+    background-color: token('color.interactive.2.hover.background');
+    color: token('color.interactive.2.hover.foreground.primary');
+}
+
+.label__radioBox {
+    display: block;
+    border-radius: 50%;
+    height: 1.25rem;
+    width: 1.25rem;
+    --padding: 2px;
+    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+    padding: var(--padding);
+    margin-right: token('spacing.medium');
+}
+
+.label__radioBox::after {
+    content: '';
+    display: block;
+    height: calc(1rem - 2 * token('border.width.slim'));
+    width: calc(1rem - 2 * token('border.width.slim'));
+    border-radius: 50%;
+    background: token('color.foreground.dynamic.primary');
+
+    transition: transform 100ms ease-in;
+    transform: scale(0);
+}
+
+.input__radio:checked + .label__radio .label__radioBox::after {
+    transform: scale(1);
+}
+
+.label__radio {
+    display: flex;
+    cursor: pointer;
+
+    background: token('color.background.neutral.0.background');
+    color: token('color.background.neutral.0.foreground.primary');
+
+    border-radius: token('border.radius.regular');
+
+    border: token('border.width.slim') solid transparent;
+
+    padding: token('spacing.small') 0;
+}
+
+.label__info {
+    display: flex;
+    align-items: center;
+    gap: token('spacing.medium');
+    margin: token('spacing.small');
+    margin-left: token('spacing.large');
+    padding: token('spacing.small');
+    background: token('color.background.neutral.1.background');
+}
+
+.label_container {
+    display: flex;
+    justify-content: space-between;
+}
+
+/* Icon button */
+.iconButton {
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    border: none;
+    border-radius: 50%;
+}
+
+.iconButton:focus {
+    outline: 2px solid token('color.interactive.2.outline.background');
+    outline-offset: 2px;
+}
+
+.iconButton:hover {
+    background-color: token('color.interactive.2.hover.background');
+    color: token('color.interactive.2.hover.foreground.primary');
+}
+
+/* textare */
+.textarea_container {
+    display: flex;
+    flex-direction: column;
+    gap: token('spacing.small');
+}
+
+.textarea {
+    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+    border-radius: token('border.radius.small');
+    padding: token('spacing.small');
+    width: 100%;
+    min-height: 6rem;
+    font-family: var(--font-main) !important;
+    font-size: 1rem !important;
+    line-height: var(--baseTypo-body__m-lineHeight, 1.25rem) !important;
+    letter-spacing: var(
+            --baseTypo-body__m-letterSpacing,
+            0.03125rem
+    ) !important;
+}
+
+/** file input */
+.file_input__container {
+    display: flex;
+    flex-direction: column;
+    gap: token('spacing.small');
+}
+
+.input__file {
+    opacity: 0;
+    display: none;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+.label__file {
+    display: flex;
+    gap: token('spacing.small');
+    align-items: center;
+    background-color: token('color.background.neutral.1.background');
+    color: token('color.foreground.dynamic.primary');
+    padding: token('spacing.small');
+    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+    border-radius: token('border.radius.small');
+    cursor: pointer;
+}
+
+.label__file:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+}
+
+.label__file:hover {
+    background-color: token('color.interactive.2.hover.background');
+    color: token('color.interactive.2.hover.foreground.primary');
+}
+
+.fileList {
+    display: flex;
+    flex-direction: column;
+    gap: token('spacing.small');
+    padding: token('spacing.small') 0;
+}
+
+.fileItem {
+    display: flex;
+    align-items: center;
+    gap: token('spacing.small');
+}
+
+/* modal */
+.modal_wrapper {
+    position: fixed;
+    z-index: 200;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal_content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    max-width: 32rem;
+    padding: token('spacing.large');
+    border: token('border.width.medium') solid token('color.interactive.2.outline.background'); /* Use border property */
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.2.outline.background');
+    color: token('color.background.neutral.0.foreground.primary');
+    background-color: token('color.background.neutral.0.background');
+    border-radius: token('border.radius.regular');
+}
+
+.modal_content > * + * {
+    margin-top: token('spacing.small');
+}
+
+.modal_header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.modal__rules_list {
+    padding: token('spacing.medium');
+    padding-left: token('spacing.xLarge');
+}
+
+.modal__rules_list > li {
+    padding: token('spacing.xSmall') 0;
+}
+
+/* select and searchable-select*/
+.select__select_container,
+.searchable_select__comboBox {
+    display: flex;
+    flex-direction: column;
+    gap: token('spacing.small');
+}
+
+.searchable_select__input_container {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.searchable_select__group,
+.searchable_select__disabled {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+    border-radius: token('border.radius.small');
+}
+
+.searchable_select__group:focus-within {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+}
+
+.searchable_select__input {
+    flex-grow: 2;
+    border: none;
+    outline: none;
+    padding: token('spacing.small');
+    background-color: transparent;
+    color: token('color.background.neutral.2.foreground.primary');
+}
+
+.searchable_select__input_disabled {
+    cursor: not-allowed;
+}
+
+.searchable_select__input::placeholder {
+    color: token('color.foreground.dynamic.secondary');
+    opacity: 1;
+}
+
+.searchable_select__input:not(:focus):placeholder-shown {
+    color: token('color.foreground.dynamic.secondary');
+    font-style: italic;
+    opacity: 0.7;
+}
+
+.searchable_select__button {
+    display: flex;
+    border: none;
+    padding: token('spacing.small');
+    background-color: transparent;
+}
+
+.searchable_select__button:disabled {
+    cursor: not-allowed;
+}
+
+.select__popover,
+.searchable_select__popover {
+    overflow: auto;
+    max-height: 16rem;
+    width: var(--trigger-width);
+    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+    border-radius: token('border.radius.small');
+    color: token('color.background.neutral.0.foreground.primary');
+    background: token('color.background.neutral.0.background');
+    animation: fadeIn 0.2s;
+    padding: token('spacing.small');
+    margin-bottom: token('spacing.small');
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.select__listBox,
+.searchable_select__listBox {
+    max-height: 16rem;
+    overflow-y: auto;
+    outline: none;
+}
+
+.searchable_select__truncate {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.select__listBoxItem,
+.searchable_select__listBoxItem {
+    display: flex;
+    align-items: center;
+    cursor: default;
+    color: token('color.background.neutral.0.foreground.primary');
+    border-radius: token('border.radius.small');
+    border-bottom: 1px solid token('color.background.neutral.2.background');
+    z-index: 1;
+}
+
+.select__item,
+.searchable_select__item {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: token('spacing.small');
+    padding: token('spacing.small');
+}
+
+.select__item:active,
+.searchable_select__item:active {
+    background-color: token('color.interactive.3.active.background');
+    color: token('color.interactive.3.active.foreground.primary');
+    z-index: 2;
+}
+
+.select__highlight,
+.searchable_select__highlight {
+    position: relative;
+    border-radius: token('border.radius.small');
+    background-color: token('color.interactive.2.active.background');
+    color: token('color.interactive.2.active.foreground.primary');
+    z-index: 2;
+}
+
+.searchable_select__selected {
+    position: relative;
+    border-radius: token('border.radius.small');
+    background-color: token('color.interactive.2.active.background');
+    color: token('color.interactive.2.active.foreground.primary');
+    z-index: 2;
+}
+
+.select__button {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: token('spacing.small');
+    color: token('color.foreground.dynamic.primary');
+    background-color: transparent;
+    border-radius: token('border.radius.small');
+    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+}
+
+.select__button:disabled {
+    cursor: not-allowed;
+}
+
+.select__button:focus-within {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+}
+
+.select__item:focus,
+.select__listBoxItem:focus {
+    outline: 0;
+    border-radius: token('border.radius.small');
+}
+
+.select__placholder {
+    font-style: italic;
+    opacity: 0.7;
+    padding-right: token('spacing.small');
+}
+
+/* Time and date selector */
+.dateSelectorContainer,
+.timeSelectorContainer {
+    display: flex;
+    flex-direction: column;
+    gap: token('spacing.small');
+}
+
+.dateSelector,
+.timeSelector {
+    display: contents;
+    --height: 2.75rem;
+    overflow: hidden;
+    border-radius: token('border.radius.small');
+}
+
+.dateSelector input[type='date'],
+.timeSelector input[type='time'] {
+    height: var(--height);
+    padding: token('spacing.medium');
+    border: none;
+    background-color: transparent;
+    color: token('color.background.neutral.0.foreground.primary');
+    flex: 1;
+}
+
+.dateSelectorInput,
+.timeSelectorInput {
+    width: 100%;
+    height: var(--height);
+    display: flex;
+    align-items: center;
+    padding: token('spacing.medium');
+    color: token('color.background.neutral.0.foreground.primary');
+    border-radius: token('border.radius.small');
+    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+}
+
+.dateSelectorInput:focus-within,
+.timeSelectorInput:focus-within {
+    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+}
+
+.dateSelectorSegment:focus,
+.timeSelectorSegment:focus {
+    border-radius: token('border.radius.small');
+}
+
+.calendarSelectorGroup {
+    display: flex;
+    position: relative;
+    width: 100%;
+}
+
+.calendarButton {
+    position: absolute;
+    right: 0;
+    border: none;
+    cursor: pointer;
+    background: none;
+    margin: token('spacing.medium');
+    border-radius: token('border.radius.small');
+}
+
+.calendarDialog {
+    padding: token('spacing.xSmall');
+    background: token('color.background.neutral.0.background');
+    box-shadow: 0.2rem 0.2rem 0.3rem rgba(0, 0, 0, 0.15);
+}
+
+.calendarDialog__header {
+    display: flex;
+    gap: token('spacing.medium');
+    justify-content: center;
+    align-items: center;
+    padding: token('spacing.small');
+}
+
+.calendarDialog__title {
+    composes: typo-heading__m from '@atb-as/theme/lib/generated/typography.module.css';
+}
+
+.calendarDialog__headerButtons {
+    background: none;
+    border: none;
+    padding: token('spacing.xSmall') token('spacing.medium');
+    cursor: pointer;
+}
+
+.calendarGrid {
+    width: 100%;
+}
+
+.calendarGrid__cell {
+    padding: token('spacing.xSmall') token('spacing.medium');
+    cursor: pointer;
+    text-align: center;
+    border-radius: token('border.radius.small');
+}
+
+.calendarGrid__cell[data-disabled] {
+    opacity: 0.3;
+    cursor: default;
+}
+
+.calendarGrid__cell[data-selected] {
+    background-color: token('color.interactive.2.active.background');
+    color: token('color.interactive.2.active.foreground.primary');
+    font-weight: bold;
+    border-radius: token('border.radius.small');
+}
+
+:global(.dark) .dateSelector input[type='date']::-webkit-calendar-picker-indicator,
+:global(.dark) .timeSelector input[type='time']::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+}
+
+.required::after {
+    content: '*';
+    color: token('color.status.error.primary.background');
+    margin-left: token('spacing.small');
+}

package/lib/components/form/index.d.ts

@@ -0,0 +1,11 @@
+export { default as FieldWrapperWithError } from './field-wrapper-with-error';
+export { default as FileInput } from './file-input';
+export { default as Fieldset } from './fieldset';
+export { default as Input } from './input';
+export { default as Radio } from './radio';
+export { default as Select } from './select';
+export { default as Textarea } from './textarea';
+export { default as DateSelector } from './date-selector';
+export { default as TimeSelector } from './time-selector';
+export { SearchableSelect, getLineOptions, getStopOptions, } from './searchable-select';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,qBAAqB,EAAC,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,SAAS,CAAC;AACzC,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,SAAS,CAAC;AACzC,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,iBAAiB,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,cAAc,EACd,cAAc,GACjB,MAAM,qBAAqB,CAAC"}