@central-design-system/components 3.0.0-beta.7 → 3.0.0-beta.8

package/dist/components/CdsTextArea/CdsTextArea.vue.d.ts

@@ -442,9 +442,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
         readonly value?: any;
         readonly disabled?: boolean | undefined;
         readonly type?: "number" | "password" | "text" | "email" | "tel" | "url" | undefined;
+        readonly error?: boolean | undefined;
         readonly active?: boolean | undefined;
         readonly autofocus?: boolean | undefined;
-        readonly error?: boolean | undefined;
         readonly counter?: boolean | undefined;
         readonly clearable?: boolean | undefined;
         readonly persistentClearable?: boolean | undefined;
@@ -756,12 +756,12 @@ declare const _sfc_main: import("vue").DefineComponent<{
     type: "number" | "password" | "text" | "email" | "tel" | "url";
     name: string | undefined;
     id: string;
+    error: boolean;
     active: boolean;
     autofocus: boolean;
     prefix: string;
     suffix: string;
     prependInnerIcon: "search" | "link" | "list" | "filters" | "add" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube";
-    error: boolean;
     appendInnerIcon: "search" | "link" | "list" | "filters" | "add" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube";
     role: string;
     placeholder: string;

package/dist/components/CdsTextInput/CdsTextInput.vue.d.ts

@@ -399,9 +399,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
         readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         readonly disabled?: boolean | undefined;
         readonly type?: "number" | "password" | "text" | "email" | "tel" | "url" | undefined;
+        readonly error?: boolean | undefined;
         readonly active?: boolean | undefined;
         readonly autofocus?: boolean | undefined;
-        readonly error?: boolean | undefined;
         readonly counter?: boolean | undefined;
         readonly clearable?: boolean | undefined;
         readonly persistentClearable?: boolean | undefined;
@@ -705,12 +705,12 @@ declare const _sfc_main: import("vue").DefineComponent<{
     type: "number" | "password" | "text" | "email" | "tel" | "url";
     name: string | undefined;
     id: string;
+    error: boolean;
     active: boolean;
     autofocus: boolean;
     prefix: string;
     suffix: string;
     prependInnerIcon: "search" | "link" | "list" | "filters" | "add" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube";
-    error: boolean;
     appendInnerIcon: "search" | "link" | "list" | "filters" | "add" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube";
     role: string;
     placeholder: string;

package/dist/components/CdsUploader/components/UploadList/ListItem.d.ts

@@ -57,8 +57,8 @@ declare const _default: import("vue").DefineComponent<{
             tag: string;
             reverse: boolean;
             indeterminate: boolean;
-            active: boolean;
             location: NonNullable<import('../../../../utils').TAnchor>;
+            active: boolean;
             modelValue: string | number;
             max: string | number;
             height: string | number;
@@ -131,7 +131,7 @@ declare const _default: import("vue").DefineComponent<{
             };
         }>> & {
             "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "active" | "location" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "location" | "active" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
         default: undefined;
     };
     onDownload: {
@@ -207,8 +207,8 @@ declare const _default: import("vue").DefineComponent<{
             tag: string;
             reverse: boolean;
             indeterminate: boolean;
-            active: boolean;
             location: NonNullable<import('../../../../utils').TAnchor>;
+            active: boolean;
             modelValue: string | number;
             max: string | number;
             height: string | number;
@@ -281,7 +281,7 @@ declare const _default: import("vue").DefineComponent<{
             };
         }>> & {
             "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "active" | "location" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "location" | "active" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
         default: undefined;
     };
     onDownload: {
@@ -308,8 +308,8 @@ declare const _default: import("vue").DefineComponent<{
         tag: string;
         reverse: boolean;
         indeterminate: boolean;
-        active: boolean;
         location: NonNullable<import('../../../../utils').TAnchor>;
+        active: boolean;
         modelValue: string | number;
         max: string | number;
         height: string | number;
@@ -382,7 +382,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>> & {
         "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "active" | "location" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "location" | "active" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>;
     itemRender: NUploader.TItemRender<any>;
     listType: NUploader.TUploadListType;
     isImageUrl: (file: NUploader.IUploadFile<any>) => boolean;

package/dist/components/CdsUploader/components/UploadList/UploadList.d.ts

@@ -57,8 +57,8 @@ declare const _default: import("vue").DefineComponent<{
             tag: string;
             reverse: boolean;
             indeterminate: boolean;
-            active: boolean;
             location: NonNullable<import('../../../../utils').TAnchor>;
+            active: boolean;
             modelValue: string | number;
             max: string | number;
             height: string | number;
@@ -131,7 +131,7 @@ declare const _default: import("vue").DefineComponent<{
             };
         }>> & {
             "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "active" | "location" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "location" | "active" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
         default: undefined;
     };
     onDownload: {
@@ -210,8 +210,8 @@ declare const _default: import("vue").DefineComponent<{
             tag: string;
             reverse: boolean;
             indeterminate: boolean;
-            active: boolean;
             location: NonNullable<import('../../../../utils').TAnchor>;
+            active: boolean;
             modelValue: string | number;
             max: string | number;
             height: string | number;
@@ -284,7 +284,7 @@ declare const _default: import("vue").DefineComponent<{
             };
         }>> & {
             "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "active" | "location" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "location" | "active" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
         default: undefined;
     };
     onDownload: {
@@ -311,8 +311,8 @@ declare const _default: import("vue").DefineComponent<{
         tag: string;
         reverse: boolean;
         indeterminate: boolean;
-        active: boolean;
         location: NonNullable<import('../../../../utils').TAnchor>;
+        active: boolean;
         modelValue: string | number;
         max: string | number;
         height: string | number;
@@ -385,7 +385,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>> & {
         "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "active" | "location" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "location" | "active" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>;
     itemRender: NUploader.TItemRender<any>;
     listType: NUploader.TUploadListType;
     isImageUrl: (file: NUploader.IUploadFile<any>) => boolean;

package/dist/components/CdsUploader/composable/upload.d.ts

@@ -266,8 +266,8 @@ export declare const makeUploadListProps: <Defaults extends {
             tag: string;
             reverse: boolean;
             indeterminate: boolean;
-            active: boolean;
             location: NonNullable<import('../../../utils').TAnchor>;
+            active: boolean;
             modelValue: string | number;
             max: string | number;
             height: string | number;
@@ -342,7 +342,7 @@ export declare const makeUploadListProps: <Defaults extends {
             };
         }>> & {
             "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "active" | "location" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "tag" | "reverse" | "indeterminate" | "location" | "active" | "modelValue" | "max" | "height" | "absolute" | "bgColor" | "bgOpacity" | "bufferValue" | "clickable" | "stream">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
         default: undefined;
     };
     onDownload: {

package/dist/composable/select.d.ts

@@ -1,6 +1,7 @@
 import { MaybePick } from '../utils';
 import type { PropType, ComputedRef, Ref } from 'vue';
 import type { IInternalItem, IUseItems } from './items';
+import type { TCdsIconsName } from '@central-design-system/icons';
 export interface ISelectProps {
     multiple: boolean;
     openOnClear: boolean;
@@ -17,6 +18,7 @@ export declare const makeSelectProps: <Defaults extends {
     isSelectAll?: unknown;
     ellipsis?: unknown;
     listProps?: unknown;
+    menuIcon?: unknown;
 } = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
     /**
      * Множественный выбор элементов
@@ -105,7 +107,9 @@ export declare const makeSelectProps: <Defaults extends {
                 available: readonly ["xs", "sm", "md", "lg", "xl"];
                 validator: (value: "xs" | "sm" | "md" | "lg" | "xl") => boolean;
             }, "default" | "type"> & {
-                type: PropType<NonNullable<"xs" | "sm" | "md" | "lg" | "xl">>;
+                type: PropType<NonNullable<"xs" | "sm" | "md" | "lg" | "xl">>; /**
+                 * Иконка выпадающего меню
+                 */
                 default: NonNullable<"xs" | "sm" | "md" | "lg" | "xl">;
             };
             tag: {
@@ -122,9 +126,6 @@ export declare const makeSelectProps: <Defaults extends {
                 default: string;
             };
             itemValue: {
-                /**
-                 * Отображать элементы выбранного списка в одну строку
-                 */
                 type: PropType<import("./items").TItemKey>;
                 default: string;
             };
@@ -149,21 +150,29 @@ export declare const makeSelectProps: <Defaults extends {
             "onUpdate:opened"?: ((value: unknown[]) => any) | undefined;
             "onClick:open"?: ((value: {
                 id: unknown;
-                value: boolean; /**
-                 * Свойства для списка
-                 */
+                value: boolean;
                 path: unknown[];
                 event: Event;
             }) => any) | undefined;
             "onClick:select"?: ((value: {
                 id: unknown;
-                value: boolean;
+                value: boolean; /**
+                 * Иконка выпадающего меню
+                 */
                 path: unknown[];
                 event: Event;
             }) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "items" | "itemTitle" | "itemValue" | "itemChildren" | "itemProps" | "returnObject" | "tag" | "size" | "disabled" | "dark" | "required" | "selectStrategy" | "openStrategy" | "lines">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
         default: undefined;
     };
+    /**
+     * Иконка выпадающего меню
+     */
+    menuIcon: {
+        type: PropType<"search" | "link" | "list" | "filters" | "add" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube">;
+        default: string;
+        validator: (value: TCdsIconsName) => boolean;
+    };
 }, Defaults>;
 export declare function useSelect(props: ISelectProps, items: ComputedRef<IInternalItem[]> | Ref<IInternalItem[]>, transformIn: IUseItems['transformIn'], transformOut: IUseItems['transformOut']): {
     model: Ref<readonly IInternalItem<any>[]> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-beta.7",
+  "version": "3.0.0-beta.8",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 11/16/2023, 7:07:39 PM
+ * Generated on 12/5/2023, 4:19:31 PM
  **/
 
 /**

package/src/scss/utility/variables/flex.scss

@@ -85,6 +85,44 @@ $order: (
   'last': 999
 );
 
+$gap-sizes: (
+  '0': 0,
+  'px': 1px,
+  '0\\.5': 0.125rem, // 2px
+  '1': 0.25rem, // 4px
+  '1\\.5': 0.375rem, // 6px
+  '2': 0.5rem, // 8px
+  '2\\.5': 0.625rem, // 10px
+  '3': 0.75rem, // 12px
+  '3\\.5': 0.875rem, // 14px
+  '4': 1rem, // 16px
+  '5': 1.25rem, // 20px
+  '6': 1.5rem, // 24px
+  '7': 1.75rem, // 28px
+  '8': 2rem, // 32px
+  '9': 2.25rem, // 36px
+  '10': 2.5rem, // 40px
+  '11': 2.75rem, // 44px
+  '12': 3rem, // 48px
+  '14': 3.5rem, // 56px
+  '16': 4rem, // 64px
+  '20': 5rem, // 80px
+  '24': 6rem, // 96px
+  '28': 7rem, // 112px
+  '32': 8rem, // 128px
+  '36': 9rem, // 144px
+  '40': 10rem, // 160px
+  '44': 11rem, // 176px
+  '48': 12rem, // 192px
+  '52': 13rem, // 208px
+  '56': 14rem, // 224px
+  '60': 15rem, // 240px
+  '64': 16rem, // 256px
+  '72': 18rem, // 288px
+  '80': 20rem, // 320px
+  '96': 24rem // 384px
+);
+
 $flex-properties: (
   'direction': ('name': '', 'map': $flex-direction, 'property': 'flex-direction'),
   'justify': ('name': 'justify-', 'map': $justify-content, 'property': 'justify-content'),
@@ -95,5 +133,8 @@ $flex-properties: (
   'grow': ('name': 'grow-', 'map': $flex-grow, 'property': 'flex-grow'),
   'shrink': ('name': 'shrink-', 'map': $flex-shrink, 'property': 'flex-shrink'),
   'basis': ('name': 'basis-', 'map': $flex-basis, 'property': 'flex-basis'),
-  'order': ('name': 'order-', 'map': $order, 'property': 'order')
+  'order': ('name': 'order-', 'map': $order, 'property': 'order'),
+  'gap': ('name': 'gap-', 'map': $gap-sizes, 'property': 'gap'),
+  'gap-y': ('name': 'gap-y-', 'map': $gap-sizes, 'property': 'row-gap'),
+  'gap-x': ('name': 'gap-x-', 'map': $gap-sizes, 'property': 'column-gap'),
 );