form-input-fields 1.0.5 → 1.0.7

package/README.md

@@ -32,7 +32,7 @@ yarn add @your-org/form-fields @mui/material @emotion/react @emotion/styled form
 ### Using pnpm
 
 ```bash
-pnpm add @your-org/form-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
+pnpm add form-input-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
 ```
 
 ### Peer Dependencies
@@ -41,7 +41,7 @@ Make sure your project includes these peer dependencies:
 
 ```json
 {
-  "peerDependencies": {
+  "devDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "@mui/material": "^5.0.0",
@@ -73,7 +73,7 @@ For Internet Explorer 11 support, you'll need to include polyfills. See [Browser
 After installation, you can import and use the components in your application:
 
 ```tsx
-import { FormTextField, FormDateField, FormMaskField } from '@your-org/form-fields';
+import { FormTextField, FormDateField, FormMaskField, FormSwitch } from 'form-input-fields';
 ```
 
 ### Troubleshooting
@@ -100,7 +100,7 @@ If you encounter any issues during installation, try the following:
    pnpm install
    ```
 
-If you're still experiencing issues, please [open an issue](https://github.com/your-org/form-fields/issues) with details about your environment and the error message you're seeing.
+If you're still experiencing issues, please reach me at vladimir.vorobiev@gmail.com with details about your environment and the error message you're seeing.
 
 
 ## Table of Contents
@@ -113,6 +113,14 @@ If you're still experiencing issues, please [open an issue](https://github.com/y
     - [Basic Text Input](#basic-text-input)
     - [Text Field with Formik](#text-field-with-formik)
     - [Custom Validation](#custom-validation)
+- [FormDropDownField](#formdropdownfield)
+  - [Features](#features-4)
+  - [Basic Usage](#basic-usage-4)
+  - [Props](#props-4)
+  - [Examples](#examples-4)
+    - [Basic Dropdown](#basic-dropdown)
+    - [Dropdown with Default Selection](#dropdown-with-default-selection)
+    - [Required Dropdown with Validation](#required-dropdown-with-validation)
 - [FormDateField](#formdatefield)
   - [Features](#features)
   - [Available Date Formats](#available-date-formats)
@@ -148,6 +156,14 @@ If you're still experiencing issues, please [open an issue](https://github.com/y
     - [Basic Checkbox](#basic-checkbox)
     - [Checkbox with Formik](#checkbox-with-formik)
     - [Custom Styled Checkbox](#custom-styled-checkbox)
+- [FormSwitch](#formswitch)
+  - [Features](#features-5)
+  - [Basic Usage](#basic-usage-5)
+  - [Props](#props-5)
+  - [Examples](#examples-5)
+    - [Basic Switch](#basic-switch)
+    - [Switch with Formik](#switch-with-formik)
+    - [Custom Styled Switch](#custom-styled-switch)
 - [FormDateTextField](#formdatetextfield)
   - [Features](#features-3)
   - [Available Date Formats](#available-date-formats-1)
@@ -280,6 +296,131 @@ The FormTextField component accepts all props from `FormTextFieldProps`, `FieldP
 
 ---
 
+## FormDropDownField
+
+A customizable dropdown/select component that integrates Material-UI's Select with Formik form handling.
+
+### Features
+
+- **Seamless Formik Integration**: Automatically handles form state, validation, and error messages
+- **Material-UI Styling**: Consistent look and feel with Material Design
+- **TypeScript Support**: Fully typed component with proper type definitions
+- **Flexible Data Binding**: Works with array of objects with `id` and `description` properties
+- **Optional Default Selection**: Add a default "Select" option with customizable text
+- **Form Validation**: Built-in error state management with Formik
+- **Responsive Design**: Works well across different screen sizes
+
+### Basic Usage
+
+```tsx
+import { Formik, Field } from 'formik';
+import { FormDropDownField } from 'form-input-fields';
+
+const items = [
+  { id: '1', description: 'Option 1' },
+  { id: '2', description: 'Option 2' },
+  { id: '3', description: 'Option 3' },
+];
+
+<Formik
+  initialValues={{ category: '' }}
+  onSubmit={(values) => console.log(values)}
+>
+  <Field
+    component={FormDropDownField}
+    name="category"
+    label="Category"
+    items={items}
+    addInputSelect={true}
+  />
+</Formik>
+```
+
+### Props
+
+The FormDropDownField component accepts all props from `FormDropDownFieldProps`, `FieldProps` (Formik), and Material-UI's `TextFieldProps` (with some exceptions).
+
+#### FormDropDownFieldProps Interface
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `Array<{ id: string | number; description: string }>` | `[]` | Array of items to display in the dropdown |
+| `addInputSelect` | `boolean` | `false` | Whether to show a default "Select" option as the first item |
+| `selectText` | `string` | `'Select'` | Text to display for the default "Select" option |
+| `required` | `boolean` | `false` | Whether the field is required |
+| `disabled` | `boolean` | `false` | Whether the field is disabled |
+| `className` | `string` | - | Custom class name for the root element |
+| `helperText` | `string` | - | Helper text to display below the field |
+| `error` | `boolean` | - | Error state of the field (overrides Formik error state) |
+| `onChange` | `(value: any) => void` | - | Custom change handler |
+| `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
+
+### Examples
+
+#### Basic Dropdown
+
+```tsx
+const items = [
+  { id: 'us', description: 'United States' },
+  { id: 'ca', description: 'Canada' },
+  { id: 'uk', description: 'United Kingdom' },
+];
+
+<Field
+  component={FormDropDownField}
+  name="country"
+  label="Country"
+  items={items}
+  fullWidth
+/>
+```
+
+#### Dropdown with Default Selection
+
+```tsx
+<Field
+  component={FormDropDownField}
+  name="category"
+  label="Category"
+  items={categories}
+  addInputSelect={true}
+  selectText="Select a category"
+  helperText="Please select a category from the list"
+/>
+```
+
+#### Required Dropdown with Validation
+
+```tsx
+<Formik
+  initialValues={{ department: '' }}
+  validationSchema={Yup.object({
+    department: Yup.string().required('Department is required'),
+  })}
+  onSubmit={(values) => console.log(values)}
+>
+  {({ errors, touched }) => (
+    <Form>
+      <Field
+        component={FormDropDownField}
+        name="department"
+        label="Department"
+        items={departments}
+        addInputSelect={true}
+        required
+        error={touched.department && Boolean(errors.department)}
+        helperText={touched.department && errors.department}
+      />
+      <Button type="submit" variant="contained" color="primary">
+        Submit
+      </Button>
+    </Form>
+  )}
+</Formik>
+```
+
+---
+
 ## FormDateField
 
 A date input field component with Material-UI and Formik integration, powered by MUI X Date Pickers.
@@ -676,6 +817,198 @@ function CustomCheckbox() {
 }
 ```
 
+## FormSwitch
+
+A customizable switch component with Material-UI and Formik integration, providing consistent styling and behavior for boolean inputs across your application.
+
+### Features
+
+- **Material-UI Integration**: Consistent styling with Material-UI's design system
+- **Formik Integration**: Seamless form state management with error handling
+- **Flexible Label Placement**: Support for different label positions
+- **TypeScript Support**: Full type safety with exported interfaces
+- **Accessibility**: Built with accessibility in mind, following WAI-ARIA guidelines
+- **Error Handling**: Built-in error state management with Formik
+- **Responsive Design**: Works well on all screen sizes
+
+### Basic Usage
+
+```tsx
+import { Formik, Field } from 'formik';
+import { FormSwitch } from 'form-input-fields';
+
+// Basic usage
+<FormSwitch
+  label="Enable Notifications"
+  checked={notificationsEnabled}
+  onChange={(e, checked) => setNotificationsEnabled(checked)}
+/>
+
+// With Formik
+<Formik
+  initialValues={{ notifications: false }}
+  onSubmit={(values) => console.log(values)}
+>
+  <Field
+    component={FormSwitch}
+    name="notifications"
+    label="Enable Notifications"
+    helperText="Receive email notifications"
+  />
+</Formik>
+```
+
+### Props
+
+The FormSwitch component accepts all props from `FormSwitchProps`, `FieldProps` (Formik), and Material-UI's `SwitchProps`.
+
+#### FormSwitchProps Interface
+
+| Prop             | Type       | Default | Description                                      |
+| ---------------- | ---------- | ------- | ------------------------------------------------ |
+| `label`          | `string`   | -       | Label text displayed next to the switch          |
+| `labelPlacement` | `string`   | 'end'   | Position of label ('top', 'start', 'bottom', 'end') |
+| `color`          | `string`   | 'primary'| Switch color ('primary', 'secondary', 'error', 'info', 'success', 'warning', 'default') |
+| `size`           | `string`   | 'medium'| Switch size ('small' or 'medium')               |
+| `disabled`       | `boolean`  | `false` | Disable the switch                               |
+| `required`       | `boolean`  | `false` | Mark the field as required                       |
+| `onChange`       | `function` | -       | Custom change handler with context data          |
+| `onBlur`         | `function` | -       | Custom blur handler                               |
+| `helperText`     | `string`   | -       | Helper text to display below the switch          |
+| `error`          | `boolean`  | `false` | Error state of the switch                        |
+| `className`      | `string`   | -       | Custom class name for the root element           |
+
+#### Common Props (from FieldProps & SwitchProps)
+
+| Prop         | Type             | Required | Description                                   |
+|--------------|------------------|----------|-----------------------------------------------|
+| `name`       | `string`         | Yes      | Field name in Formik values                   |
+| `label`      | `string`         | No       | Field label                                   |
+| `helperText` | `string`         | No       | Custom helper text                            |
+| `error`      | `boolean`        | No       | Error state (auto-managed by Formik)          |
+| `disabled`   | `boolean`        | No       | Disabled state                                |
+| `required`   | `boolean`        | No       | Required field indicator                      |
+| Other        | `SwitchProps`    | No       | All Material-UI Switch props are supported    |
+
+### Examples
+
+#### Basic Switch
+
+```tsx
+<FormSwitch
+  label="Enable Dark Mode"
+  checked={darkModeEnabled}
+  onChange={(e, checked) => setDarkModeEnabled(checked)}
+  color="secondary"
+  size="small"
+/>
+```
+
+#### Switch with Formik
+
+```tsx
+<Formik
+  initialValues={{
+    notifications: false,
+    darkMode: true,
+    autoSave: false
+  }}
+  onSubmit={(values) => console.log('Form values:', values)}
+>
+  <Form>
+    <Field
+      component={FormSwitch}
+      name="notifications"
+      label="Enable Notifications"
+      helperText="Receive email notifications"
+      color="primary"
+    />
+    
+    <Field
+      component={FormSwitch}
+      name="darkMode"
+      label="Dark Mode"
+      helperText="Use dark theme"
+      color="secondary"
+      labelPlacement="start"
+    />
+    
+    <Field
+      component={FormSwitch}
+      name="autoSave"
+      label="Auto Save"
+      helperText="Automatically save changes"
+      color="success"
+      size="small"
+    />
+    
+    <Button type="submit" variant="contained" color="primary">
+      Save Settings
+    </Button>
+  </Form>
+</Formik>
+```
+
+#### Custom Styled Switch
+
+```tsx
+<FormSwitch
+  label="Custom Styled Switch"
+  checked={false}
+  onChange={(e, checked) => console.log('Switch toggled:', checked)}
+  className="custom-switch-class"
+  color="warning"
+  labelPlacement="top"
+  helperText="This is a custom styled switch"
+/>
+```
+
+#### Switch with Custom Change Handler
+
+```tsx
+<Field
+  component={FormSwitch}
+  name="advancedMode"
+  label="Advanced Mode"
+  onChange={(e, checked, context) => {
+    console.log('Field name:', context.fieldName);
+    console.log('Formik value:', context.formikValue);
+    // Custom logic here
+  }}
+  helperText="Enable advanced features"
+/>
+```
+
+#### Switch with Validation
+
+```tsx
+<Formik
+  initialValues={{ termsAccepted: false }}
+  validate={(values) => {
+    const errors = {};
+    if (!values.termsAccepted) {
+      errors.termsAccepted = 'You must accept the terms to continue';
+    }
+    return errors;
+  }}
+  onSubmit={(values) => console.log(values)}
+>
+  <Form>
+    <Field
+      component={FormSwitch}
+      name="termsAccepted"
+      label="I accept the terms and conditions"
+      helperText="Please read and accept the terms"
+      required
+    />
+    
+    <Button type="submit" variant="contained" color="primary">
+      Continue
+    </Button>
+  </Form>
+</Formik>
+```
+
 ## FormDateTextField
 
 A versatile date input field component that provides a text-based date picker with Formik integration and Material-UI styling.

package/dist/controls/FormDropDownField/FormDropDownField.d.ts

@@ -0,0 +1,56 @@
+import { FieldProps } from 'formik';
+import { TextFieldProps } from '@mui/material';
+export interface FormDropDownFieldProps {
+    /**
+     * Array of items to display in the dropdown
+     * Each item should have an `id` and `description` property
+     */
+    items: Array<{
+        id: string | number;
+        description: string;
+    }>;
+    /**
+     * Whether to show a default "Select" option as the first item
+     * @default false
+     */
+    addInputSelect?: boolean;
+    /**
+     * Text to display for the default "Select" option
+     * @default 'Select'
+     */
+    selectText?: string;
+    /**
+     * Whether the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom class name for the root element
+     */
+    className?: string;
+    /**
+     * Helper text to display below the field
+     */
+    helperText?: string;
+    /**
+     * Error state of the field
+     */
+    error?: boolean;
+    /**
+     * Custom onChange handler
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Custom onBlur handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+type FormDropDownFieldComponentProps = FormDropDownFieldProps & FieldProps & Omit<TextFieldProps, 'value' | 'onChange' | 'onBlur' | 'name' | 'defaultValue' | 'onError' | 'onFocus' | 'InputProps' | 'select' | 'SelectProps'>;
+export declare const FormDropDownField: ({ field, form, items, addInputSelect, selectText, required, disabled, className, helperText, error, onChange, onBlur, ...props }: FormDropDownFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FormDropDownField.d.ts.map

package/dist/controls/FormDropDownField/FormDropDownField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDropDownField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDropDownField/FormDropDownField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAoC,MAAM,eAAe,CAAC;AAGjF,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE3D;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAEhC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,KAAK,+BAA+B,GAAG,sBAAsB,GAC3D,UAAU,GACV,IAAI,CACF,cAAc,EACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,MAAM,GACN,cAAc,GACd,SAAS,GACT,SAAS,GACT,YAAY,GACZ,QAAQ,GACR,aAAa,CAChB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,GAAI,kIAc/B,+BAA+B,4CAiEjC,CAAC"}

package/dist/controls/FormDropDownField/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const useStyles: (props?: any) => import('@mui/styles').ClassNameMap<"margin" | "inputSelect">;
+//# sourceMappingURL=styles.d.ts.map

package/dist/controls/FormDropDownField/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDropDownField/styles.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,+EAYrB,CAAC"}

package/dist/controls/FormSwitch/FormSwitch.d.ts

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+import { FieldProps } from 'formik';
+import { SwitchProps } from '@mui/material/Switch';
+export interface FormSwitchProps {
+    /**
+     * Label text displayed next to the switch
+     */
+    label?: string;
+    /**
+     * Position of the label relative to the switch
+     * @default 'end'
+     */
+    labelPlacement?: 'top' | 'start' | 'bottom' | 'end';
+    /**
+     * Color of the switch when checked
+     * @default 'primary'
+     */
+    color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
+    /**
+     * Size of the switch
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Whether the switch is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the switch is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Custom onChange handler with additional switch-related data
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, context: {
+        fieldName: string;
+        formikValue: boolean;
+    }) => void;
+    /**
+     * Custom onBlur handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * Helper text to display below the switch
+     */
+    helperText?: string;
+    /**
+     * Error state of the switch
+     */
+    error?: boolean;
+    /**
+     * Custom class name for the root element
+     */
+    className?: string;
+}
+export type FormSwitchComponentProps = FieldProps & SwitchProps & FormSwitchProps;
+export declare const FormSwitch: (props: FormSwitchComponentProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormSwitch.d.ts.map

package/dist/controls/FormSwitch/FormSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSwitch.d.ts","sourceRoot":"","sources":["../../../src/controls/FormSwitch/FormSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEpD;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IAEvF;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC;KACtB,KACE,IAAI,CAAC;IAEV;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE9D;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG,WAAW,GAAG,eAAe,CAAC;AAElF,eAAO,MAAM,UAAU,GAAI,OAAO,wBAAwB,4CAyFzD,CAAC"}

package/dist/index.d.ts

@@ -4,4 +4,6 @@ export { FormDateField, type FormDateFieldProps, } from './controls/FormDateFiel
 export { FormCheckboxField, type FormCheckboxFieldProps, } from './controls/FormCheckboxField/FormCheckboxField';
 export { FormDateTextField, type FormDateTextFieldProps, } from './controls/FormDateTextField/FormDateTextField';
 export { FormTextField, type FormTextFieldProps, } from './controls/FormTextField/FormTextField';
+export { FormDropDownField, type FormDropDownFieldProps, } from './controls/FormDropDownField/FormDropDownField';
+export { FormSwitch, type FormSwitchProps, } from './controls/FormSwitch/FormSwitch';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,KAAK,UAAU,GAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AAExD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,KAAK,UAAU,GAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AAExD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,kCAAkC,CAAC"}