@lumx/react 2.2.16 → 2.2.17

package/esm/_internal/FlexBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;\nexport type GapSize = Extract<Size, 'regular' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface FlexBoxProps extends GenericProps {\n    /** Children elements. */\n    children?: ReactNode;\n    /** Whether the \"content filling space\" is enabled or not. */\n    fillSpace?: boolean;\n    /** Gap space between flexbox items. */\n    gap?: GapSize;\n    /** Flex horizontal alignment. */\n    hAlign?: VerticalAlignment;\n    /** Whether the \"auto margin\" is enabled all around or not. */\n    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];\n    /** Whether the \"content shrink\" is disabled or not. */\n    noShrink?: boolean;\n    /** Flex direction. */\n    orientation?: Orientation;\n    /** Flex vertical alignment. */\n    vAlign?: HorizontalAlignment;\n    /** Whether the \"flex wrap\" is enabled or not. */\n    wrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'FlexBox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * FlexBox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        fillSpace,\n        gap,\n        hAlign,\n        marginAuto,\n        noShrink,\n        orientation,\n        vAlign,\n        wrap,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),\n                    vAlign,\n                    hAlign,\n                    gap,\n                }),\n                wrap && `${CLASSNAME}--wrap`,\n                fillSpace && `${CLASSNAME}--fill-space`,\n                noShrink && `${CLASSNAME}--no-shrink`,\n                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n            )}\n        >\n            {children}\n        </div>\n    );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}
+{"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;\nexport type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface FlexBoxProps extends GenericProps {\n    /** Children elements. */\n    children?: ReactNode;\n    /** Whether the \"content filling space\" is enabled or not. */\n    fillSpace?: boolean;\n    /** Gap space between flexbox items. */\n    gap?: GapSize;\n    /** Flex horizontal alignment. */\n    hAlign?: VerticalAlignment;\n    /** Whether the \"auto margin\" is enabled all around or not. */\n    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];\n    /** Whether the \"content shrink\" is disabled or not. */\n    noShrink?: boolean;\n    /** Flex direction. */\n    orientation?: Orientation;\n    /** Flex vertical alignment. */\n    vAlign?: HorizontalAlignment;\n    /** Whether the \"flex wrap\" is enabled or not. */\n    wrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'FlexBox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * FlexBox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        fillSpace,\n        gap,\n        hAlign,\n        marginAuto,\n        noShrink,\n        orientation,\n        vAlign,\n        wrap,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),\n                    vAlign,\n                    hAlign,\n                    gap,\n                }),\n                wrap && `${CLASSNAME}--wrap`,\n                fillSpace && `${CLASSNAME}--fill-space`,\n                noShrink && `${CLASSNAME}--no-shrink`,\n                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n            )}\n        >\n            {children}\n        </div>\n    );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}

package/esm/_internal/components.js

@@ -58,6 +58,7 @@ var Size = {
   xxl: 'xxl',
   tiny: 'tiny',
   regular: 'regular',
+  medium: 'medium',
   big: 'big',
   huge: 'huge'
 };

package/esm/_internal/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../../../src/components/index.ts"],"sourcesContent":["import { ValueOf } from '@lumx/react/utils';\n\n/**\n * Alignments.\n */\nexport const Alignment = {\n    bottom: 'bottom',\n    center: 'center',\n    end: 'end',\n    left: 'left',\n    right: 'right',\n    spaceAround: 'space-around',\n    spaceBetween: 'space-between',\n    start: 'start',\n    top: 'top',\n} as const;\nexport type Alignment = ValueOf<typeof Alignment>;\nexport type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;\nexport type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;\n\n/**\n * See SCSS variable $lumx-color-palette\n */\nexport const ColorPalette = {\n    primary: 'primary',\n    secondary: 'secondary',\n    blue: 'blue',\n    dark: 'dark',\n    green: 'green',\n    yellow: 'yellow',\n    red: 'red',\n    light: 'light',\n    grey: 'grey',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette | string;\n\n/**\n * See SCSS variable $lumx-color-variants\n */\nexport const ColorVariant = {\n    D1: 'D1',\n    D2: 'D2',\n    L1: 'L1',\n    L2: 'L2',\n    L3: 'L3',\n    L4: 'L4',\n    L5: 'L5',\n    L6: 'L6',\n    N: 'N',\n} as const;\nexport type ColorVariant = ValueOf<typeof ColorVariant>;\n\nexport const Theme = {\n    light: 'light',\n    dark: 'dark',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;\n\nexport const Size = {\n    xxs: 'xxs',\n    xs: 'xs',\n    s: 's',\n    m: 'm',\n    l: 'l',\n    xl: 'xl',\n    xxl: 'xxl',\n    tiny: 'tiny',\n    regular: 'regular',\n    big: 'big',\n    huge: 'huge',\n} as const;\nexport type Size = ValueOf<typeof Size>;\nexport type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\nexport const Orientation = {\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n} as const;\nexport type Orientation = ValueOf<typeof Orientation>;\n\nexport const Emphasis = {\n    low: 'low',\n    medium: 'medium',\n    high: 'high',\n} as const;\nexport type Emphasis = ValueOf<typeof Emphasis>;\n\n/**\n * List of typographies that can't be customized.\n */\nexport const TypographyInterface = {\n    overline: 'overline',\n    caption: 'caption',\n    body1: 'body1',\n    body2: 'body2',\n    subtitle1: 'subtitle1',\n    subtitle2: 'subtitle2',\n    title: 'title',\n    headline: 'headline',\n    display1: 'display1',\n} as const;\nexport type TypographyInterface = ValueOf<typeof TypographyInterface>;\n\n/**\n * List of title typographies that can be customized (via CSS variables).\n */\nexport const TypographyTitleCustom = {\n    title1: 'custom-title1',\n    title2: 'custom-title2',\n    title3: 'custom-title3',\n    title4: 'custom-title4',\n    title5: 'custom-title5',\n    title6: 'custom-title6',\n} as const;\nexport type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;\n\n/**\n * List of typographies that can be customized (via CSS variables).\n */\nconst TypographyCustom = {\n    ...TypographyTitleCustom,\n    intro: 'intro',\n    'body-large': 'body-large',\n    body: 'body',\n    quote: 'quote',\n    'publish-info': 'publish-info',\n    button: 'button',\n} as const;\nexport type TypographyCustom = ValueOf<typeof TypographyCustom>;\n\n/**\n * List of all typographies.\n */\nexport const Typography = {\n    ...TypographyInterface,\n    custom: TypographyCustom,\n} as const;\nexport type Typography = TypographyInterface | TypographyCustom;\n\n/**\n * All available aspect ratios.\n */\nexport const AspectRatio = {\n    /** Intrinsic content ratio. */\n    original: 'original',\n    /** Ratio 16:9 */\n    wide: 'wide',\n    /** Ratio 3:2 */\n    horizontal: 'horizontal',\n    /** Ratio 3:2 */\n    vertical: 'vertical',\n    /** Ratio 1:1 */\n    square: 'square',\n    /** Ratio constrained by the parent. */\n    free: 'free',\n} as const;\nexport type AspectRatio = ValueOf<typeof AspectRatio>;\n\n/**\n * Semantic info about the purpose of the component\n */\nexport const Kind = {\n    info: 'info',\n    success: 'success',\n    warning: 'warning',\n    error: 'error',\n} as const;\nexport type Kind = ValueOf<typeof Kind>;\n"],"names":["Alignment","bottom","center","end","left","right","spaceAround","spaceBetween","start","top","ColorPalette","primary","secondary","blue","dark","green","yellow","red","light","grey","ColorVariant","D1","D2","L1","L2","L3","L4","L5","L6","N","Theme","Size","xxs","xs","s","m","l","xl","xxl","tiny","regular","big","huge","Orientation","horizontal","vertical","Emphasis","low","medium","high","TypographyInterface","overline","caption","body1","body2","subtitle1","subtitle2","title","headline","display1","TypographyTitleCustom","title1","title2","title3","title4","title5","title6","TypographyCustom","intro","body","quote","button","Typography","custom","AspectRatio","original","wide","square","free","Kind","info","success","warning","error"],"mappings":"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"}
+{"version":3,"file":"components.js","sources":["../../../src/components/index.ts"],"sourcesContent":["import { ValueOf } from '@lumx/react/utils';\n\n/**\n * Alignments.\n */\nexport const Alignment = {\n    bottom: 'bottom',\n    center: 'center',\n    end: 'end',\n    left: 'left',\n    right: 'right',\n    spaceAround: 'space-around',\n    spaceBetween: 'space-between',\n    start: 'start',\n    top: 'top',\n} as const;\nexport type Alignment = ValueOf<typeof Alignment>;\nexport type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;\nexport type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;\n\n/**\n * See SCSS variable $lumx-color-palette\n */\nexport const ColorPalette = {\n    primary: 'primary',\n    secondary: 'secondary',\n    blue: 'blue',\n    dark: 'dark',\n    green: 'green',\n    yellow: 'yellow',\n    red: 'red',\n    light: 'light',\n    grey: 'grey',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette | string;\n\n/**\n * See SCSS variable $lumx-color-variants\n */\nexport const ColorVariant = {\n    D1: 'D1',\n    D2: 'D2',\n    L1: 'L1',\n    L2: 'L2',\n    L3: 'L3',\n    L4: 'L4',\n    L5: 'L5',\n    L6: 'L6',\n    N: 'N',\n} as const;\nexport type ColorVariant = ValueOf<typeof ColorVariant>;\n\nexport const Theme = {\n    light: 'light',\n    dark: 'dark',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;\n\nexport const Size = {\n    xxs: 'xxs',\n    xs: 'xs',\n    s: 's',\n    m: 'm',\n    l: 'l',\n    xl: 'xl',\n    xxl: 'xxl',\n    tiny: 'tiny',\n    regular: 'regular',\n    medium: 'medium',\n    big: 'big',\n    huge: 'huge',\n} as const;\nexport type Size = ValueOf<typeof Size>;\nexport type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\nexport const Orientation = {\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n} as const;\nexport type Orientation = ValueOf<typeof Orientation>;\n\nexport const Emphasis = {\n    low: 'low',\n    medium: 'medium',\n    high: 'high',\n} as const;\nexport type Emphasis = ValueOf<typeof Emphasis>;\n\n/**\n * List of typographies that can't be customized.\n */\nexport const TypographyInterface = {\n    overline: 'overline',\n    caption: 'caption',\n    body1: 'body1',\n    body2: 'body2',\n    subtitle1: 'subtitle1',\n    subtitle2: 'subtitle2',\n    title: 'title',\n    headline: 'headline',\n    display1: 'display1',\n} as const;\nexport type TypographyInterface = ValueOf<typeof TypographyInterface>;\n\n/**\n * List of title typographies that can be customized (via CSS variables).\n */\nexport const TypographyTitleCustom = {\n    title1: 'custom-title1',\n    title2: 'custom-title2',\n    title3: 'custom-title3',\n    title4: 'custom-title4',\n    title5: 'custom-title5',\n    title6: 'custom-title6',\n} as const;\nexport type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;\n\n/**\n * List of typographies that can be customized (via CSS variables).\n */\nconst TypographyCustom = {\n    ...TypographyTitleCustom,\n    intro: 'intro',\n    'body-large': 'body-large',\n    body: 'body',\n    quote: 'quote',\n    'publish-info': 'publish-info',\n    button: 'button',\n} as const;\nexport type TypographyCustom = ValueOf<typeof TypographyCustom>;\n\n/**\n * List of all typographies.\n */\nexport const Typography = {\n    ...TypographyInterface,\n    custom: TypographyCustom,\n} as const;\nexport type Typography = TypographyInterface | TypographyCustom;\n\n/**\n * All available aspect ratios.\n */\nexport const AspectRatio = {\n    /** Intrinsic content ratio. */\n    original: 'original',\n    /** Ratio 16:9 */\n    wide: 'wide',\n    /** Ratio 3:2 */\n    horizontal: 'horizontal',\n    /** Ratio 3:2 */\n    vertical: 'vertical',\n    /** Ratio 1:1 */\n    square: 'square',\n    /** Ratio constrained by the parent. */\n    free: 'free',\n} as const;\nexport type AspectRatio = ValueOf<typeof AspectRatio>;\n\n/**\n * Semantic info about the purpose of the component\n */\nexport const Kind = {\n    info: 'info',\n    success: 'success',\n    warning: 'warning',\n    error: 'error',\n} as const;\nexport type Kind = ValueOf<typeof Kind>;\n"],"names":["Alignment","bottom","center","end","left","right","spaceAround","spaceBetween","start","top","ColorPalette","primary","secondary","blue","dark","green","yellow","red","light","grey","ColorVariant","D1","D2","L1","L2","L3","L4","L5","L6","N","Theme","Size","xxs","xs","s","m","l","xl","xxl","tiny","regular","medium","big","huge","Orientation","horizontal","vertical","Emphasis","low","high","TypographyInterface","overline","caption","body1","body2","subtitle1","subtitle2","title","headline","display1","TypographyTitleCustom","title1","title2","title3","title4","title5","title6","TypographyCustom","intro","body","quote","button","Typography","custom","AspectRatio","original","wide","square","free","Kind","info","success","warning","error"],"mappings":"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"}

package/esm/_internal/useFocusTrap.js

@@ -1,6 +1,9 @@
 import { useEffect } from 'react';
 import { D as DOCUMENT } from './constants.js';
 
+/** CSS selector listing all tabbable elements. */
+
+var TABBABLE_ELEMENTS_SELECTOR = "a[href]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\nbutton:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ntextarea:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"text\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"radio\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"checkbox\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\n[tabindex]:not([tabindex=\"-1\"], [disabled], [aria-disabled])";
 /**
  * Get first and last elements focusable in an element.
  *
@@ -9,7 +12,7 @@ import { D as DOCUMENT } from './constants.js';
  */
 
 function getFocusable(parentElement) {
-  var focusableElements = parentElement.querySelectorAll('a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), textarea:not([tabindex="-1"]), input[type="text"]:not([tabindex="-1"]), input[type="radio"]:not([tabindex="-1"]), input[type="checkbox"]:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])');
+  var focusableElements = parentElement.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR);
 
   if (focusableElements.length <= 0) {
     return {};
@@ -52,23 +55,26 @@ function useFocusTrap(focusZoneElement, focusElement) {
           return;
         }
 
-        var _getFocusable = getFocusable(focusZoneElement),
-            first = _getFocusable.first,
-            last = _getFocusable.last; // Prevent focus switch if no focusable available.
+        var focusable = getFocusable(focusZoneElement); // Prevent focus switch if no focusable available.
 
+        if (!focusable.first) {
+          evt.preventDefault();
+          return;
+        }
 
-        if (!first) {
+        if ( // No previous focus
+        !document.activeElement || // Previous focus is at the end of the focus zone.
+        !evt.shiftKey && document.activeElement === focusable.last || // Previous focus is outside the focus zone
+        !focusZoneElement.contains(document.activeElement)) {
+          focusable.first.focus();
           evt.preventDefault();
           return;
         }
 
-        if (evt.shiftKey) {
-          if (document.activeElement === first) {
-            last === null || last === void 0 ? void 0 : last.focus();
-            evt.preventDefault();
-          }
-        } else if (document.activeElement === last) {
-          first === null || first === void 0 ? void 0 : first.focus();
+        if ( // Focus order reversed
+        evt.shiftKey && // Previous focus is at the start of the focus zone.
+        document.activeElement === focusable.first) {
+          focusable.last.focus();
           evt.preventDefault();
         }
       };

package/esm/_internal/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\n/**\n * Get first and last elements focusable in an element.\n *\n * @param parentElement The element in which to search focusable elements.\n * @return first and last focusable elements\n */\nfunction getFocusable(parentElement: HTMLElement) {\n    const focusableElements = parentElement.querySelectorAll<HTMLElement>(\n        'a[href]:not([tabindex=\"-1\"]), button:not([tabindex=\"-1\"]), textarea:not([tabindex=\"-1\"]), input[type=\"text\"]:not([tabindex=\"-1\"]), input[type=\"radio\"]:not([tabindex=\"-1\"]), input[type=\"checkbox\"]:not([tabindex=\"-1\"]), [tabindex]:not([tabindex=\"-1\"])',\n    );\n\n    if (focusableElements.length <= 0) {\n        return {};\n    }\n\n    const first = focusableElements[0];\n    const last = focusableElements[focusableElements.length - 1];\n    return { first, last };\n}\n\n/**\n * Add a key down event handler to the given root element (document.body by default) to trap the move of focus\n * (TAB and SHIFT-TAB keys) inside the given focusZoneElement.\n * Will focus the given focus element when activating the focus trap.\n *\n * @param focusZoneElement The element in which to trap the focus.\n * @param focusElement     The element to focus when the focus trap is activated.\n * @param rootElement      The element on which the key down event will be placed.\n */\nexport function useFocusTrap(\n    focusZoneElement: HTMLElement | null,\n    focusElement?: HTMLElement | null,\n    rootElement = DOCUMENT?.body,\n): void {\n    useEffect(() => {\n        if (rootElement && focusZoneElement) {\n            (document.activeElement as HTMLElement)?.blur();\n            if (focusElement) {\n                focusElement.focus();\n            }\n\n            const onKeyDown = (evt: KeyboardEvent) => {\n                const { key } = evt;\n                if (key !== 'Tab') {\n                    return;\n                }\n                const { first, last } = getFocusable(focusZoneElement);\n\n                // Prevent focus switch if no focusable available.\n                if (!first) {\n                    evt.preventDefault();\n                    return;\n                }\n\n                if (evt.shiftKey) {\n                    if (document.activeElement === first) {\n                        last?.focus();\n                        evt.preventDefault();\n                    }\n                } else if (document.activeElement === last) {\n                    first?.focus();\n                    evt.preventDefault();\n                }\n            };\n            rootElement.addEventListener('keydown', onKeyDown);\n            return () => rootElement.removeEventListener('keydown', onKeyDown);\n        }\n        return undefined;\n    }, [focusElement, focusZoneElement, rootElement]);\n}\n"],"names":["getFocusable","parentElement","focusableElements","querySelectorAll","length","first","last","useFocusTrap","focusZoneElement","focusElement","rootElement","DOCUMENT","body","useEffect","document","activeElement","blur","focus","onKeyDown","evt","key","preventDefault","shiftKey","addEventListener","removeEventListener","undefined"],"mappings":";;;AAIA;;;;;;;AAMA,SAASA,YAAT,CAAsBC,aAAtB,EAAkD;AAC9C,MAAMC,iBAAiB,GAAGD,aAAa,CAACE,gBAAd,CACtB,2PADsB,CAA1B;;AAIA,MAAID,iBAAiB,CAACE,MAAlB,IAA4B,CAAhC,EAAmC;AAC/B,WAAO,EAAP;AACH;;AAED,MAAMC,KAAK,GAAGH,iBAAiB,CAAC,CAAD,CAA/B;AACA,MAAMI,IAAI,GAAGJ,iBAAiB,CAACA,iBAAiB,CAACE,MAAlB,GAA2B,CAA5B,CAA9B;AACA,SAAO;AAAEC,IAAAA,KAAK,EAALA,KAAF;AAASC,IAAAA,IAAI,EAAJA;AAAT,GAAP;AACH;AAED;;;;;;;;;;;AASO,SAASC,YAAT,CACHC,gBADG,EAEHC,YAFG,EAIC;AAAA,MADJC,WACI,uEADUC,QACV,aADUA,QACV,uBADUA,QAAQ,CAAEC,IACpB;AACJC,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAIH,WAAW,IAAIF,gBAAnB,EAAqC;AAAA;;AACjC,cAACM,QAAQ,CAACC,aAAV,8CAAyCC,IAAzC;;AACA,UAAIP,YAAJ,EAAkB;AACdA,QAAAA,YAAY,CAACQ,KAAb;AACH;;AAED,UAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,GAAD,EAAwB;AAAA,YAC9BC,GAD8B,GACtBD,GADsB,CAC9BC,GAD8B;;AAEtC,YAAIA,GAAG,KAAK,KAAZ,EAAmB;AACf;AACH;;AAJqC,4BAKdpB,YAAY,CAACQ,gBAAD,CALE;AAAA,YAK9BH,KAL8B,iBAK9BA,KAL8B;AAAA,YAKvBC,IALuB,iBAKvBA,IALuB;;;AAQtC,YAAI,CAACD,KAAL,EAAY;AACRc,UAAAA,GAAG,CAACE,cAAJ;AACA;AACH;;AAED,YAAIF,GAAG,CAACG,QAAR,EAAkB;AACd,cAAIR,QAAQ,CAACC,aAAT,KAA2BV,KAA/B,EAAsC;AAClCC,YAAAA,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEW,KAAN;AACAE,YAAAA,GAAG,CAACE,cAAJ;AACH;AACJ,SALD,MAKO,IAAIP,QAAQ,CAACC,aAAT,KAA2BT,IAA/B,EAAqC;AACxCD,UAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEY,KAAP;AACAE,UAAAA,GAAG,CAACE,cAAJ;AACH;AACJ,OAtBD;;AAuBAX,MAAAA,WAAW,CAACa,gBAAZ,CAA6B,SAA7B,EAAwCL,SAAxC;AACA,aAAO;AAAA,eAAMR,WAAW,CAACc,mBAAZ,CAAgC,SAAhC,EAA2CN,SAA3C,CAAN;AAAA,OAAP;AACH;;AACD,WAAOO,SAAP;AACH,GAlCQ,EAkCN,CAAChB,YAAD,EAAeD,gBAAf,EAAiCE,WAAjC,CAlCM,CAAT;AAmCH;;;;"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\n/** CSS selector listing all tabbable elements. */\nconst TABBABLE_ELEMENTS_SELECTOR = `a[href]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\nbutton:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ntextarea:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"text\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"radio\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"checkbox\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\n[tabindex]:not([tabindex=\"-1\"], [disabled], [aria-disabled])`;\n\n/**\n * Get first and last elements focusable in an element.\n *\n * @param parentElement The element in which to search focusable elements.\n * @return first and last focusable elements\n */\nfunction getFocusable(parentElement: HTMLElement) {\n    const focusableElements = parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR);\n\n    if (focusableElements.length <= 0) {\n        return {};\n    }\n\n    const first = focusableElements[0];\n    const last = focusableElements[focusableElements.length - 1];\n    return { first, last };\n}\n\n/**\n * Add a key down event handler to the given root element (document.body by default) to trap the move of focus\n * (TAB and SHIFT-TAB keys) inside the given focusZoneElement.\n * Will focus the given focus element when activating the focus trap.\n *\n * @param focusZoneElement The element in which to trap the focus.\n * @param focusElement     The element to focus when the focus trap is activated.\n * @param rootElement      The element on which the key down event will be placed.\n */\nexport function useFocusTrap(\n    focusZoneElement: HTMLElement | null,\n    focusElement?: HTMLElement | null,\n    rootElement = DOCUMENT?.body,\n): void {\n    useEffect(() => {\n        if (rootElement && focusZoneElement) {\n            (document.activeElement as HTMLElement)?.blur();\n            if (focusElement) {\n                focusElement.focus();\n            }\n\n            const onKeyDown = (evt: KeyboardEvent) => {\n                const { key } = evt;\n                if (key !== 'Tab') {\n                    return;\n                }\n                const focusable = getFocusable(focusZoneElement);\n\n                // Prevent focus switch if no focusable available.\n                if (!focusable.first) {\n                    evt.preventDefault();\n                    return;\n                }\n\n                if (\n                    // No previous focus\n                    !document.activeElement ||\n                    // Previous focus is at the end of the focus zone.\n                    (!evt.shiftKey && document.activeElement === focusable.last) ||\n                    // Previous focus is outside the focus zone\n                    !focusZoneElement.contains(document.activeElement)\n                ) {\n                    focusable.first.focus();\n                    evt.preventDefault();\n                    return;\n                }\n\n                if (\n                    // Focus order reversed\n                    evt.shiftKey &&\n                    // Previous focus is at the start of the focus zone.\n                    document.activeElement === focusable.first\n                ) {\n                    focusable.last.focus();\n                    evt.preventDefault();\n                }\n            };\n            rootElement.addEventListener('keydown', onKeyDown);\n            return () => rootElement.removeEventListener('keydown', onKeyDown);\n        }\n        return undefined;\n    }, [focusElement, focusZoneElement, rootElement]);\n}\n"],"names":["TABBABLE_ELEMENTS_SELECTOR","getFocusable","parentElement","focusableElements","querySelectorAll","length","first","last","useFocusTrap","focusZoneElement","focusElement","rootElement","DOCUMENT","body","useEffect","document","activeElement","blur","focus","onKeyDown","evt","key","focusable","preventDefault","shiftKey","contains","addEventListener","removeEventListener","undefined"],"mappings":";;;AAIA;;AACA,IAAMA,0BAA0B,meAAhC;AAQA;;;;;;;AAMA,SAASC,YAAT,CAAsBC,aAAtB,EAAkD;AAC9C,MAAMC,iBAAiB,GAAGD,aAAa,CAACE,gBAAd,CAA4CJ,0BAA5C,CAA1B;;AAEA,MAAIG,iBAAiB,CAACE,MAAlB,IAA4B,CAAhC,EAAmC;AAC/B,WAAO,EAAP;AACH;;AAED,MAAMC,KAAK,GAAGH,iBAAiB,CAAC,CAAD,CAA/B;AACA,MAAMI,IAAI,GAAGJ,iBAAiB,CAACA,iBAAiB,CAACE,MAAlB,GAA2B,CAA5B,CAA9B;AACA,SAAO;AAAEC,IAAAA,KAAK,EAALA,KAAF;AAASC,IAAAA,IAAI,EAAJA;AAAT,GAAP;AACH;AAED;;;;;;;;;;;AASO,SAASC,YAAT,CACHC,gBADG,EAEHC,YAFG,EAIC;AAAA,MADJC,WACI,uEADUC,QACV,aADUA,QACV,uBADUA,QAAQ,CAAEC,IACpB;AACJC,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAIH,WAAW,IAAIF,gBAAnB,EAAqC;AAAA;;AACjC,cAACM,QAAQ,CAACC,aAAV,8CAAyCC,IAAzC;;AACA,UAAIP,YAAJ,EAAkB;AACdA,QAAAA,YAAY,CAACQ,KAAb;AACH;;AAED,UAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,GAAD,EAAwB;AAAA,YAC9BC,GAD8B,GACtBD,GADsB,CAC9BC,GAD8B;;AAEtC,YAAIA,GAAG,KAAK,KAAZ,EAAmB;AACf;AACH;;AACD,YAAMC,SAAS,GAAGrB,YAAY,CAACQ,gBAAD,CAA9B,CALsC;;AAQtC,YAAI,CAACa,SAAS,CAAChB,KAAf,EAAsB;AAClBc,UAAAA,GAAG,CAACG,cAAJ;AACA;AACH;;AAED;AAEI,SAACR,QAAQ,CAACC,aAAV;AAEC,SAACI,GAAG,CAACI,QAAL,IAAiBT,QAAQ,CAACC,aAAT,KAA2BM,SAAS,CAACf,IAFvD;AAIA,SAACE,gBAAgB,CAACgB,QAAjB,CAA0BV,QAAQ,CAACC,aAAnC,CANL,EAOE;AACEM,UAAAA,SAAS,CAAChB,KAAV,CAAgBY,KAAhB;AACAE,UAAAA,GAAG,CAACG,cAAJ;AACA;AACH;;AAED;AAEIH,QAAAA,GAAG,CAACI,QAAJ;AAEAT,QAAAA,QAAQ,CAACC,aAAT,KAA2BM,SAAS,CAAChB,KAJzC,EAKE;AACEgB,UAAAA,SAAS,CAACf,IAAV,CAAeW,KAAf;AACAE,UAAAA,GAAG,CAACG,cAAJ;AACH;AACJ,OAnCD;;AAoCAZ,MAAAA,WAAW,CAACe,gBAAZ,CAA6B,SAA7B,EAAwCP,SAAxC;AACA,aAAO;AAAA,eAAMR,WAAW,CAACgB,mBAAZ,CAAgC,SAAhC,EAA2CR,SAA3C,CAAN;AAAA,OAAP;AACH;;AACD,WAAOS,SAAP;AACH,GA/CQ,EA+CN,CAAClB,YAAD,EAAeD,gBAAf,EAAiCE,WAAjC,CA/CM,CAAT;AAgDH;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.16",
-        "@lumx/icons": "^2.2.16",
+        "@lumx/core": "^2.2.17",
+        "@lumx/icons": "^2.2.17",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.16",
-    "gitHead": "0dfe6e9bceccdcabcd8c9b41627e01b2ef3332df"
+    "version": "2.2.17",
+    "gitHead": "61e7475ca5f8a66e8e672cefe8f694b823051afd"
 }

package/src/components/dialog/Dialog.stories.tsx

@@ -333,7 +333,7 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                         label="Checkbox input"
                     />
 
-                    <FlexBox orientation="horizontal">
+                    <FlexBox orientation="horizontal" hAlign="bottom" gap="regular">
                         <DatePickerField
                             locale="fr"
                             label="Start date"
@@ -366,6 +366,8 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                                 ))}
                             </List>
                         </Select>
+
+                        <Button isDisabled>Disabled button (focus ignored)</Button>
                     </FlexBox>
 
                     {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}

package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap

@@ -152,6 +152,8 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
         theme="light"
       />
       <FlexBox
+        gap="regular"
+        hAlign="bottom"
         orientation="horizontal"
       >
         <DatePickerField
@@ -210,6 +212,14 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
             </ListItem>
           </List>
         </Select>
+        <Button
+          emphasis="high"
+          isDisabled={true}
+          size="m"
+          theme="light"
+        >
+          Disabled button (focus ignored)
+        </Button>
       </FlexBox>
       <div
         tabIndex={0}

package/src/components/flex-box/FlexBox.stories.tsx

@@ -1,5 +1,5 @@
 import { mdiPencil } from '@lumx/icons';
-import { Alignment, Button, Icon, Orientation } from '@lumx/react';
+import { Alignment, Button, Icon, Orientation, Size } from '@lumx/react';
 import { boolean, number, select, text } from '@storybook/addon-knobs';
 import fromPairs from 'lodash/fromPairs';
 import React from 'react';
@@ -18,6 +18,7 @@ const flexViewKnobConfigs: Array<
     ['fillSpace', boolean],
     ['noShrink', boolean],
     ['wrap', boolean],
+    ['gap', select, [DEFAULT_PROPS.gap, Size.regular, Size.medium, Size.big, Size.huge]],
     ['hAlign', select, [DEFAULT_PROPS.hAlign, Alignment.center, Alignment.top, Alignment.bottom]],
     ['vAlign', select, [DEFAULT_PROPS.vAlign, Alignment.center, Alignment.right, Alignment.left]],
     ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],
@@ -52,7 +53,7 @@ const setupFlexBoxKnobs = (group: string, knobs: FlexBoxPropName[] = []) =>
 const flexChildKnobs: FlexBoxPropName[] = ['fillSpace', 'noShrink', 'marginAuto'];
 
 export const Flex = () => (
-    <FlexBox {...setupFlexBoxKnobs('-flex container', ['orientation', 'hAlign', 'vAlign', 'wrap'])}>
+    <FlexBox {...setupFlexBoxKnobs('-flex container', ['orientation', 'hAlign', 'vAlign', 'wrap', 'gap'])}>
         <FlexBox {...setupFlexBoxKnobs('start', flexChildKnobs)}>
             <Icon icon={mdiPencil} />
         </FlexBox>
@@ -78,6 +79,16 @@ const vAlign = (prefix?: string) =>
         Alignment.center,
     );
 
+const orientation = (prefix?: string) =>
+    select(
+        `${prefix ? `${prefix}: ` : ''}Set orientation`,
+        [Orientation.vertical, Orientation.horizontal],
+        Orientation.vertical,
+    );
+
+const gapSize = (prefix?: string) =>
+    select(`${prefix ? `${prefix}: ` : ''}Gap size`, [Size.regular, Size.medium, Size.big, Size.huge], Size.regular);
+
 export const HorizontalFlex = () => (
     <FlexBox
         orientation={Orientation.horizontal}
@@ -122,6 +133,21 @@ export const VerticalFlex = () => (
     </FlexBox>
 );
 
+export const GapSizeFlex = () => (
+    <FlexBox orientation={orientation()} gap={gapSize()}>
+        <Button>Item 1</Button>
+        <FlexBox vAlign={Alignment.left}>
+            <Button>Item 2</Button>
+        </FlexBox>
+        <FlexBox>
+            <Button>Item 3</Button>
+        </FlexBox>
+        <FlexBox vAlign={Alignment.right}>
+            <Button>Item 4</Button>
+        </FlexBox>
+    </FlexBox>
+);
+
 export const WrapFlex = () => (
     <FlexBox
         orientation={Orientation.horizontal}

package/src/components/flex-box/FlexBox.tsx

@@ -6,7 +6,7 @@ import React, { forwardRef, ReactNode } from 'react';
 import { Size } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
-export type GapSize = Extract<Size, 'regular' | 'big' | 'huge'>;
+export type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;
 
 /**
  * Defines the props of the component.

package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap

@@ -89,6 +89,86 @@ Array [
 ]
 `;
 
+exports[`<FlexBox> Snapshots and structure should render story 'GapSizeFlex' 1`] = `
+Array [
+  <div
+    className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--gap-regular"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 1
+    </Button>
+    <FlexBox
+      vAlign="left"
+    >
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Item 2
+      </Button>
+    </FlexBox>
+    <FlexBox>
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Item 3
+      </Button>
+    </FlexBox>
+    <FlexBox
+      vAlign="right"
+    >
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Item 4
+      </Button>
+    </FlexBox>
+  </div>,
+  <div
+    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 2
+    </Button>
+  </div>,
+  <div
+    className="lumx-flex-box"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 3
+    </Button>
+  </div>,
+  <div
+    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-right"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 4
+    </Button>
+  </div>,
+]
+`;
+
 exports[`<FlexBox> Snapshots and structure should render story 'HorizontalFlex' 1`] = `
 Array [
   <div

package/src/components/index.ts

@@ -67,6 +67,7 @@ export const Size = {
     xxl: 'xxl',
     tiny: 'tiny',
     regular: 'regular',
+    medium: 'medium',
     big: 'big',
     huge: 'huge',
 } as const;

package/src/hooks/useFocusTrap.ts

@@ -2,6 +2,15 @@ import { useEffect } from 'react';
 
 import { DOCUMENT } from '@lumx/react/constants';
 
+/** CSS selector listing all tabbable elements. */
+const TABBABLE_ELEMENTS_SELECTOR = `a[href]:not([tabindex="-1"], [disabled], [aria-disabled]),
+button:not([tabindex="-1"], [disabled], [aria-disabled]),
+textarea:not([tabindex="-1"], [disabled], [aria-disabled]),
+input[type="text"]:not([tabindex="-1"], [disabled], [aria-disabled]),
+input[type="radio"]:not([tabindex="-1"], [disabled], [aria-disabled]),
+input[type="checkbox"]:not([tabindex="-1"], [disabled], [aria-disabled]),
+[tabindex]:not([tabindex="-1"], [disabled], [aria-disabled])`;
+
 /**
  * Get first and last elements focusable in an element.
  *
@@ -9,9 +18,7 @@ import { DOCUMENT } from '@lumx/react/constants';
  * @return first and last focusable elements
  */
 function getFocusable(parentElement: HTMLElement) {
-    const focusableElements = parentElement.querySelectorAll<HTMLElement>(
-        'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), textarea:not([tabindex="-1"]), input[type="text"]:not([tabindex="-1"]), input[type="radio"]:not([tabindex="-1"]), input[type="checkbox"]:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])',
-    );
+    const focusableElements = parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR);
 
     if (focusableElements.length <= 0) {
         return {};
@@ -48,21 +55,34 @@ export function useFocusTrap(
                 if (key !== 'Tab') {
                     return;
                 }
-                const { first, last } = getFocusable(focusZoneElement);
+                const focusable = getFocusable(focusZoneElement);
 
                 // Prevent focus switch if no focusable available.
-                if (!first) {
+                if (!focusable.first) {
+                    evt.preventDefault();
+                    return;
+                }
+
+                if (
+                    // No previous focus
+                    !document.activeElement ||
+                    // Previous focus is at the end of the focus zone.
+                    (!evt.shiftKey && document.activeElement === focusable.last) ||
+                    // Previous focus is outside the focus zone
+                    !focusZoneElement.contains(document.activeElement)
+                ) {
+                    focusable.first.focus();
                     evt.preventDefault();
                     return;
                 }
 
-                if (evt.shiftKey) {
-                    if (document.activeElement === first) {
-                        last?.focus();
-                        evt.preventDefault();
-                    }
-                } else if (document.activeElement === last) {
-                    first?.focus();
+                if (
+                    // Focus order reversed
+                    evt.shiftKey &&
+                    // Previous focus is at the start of the focus zone.
+                    document.activeElement === focusable.first
+                ) {
+                    focusable.last.focus();
                     evt.preventDefault();
                 }
             };

package/types.d.ts

@@ -95,6 +95,7 @@ export declare const Size: {
 	readonly xxl: "xxl";
 	readonly tiny: "tiny";
 	readonly regular: "regular";
+	readonly medium: "medium";
 	readonly big: "big";
 	readonly huge: "huge";
 };
@@ -1091,7 +1092,7 @@ export interface FlagProps extends GenericProps {
  */
 export declare const Flag: Comp<FlagProps, HTMLDivElement>;
 export declare type MarginAutoAlignment = Extract<Alignment, "top" | "bottom" | "right" | "left">;
-export declare type GapSize = Extract<Size, "regular" | "big" | "huge">;
+export declare type GapSize = Extract<Size, "regular" | "medium" | "big" | "huge">;
 /**
  * Defines the props of the component.
  */