@lumx/core 3.20.1-alpha.4 → 3.20.1-alpha.40

package/js/constants/design-tokens.js

@@ -1,7 +1,3 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Do not edit directly
  * Generated on Mon, 13 Jan 2025 09:24:38 GMT
@@ -2326,4 +2322,4 @@ const DESIGN_TOKENS = {
     },
 };
 
-exports.DESIGN_TOKENS = DESIGN_TOKENS;
+export { DESIGN_TOKENS };

package/js/constants/index.d.ts

@@ -0,0 +1,232 @@
+import { ValueOf } from '../types/ValueOf';
+/**
+ * The prefix to use for the CSS classes.
+ */
+export declare const CSS_PREFIX = "lumx";
+/**
+ * Key codes.
+ */
+export * from './keycodes';
+/**
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
+ */
+export declare const DIALOG_TRANSITION_DURATION = 400;
+export declare const EXPANSION_PANEL_TRANSITION_DURATION = 400;
+export declare const NOTIFICATION_TRANSITION_DURATION = 200;
+export declare const SLIDESHOW_TRANSITION_DURATION = 5000;
+/**
+ * Delay on hover after which we open or close the tooltip.
+ * Only applies to devices supporting pointer hover.
+ */
+export declare const TOOLTIP_HOVER_DELAY: {
+    open: number;
+    close: number;
+};
+/**
+ * Delay on long press after which we open or close the tooltip.
+ * Only applies to devices not supporting pointer hover.
+ */
+export declare const TOOLTIP_LONG_PRESS_DELAY: {
+    open: number;
+    close: number;
+};
+/**
+ * Alignments.
+ */
+export declare const Alignment: {
+    readonly bottom: "bottom";
+    readonly center: "center";
+    readonly end: "end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly spaceAround: "space-around";
+    readonly spaceBetween: "space-between";
+    readonly spaceEvenly: "space-evenly";
+    readonly start: "start";
+    readonly top: "top";
+};
+export type Alignment = ValueOf<typeof Alignment>;
+export type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+export type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
+export declare const Theme: {
+    readonly light: "light";
+    readonly dark: "dark";
+};
+export type Theme = ValueOf<typeof Theme>;
+export declare const Size: {
+    readonly xxs: "xxs";
+    readonly xs: "xs";
+    readonly s: "s";
+    readonly m: "m";
+    readonly l: "l";
+    readonly xl: "xl";
+    readonly xxl: "xxl";
+    readonly tiny: "tiny";
+    readonly regular: "regular";
+    readonly medium: "medium";
+    readonly big: "big";
+    readonly huge: "huge";
+};
+export type Size = ValueOf<typeof Size>;
+export type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+export declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+export type Orientation = ValueOf<typeof Orientation>;
+export declare const Emphasis: {
+    readonly low: "low";
+    readonly medium: "medium";
+    readonly high: "high";
+};
+export type Emphasis = ValueOf<typeof Emphasis>;
+/**
+ * List of typographies that can't be customized.
+ */
+export declare const TypographyInterface: {
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+export type TypographyInterface = ValueOf<typeof TypographyInterface>;
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+export declare const TypographyTitleCustom: {
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+export declare const TypographyCustom: {
+    readonly intro: "custom-intro";
+    readonly 'body-large': "custom-body-large";
+    readonly body: "custom-body";
+    readonly quote: "custom-quote";
+    readonly 'publish-info': "custom-publish-info";
+    readonly button: "custom-button";
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+export type TypographyCustom = ValueOf<typeof TypographyCustom>;
+/**
+ * List of all typographies.
+ */
+export declare const Typography: {
+    readonly custom: {
+        readonly intro: "custom-intro";
+        readonly 'body-large': "custom-body-large";
+        readonly body: "custom-body";
+        readonly quote: "custom-quote";
+        readonly 'publish-info': "custom-publish-info";
+        readonly button: "custom-button";
+        readonly title1: "custom-title1";
+        readonly title2: "custom-title2";
+        readonly title3: "custom-title3";
+        readonly title4: "custom-title4";
+        readonly title5: "custom-title5";
+        readonly title6: "custom-title6";
+    };
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+export type Typography = TypographyInterface | TypographyCustom;
+/**
+ * All available aspect ratios.
+ */
+export declare const AspectRatio: {
+    /** Intrinsic content ratio. */
+    readonly original: "original";
+    /** Ratio 3:1 */
+    readonly panoramic: "panoramic";
+    /** Ratio 16:9 */
+    readonly wide: "wide";
+    /** Ratio 3:2 */
+    readonly horizontal: "horizontal";
+    /** Ratio 3:2 */
+    readonly vertical: "vertical";
+    /** Ratio 1:1 */
+    readonly square: "square";
+    /** Ratio constrained by the parent. */
+    readonly free: "free";
+};
+export type AspectRatio = ValueOf<typeof AspectRatio>;
+/**
+ * Semantic info about the purpose of the component
+ */
+export declare const Kind: {
+    readonly info: "info";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+};
+export type Kind = ValueOf<typeof Kind>;
+/**
+ * All available white-space values
+ * */
+export declare const WhiteSpace: {
+    normal: string;
+    nowrap: string;
+    pre: string;
+    'pre-wrap': string;
+    'pre-line': string;
+    'break-spaces': string;
+};
+export type WhiteSpace = ValueOf<typeof WhiteSpace>;
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+export declare const ColorPalette: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly blue: "blue";
+    readonly dark: "dark";
+    readonly green: "green";
+    readonly yellow: "yellow";
+    readonly red: "red";
+    readonly light: "light";
+    readonly grey: "grey";
+};
+export type ColorPalette = ValueOf<typeof ColorPalette>;
+export type Color = ColorPalette | string;
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+export declare const ColorVariant: {
+    readonly D1: "D1";
+    readonly D2: "D2";
+    readonly L1: "L1";
+    readonly L2: "L2";
+    readonly L3: "L3";
+    readonly L4: "L4";
+    readonly L5: "L5";
+    readonly L6: "L6";
+    readonly N: "N";
+};
+export type ColorVariant = ValueOf<typeof ColorVariant>;
+/** ColorPalette with all possible color variant combination */
+export type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;

package/js/constants/index.js

@@ -1,8 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var js_constants_keycodes = require('./keycodes.js');
+export { BACKSPACE_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESCAPE_KEY_CODE, LEFT_KEY_CODE, RIGHT_KEY_CODE, SPACE_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE } from './keycodes.js';
 
 /**
  * The prefix to use for the CSS classes.
@@ -186,33 +182,4 @@ const ColorVariant = {
     N: 'N',
 };
 
-exports.BACKSPACE_KEY_CODE = js_constants_keycodes.BACKSPACE_KEY_CODE;
-exports.DOWN_KEY_CODE = js_constants_keycodes.DOWN_KEY_CODE;
-exports.ENTER_KEY_CODE = js_constants_keycodes.ENTER_KEY_CODE;
-exports.ESCAPE_KEY_CODE = js_constants_keycodes.ESCAPE_KEY_CODE;
-exports.LEFT_KEY_CODE = js_constants_keycodes.LEFT_KEY_CODE;
-exports.RIGHT_KEY_CODE = js_constants_keycodes.RIGHT_KEY_CODE;
-exports.SPACE_KEY_CODE = js_constants_keycodes.SPACE_KEY_CODE;
-exports.TAB_KEY_CODE = js_constants_keycodes.TAB_KEY_CODE;
-exports.UP_KEY_CODE = js_constants_keycodes.UP_KEY_CODE;
-exports.Alignment = Alignment;
-exports.AspectRatio = AspectRatio;
-exports.CSS_PREFIX = CSS_PREFIX;
-exports.ColorPalette = ColorPalette;
-exports.ColorVariant = ColorVariant;
-exports.DIALOG_TRANSITION_DURATION = DIALOG_TRANSITION_DURATION;
-exports.EXPANSION_PANEL_TRANSITION_DURATION = EXPANSION_PANEL_TRANSITION_DURATION;
-exports.Emphasis = Emphasis;
-exports.Kind = Kind;
-exports.NOTIFICATION_TRANSITION_DURATION = NOTIFICATION_TRANSITION_DURATION;
-exports.Orientation = Orientation;
-exports.SLIDESHOW_TRANSITION_DURATION = SLIDESHOW_TRANSITION_DURATION;
-exports.Size = Size;
-exports.TOOLTIP_HOVER_DELAY = TOOLTIP_HOVER_DELAY;
-exports.TOOLTIP_LONG_PRESS_DELAY = TOOLTIP_LONG_PRESS_DELAY;
-exports.Theme = Theme;
-exports.Typography = Typography;
-exports.TypographyCustom = TypographyCustom;
-exports.TypographyInterface = TypographyInterface;
-exports.TypographyTitleCustom = TypographyTitleCustom;
-exports.WhiteSpace = WhiteSpace;
+export { Alignment, AspectRatio, CSS_PREFIX, ColorPalette, ColorVariant, DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, Emphasis, Kind, NOTIFICATION_TRANSITION_DURATION, Orientation, SLIDESHOW_TRANSITION_DURATION, Size, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };

package/js/constants/keycodes.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The down key code.
+ */
+export declare const DOWN_KEY_CODE = 40;
+/**
+ * The enter/return key code.
+ */
+export declare const ENTER_KEY_CODE = 13;
+/**
+ * The space key code.
+ */
+export declare const SPACE_KEY_CODE = 32;
+/**
+ * The escape key code.
+ */
+export declare const ESCAPE_KEY_CODE = 27;
+/**
+ * The left key code.
+ */
+export declare const LEFT_KEY_CODE = 37;
+/**
+ * The right key code.
+ */
+export declare const RIGHT_KEY_CODE = 39;
+/**
+ * The tab key code.
+ */
+export declare const TAB_KEY_CODE = 9;
+/**
+ * The up key code.
+ */
+export declare const UP_KEY_CODE = 38;
+/**
+ * The up key code.
+ */
+export declare const BACKSPACE_KEY_CODE = 8;

package/js/constants/keycodes.js

@@ -1,7 +1,3 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * The down key code.
  */
@@ -39,12 +35,4 @@ const UP_KEY_CODE = 38;
  */
 const BACKSPACE_KEY_CODE = 8;
 
-exports.BACKSPACE_KEY_CODE = BACKSPACE_KEY_CODE;
-exports.DOWN_KEY_CODE = DOWN_KEY_CODE;
-exports.ENTER_KEY_CODE = ENTER_KEY_CODE;
-exports.ESCAPE_KEY_CODE = ESCAPE_KEY_CODE;
-exports.LEFT_KEY_CODE = LEFT_KEY_CODE;
-exports.RIGHT_KEY_CODE = RIGHT_KEY_CODE;
-exports.SPACE_KEY_CODE = SPACE_KEY_CODE;
-exports.TAB_KEY_CODE = TAB_KEY_CODE;
-exports.UP_KEY_CODE = UP_KEY_CODE;
+export { BACKSPACE_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESCAPE_KEY_CODE, LEFT_KEY_CODE, RIGHT_KEY_CODE, SPACE_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE };

package/js/custom-colors.d.ts

@@ -0,0 +1,25 @@
+interface Variants {
+    D2?: string;
+    D1?: string;
+    N?: string;
+    L1?: string;
+    L2?: string;
+    L3?: string;
+    L4?: string;
+    L5?: string;
+    L6?: string;
+}
+type ColorPalette = Partial<Record<'primary' | 'secondary', Variants>>;
+/**
+ * Generate CSS variables for the given color palette.
+ */
+export declare function generateCSSColorVariables(palette: ColorPalette): string;
+/**
+ * Set primary and secondary custom colors.
+ *
+ * @param sheet        The sheet to insert the custom rules in.
+ * @param colorPalette The custom color palette.
+ * @param selector     The selector used to scope the custom colors (defaults to ':root').
+ */
+export declare function setCustomColors(sheet: CSSStyleSheet, colorPalette: ColorPalette, selector?: string): void;
+export {};

package/js/custom-colors.js

@@ -1,7 +1,3 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Generate CSS variables for the given color palette.
  */
@@ -44,5 +40,4 @@ function setCustomColors(sheet, colorPalette, selector = ':root') {
     _addCSSRule(sheet, selector, rules, 0);
 }
 
-exports.generateCSSColorVariables = generateCSSColorVariables;
-exports.setCustomColors = setCustomColors;
+export { generateCSSColorVariables, setCustomColors };

package/js/types/Callback.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/Falsy.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/{GenericProps.ts → GenericProps.d.ts}

@@ -1,5 +1,4 @@
 import type { HasClassName } from './HasClassName';
-
 /**
  * Define a generic props types.
  */

package/js/types/GenericProps.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/HasAriaLabelOrLabelledBy.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+export type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
+    /**
+     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+     * Although it is not recommended, aria-label can be used instead if no visible element is available.
+     */
+    'aria-labelledby': T;
+    /** The label of the dialog. */
+    'aria-label'?: undefined;
+} : {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+};

package/js/types/HasAriaLabelOrLabelledBy.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/HasClassName.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/HasCloseMode.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/{HasTheme.ts → HasTheme.d.ts}

@@ -1,5 +1,4 @@
 import type { Theme } from '../constants';
-
 export interface HasTheme {
     /**
      * Theme adapting the component to light or dark background.

package/js/types/HasTheme.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/HeadingElement.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/Point.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A point coordinate in 2D space
+ */
+export type Point = {
+    x: number;
+    y: number;
+};

package/js/types/Point.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/Predicate.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/RectSize.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Rectangle size
+ */
+export type RectSize = {
+    width: number;
+    height: number;
+};

package/js/types/RectSize.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/{TextElement.ts → TextElement.d.ts}

@@ -1,4 +1,3 @@
 import type { HeadingElement } from './HeadingElement';
-
 /** Union type of all text elements */
 export type TextElement = 'span' | 'p' | HeadingElement;

package/js/types/TextElement.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/ValueOf.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/index.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/utils/className/fontColorClass.d.ts

@@ -0,0 +1,6 @@
+import { ColorVariant, ColorWithVariants } from '../../constants';
+/**
+ * Returns the classname associated to the given color and variant.
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
+ */
+export declare function fontColorClass(propColor?: ColorWithVariants, propColorVariant?: ColorVariant): string | undefined;

package/js/utils/className/fontColorClass.js

@@ -1,10 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var js_constants_index = require('../../constants/index.js');
-var js_utils_className_resolveColorWithVariants = require('./resolveColorWithVariants.js');
-require('../../constants/keycodes.js');
+import { ColorVariant } from '../../constants/index.js';
+import { resolveColorWithVariants } from './resolveColorWithVariants.js';
 
 /**
  * Returns the classname associated to the given color and variant.
@@ -13,8 +8,8 @@ require('../../constants/keycodes.js');
 function fontColorClass(propColor, propColorVariant) {
     if (!propColor)
         return undefined;
-    const [color, colorVariant = js_constants_index.ColorVariant.N] = js_utils_className_resolveColorWithVariants.resolveColorWithVariants(propColor, propColorVariant);
+    const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
     return `lumx-color-font-${color}-${colorVariant}`;
 }
 
-exports.fontColorClass = fontColorClass;
+export { fontColorClass };

package/js/utils/className/getBasicClass.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Get the basic CSS class for the given type.
+ *
+ * @param  prefix The class name prefix for the generated CSS class.
+ * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
+ * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
+ * @return The basic CSS class.
+ */
+export declare function getBasicClass({ prefix, type, value, }: {
+    prefix: string;
+    type: string;
+    value: string | number | boolean | undefined;
+}): string;

package/js/utils/className/getBasicClass.js

@@ -1,14 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var isBoolean = require('lodash/isBoolean');
-var kebabCase = require('lodash/kebabCase');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var isBoolean__default = /*#__PURE__*/_interopDefaultLegacy(isBoolean);
-var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
+import isBoolean from 'lodash/isBoolean';
+import kebabCase from 'lodash/kebabCase';
 
 /**
  * Get the basic CSS class for the given type.
@@ -19,18 +10,18 @@ var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
  * @return The basic CSS class.
  */
 function getBasicClass({ prefix, type, value, }) {
-    if (isBoolean__default["default"](value)) {
+    if (isBoolean(value)) {
         if (!value) {
             // False value should not return a class.
             return '';
         }
         const booleanPrefixes = ['has', 'is'];
         if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
-            return `${prefix}--${kebabCase__default["default"](type)}`;
+            return `${prefix}--${kebabCase(type)}`;
         }
-        return `${prefix}--is-${kebabCase__default["default"](type)}`;
+        return `${prefix}--is-${kebabCase(type)}`;
     }
-    return `${prefix}--${kebabCase__default["default"](type)}-${value}`;
+    return `${prefix}--${kebabCase(type)}-${value}`;
 }
 
-exports.getBasicClass = getBasicClass;
+export { getBasicClass };

package/js/utils/className/{getRootClassName.ts → getRootClassName.d.ts}

@@ -1,10 +1,3 @@
-import kebabCase from 'lodash/kebabCase';
-
-import { CSS_PREFIX } from '../../constants';
-
-// See https://regex101.com/r/YjS1uI/3
-const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
-
 /**
  * Get the name of the root CSS class of a component based on its name.
  *
@@ -15,11 +8,4 @@ const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
  * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in
  *         lower-snake-case.
  */
-export function getRootClassName(componentName: string, subComponent?: boolean): string {
-    const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;
-
-    if (subComponent) {
-        return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');
-    }
-    return formattedClassName;
-}
+export declare function getRootClassName(componentName: string, subComponent?: boolean): string;

package/js/utils/className/getRootClassName.js

@@ -1,14 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var kebabCase = require('lodash/kebabCase');
-var js_constants_index = require('../../constants/index.js');
-require('../../constants/keycodes.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
+import kebabCase from 'lodash/kebabCase';
+import { CSS_PREFIX } from '../../constants/index.js';
 
 // See https://regex101.com/r/YjS1uI/3
 const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
@@ -23,11 +14,11 @@ const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
  *         lower-snake-case.
  */
 function getRootClassName(componentName, subComponent) {
-    const formattedClassName = `${js_constants_index.CSS_PREFIX}-${kebabCase__default["default"](componentName)}`;
+    const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;
     if (subComponent) {
         return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');
     }
     return formattedClassName;
 }
 
-exports.getRootClassName = getRootClassName;
+export { getRootClassName };

package/js/utils/className/{getTypographyClassName.ts → getTypographyClassName.d.ts}

@@ -1,9 +1,6 @@
 import { Typography } from '../../constants';
-
 /**
  * Returns the classname associated to the given typography.
  * For example, for `Typography.title` it returns `lumx-typography-title`
  */
-export const getTypographyClassName = (typography: Typography) => {
-    return `lumx-typography-${typography}`;
-};
+export declare const getTypographyClassName: (typography: Typography) => string;