@loadsmart/miranda-wc 2.0.1 → 3.0.0-alpha.1

package/dist/mixins/polymorphic-tag/index.d.ts

@@ -1,3 +1,2 @@
 export { PolymorphicTagMixin } from './polymorphic-tag';
 export type { HTMLTag } from './polymorphic-tag.types';
-//# sourceMappingURL=index.d.ts.map

package/dist/mixins/polymorphic-tag/polymorphic-tag.constants.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Based on the `HTMLElementTagNameMap`, from lib.dom.d.ts
+ */
+export declare const HTML_TAGS: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "menu", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr"];

package/dist/mixins/polymorphic-tag/polymorphic-tag.d.ts

@@ -1,5 +1,7 @@
 import type { LitElement } from 'lit';
-import type { Constructor, HTMLTag, PolymorphicTagInterface } from './polymorphic-tag.types';
+import type { StaticValue } from 'lit/static-html.js';
+import type { HTMLTag } from './polymorphic-tag.types';
+import type { Constructor } from '../../utils/types';
 /**
  * This mixin allows a component to render with different types of tags, based on the provided `allowedTags`.
  * Be aware that, this mixin does **NOT** change the type (TS-wise) of your component, so, for tags that have their specific
@@ -9,5 +11,11 @@ import type { Constructor, HTMLTag, PolymorphicTagInterface } from './polymorphi
  * TL;DR; either limit the tags you will allow for component, or add the additional attributes to your component to
  * comply with the tags that will be supported.
  */
-export declare const PolymorphicTagMixin: <T extends Constructor<LitElement>>(superClass: T, allowedTags?: HTMLTag[], fallbackTag?: HTMLTag) => Constructor<PolymorphicTagInterface> & T;
-//# sourceMappingURL=polymorphic-tag.d.ts.map
+export declare const PolymorphicTagMixin: <T extends Constructor<LitElement>, AllowedTags extends readonly ("object" | "small" | "link" | "sub" | "sup" | "map" | "input" | "progress" | "select" | "label" | "button" | "title" | "slot" | "style" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "ins" | "kbd" | "legend" | "li" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "source" | "span" | "strong" | "summary" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr")[] = readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "menu", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr"]>({ superClass, allowedTags, fallbackTag, }: {
+    superClass: T;
+    allowedTags?: AllowedTags | undefined;
+    fallbackTag?: "object" | "small" | "link" | "sub" | "sup" | "map" | "input" | "progress" | "select" | "label" | "button" | "title" | "slot" | "style" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "ins" | "kbd" | "legend" | "li" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "source" | "span" | "strong" | "summary" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | undefined;
+}) => Constructor<{
+    as: AllowedTags[number];
+    readonly tag: StaticValue;
+}> & T;

package/dist/mixins/polymorphic-tag/polymorphic-tag.types.d.ts

@@ -1,12 +1,3 @@
-import type { StaticValue } from 'lit/static-html.js';
-/**
- * Based on the `HTMLElementTagNameMap`, from lib.dom.d.ts
- */
-export declare const HTML_TAGS: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "menu", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr"];
+import type { HTML_TAGS } from './polymorphic-tag.constants';
 export type HTMLTag = (typeof HTML_TAGS)[number];
 export type Constructor<T = {}> = new (...args: any[]) => T;
-export declare class PolymorphicTagInterface {
-    as: HTMLTag;
-    readonly tag: StaticValue;
-}
-//# sourceMappingURL=polymorphic-tag.types.d.ts.map

package/dist/mixins/with-id/index.d.ts

@@ -0,0 +1 @@
+export { WithIdElementMixin } from './with-id.mixin';

package/dist/mixins/with-id/with-id.mixin.d.ts

@@ -0,0 +1,6 @@
+import type { LitElement } from 'lit';
+import type { Constructor } from '../../utils/types';
+/**
+ * Sets the element id with a random value, in case it is not already set.
+ */
+export declare const WithIdElementMixin: <T extends Constructor<LitElement>>(superClass: T, prefix?: string) => T;

package/dist/stories/story-utils.d.ts

@@ -1,4 +1,19 @@
 import type { Token } from '@loadsmart/miranda-tokens';
 export declare function toDesignToken(token: Token): string;
 export declare function getHexColor(token: Token): string;
-//# sourceMappingURL=story-utils.d.ts.map
+/**
+ * Convert the provided value from `rem` to `px`.
+ *
+ * @example
+ * ```js
+ * // Considering 1rem = 16px
+ * toPx('0.625rem'); // returns '10px'
+ * toPx('1rem'); // returns '16px'
+ * ```
+ *
+ * @param value - value, in rem, to convert.
+ * @param base - value, in pixels, to be considered for `1rem`.
+ * @returns value converted to `px`.
+ *
+ */
+export declare function toPx(value: number | string, base?: number): string;

package/dist/styles/index.d.ts

@@ -1,14 +1,7 @@
-import active from './activable';
-import focus from './focusable';
-import hover from './hoverable';
-export { default as m, mr, ml, mx, mt, mb, my } from './margin';
-export { default as p, pr, pl, px, pt, pb, py } from './padding';
-export { default as transition } from './transition';
-export { default as typography } from './typography';
-export { default as disabled } from './disableable';
-export declare const on: {
-    active: typeof active;
-    focus: typeof focus;
-    hover: typeof hover;
-};
-//# sourceMappingURL=index.d.ts.map
+export * from './margin';
+export * from './media';
+export * from './on';
+export * from './padding';
+export * from './skeleton';
+export * from './transition';
+export * from './typography';

package/dist/styles/margin.d.ts

@@ -34,6 +34,4 @@ export declare function my(margin: MarginValue): CSSResult;
  * Apply right/left/top/bottom margins.
  * @param {MarginValue} margin
  */
-declare function m(margin: MarginValue): CSSResult;
-export default m;
-//# sourceMappingURL=margin.d.ts.map
+export declare function m(margin: MarginValue): CSSResult;

package/dist/styles/media.d.ts

@@ -0,0 +1,17 @@
+import type { CSSResult } from 'lit';
+/**
+ * Convert a screen media query config to its CSS equivalent.
+ *
+ * Receives the style content to be applied inside this media query setup.
+ * Notice that we consume the raw token value for the media query because variables do not work in media or container queries.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties MDN, Using CSS Custom Properties}
+ */
+export declare function mediaDesktop(content: CSSResult): CSSResult;
+/**
+ * Convert a screen media query config to its CSS equivalent.
+ *
+ * Receives the style content to be applied inside this media query setup.
+ * Notice that we consume the raw token value for the media query because variables do not work in media or container queries.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties MDN, Using CSS Custom Properties}
+ */
+export declare function mediaTablet(content: CSSResult): CSSResult;

package/dist/styles/on.d.ts

@@ -0,0 +1,63 @@
+import type { CSSResult } from 'lit';
+declare const pseudoClassMap: {
+    active: string[];
+    disabled: string[];
+    focus: string[];
+    hover: string[];
+    visited: string[];
+};
+type PosPseudoClass = keyof typeof pseudoClassMap;
+type AugumentedCSSResult = CSSResult & {
+    not: AugumentedCSSResult;
+} & {
+    [key in PosPseudoClass]: AugumentedCSSResult;
+};
+type AdjacentSiblingCombinator = '+';
+type ChildCombinator = '>';
+type ColumnCombinator = '||';
+type DescendantCombinator = ' ';
+type GeneralSiblingCombinator = '~';
+type NamespaceCombinator = '|';
+type Combinator = AdjacentSiblingCombinator | ChildCombinator | ColumnCombinator | DescendantCombinator | GeneralSiblingCombinator | NamespaceCombinator;
+/**
+ * # on
+ *
+ * Style utility to compose pseudo-classes.
+ *
+ * ## List of supported pseudo-classes
+ * - active
+ * - disabled
+ * - focus
+ * - hover
+ * - visited
+ *
+ * ## Usage
+ * You can compose multiple pseudo-classes by chaining them. You can also negate
+ * some pseudo-class calling `.not` before it. The order that they are chained
+ * will be respected.
+ *
+ * ```js
+ * css`
+ *     ${on('.button').not.disabled.not.active.focus} {
+ *         color: tomato;
+ *     }
+ * `;
+ * ```
+ * Will result in:
+ * ```css
+ * .button:not(.is-disabled, :disabled):not(:active):is(.is-focused, :focus, :focus-visible, :focus-within) {
+ *     color: tomato;
+ * }
+ * ```
+ *
+ * @param selectors A single selector or a list of selectors that will have the
+ * pseudo-classes concatenated to it.
+ * @param subSelectors A single selector or a list of selectors that will be
+ * combined with the resulting selectors.
+ * @param combinator Will be used to combine the resulting selectors with the
+ * subSelectors. The default value is the [Descendant Combinator (`' '`)](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator).
+ * If `null` is provided, no combinator will be used, i.e., they will be joined
+ * without any character between them.
+ */
+export declare function on(selectors: string | Array<string>, subSelectors?: string | Array<string>, combinator?: Combinator | null): AugumentedCSSResult;
+export {};

package/dist/styles/padding.d.ts

@@ -34,6 +34,4 @@ export declare function py(padding: PaddingValue): CSSResult;
  * Apply right/left/top/bottom paddings.
  * @param {string | number} padding
  */
-declare function p(padding: PaddingValue): CSSResult;
-export default p;
-//# sourceMappingURL=padding.d.ts.map
+export declare function p(padding: PaddingValue): CSSResult;

package/dist/styles/skeleton.d.ts

@@ -1,4 +1,4 @@
-declare function skeletonStyles(): import("lit").CSSResult;
 export declare function skeleton(): import("lit").CSSResult;
-export default skeletonStyles;
-//# sourceMappingURL=skeleton.d.ts.map
+export declare namespace skeleton {
+    var styles: () => import("lit").CSSResult;
+}

package/dist/styles/transition.d.ts

@@ -12,6 +12,4 @@ export type TransitionConfig = {
  * Convert a transition config to its CSS equivalent.
  * @param {TransitionConfig | TransitionConfig[]} configs
  */
-declare function transition(configs: TransitionConfig | TransitionConfig[]): CSSResult;
-export default transition;
-//# sourceMappingURL=transition.d.ts.map
+export declare function transition(configs: TransitionConfig | TransitionConfig[]): CSSResult;

package/dist/styles/typography.d.ts

@@ -1,10 +1,9 @@
 import type { CSSResult } from 'lit';
-export type TypographyVariant = 'body-lg-bold' | 'body-lg' | 'body-md-bold-underline' | 'body-md-bold' | 'body-md-underline' | 'body-md' | 'body-sm-bold-underline' | 'body-sm-bold' | 'body-sm-underline' | 'body-sm' | 'button-lg' | 'button-md' | 'button-sm' | 'chips-md' | 'chips-sm' | 'heading-lg-bold' | 'heading-lg' | 'heading-md-bold' | 'heading-md' | 'heading-sm-bold' | 'heading-sm' | 'hero-lg-bold' | 'hero-lg' | 'hero-md-bold' | 'hero-md' | 'hero-sm-bold' | 'hero-sm' | 'number-md' | 'number-sm' | 'table-header-md' | 'table-header-sm';
+export declare const typographyVariants: readonly ["body-lg-bold", "body-lg", "body-md-bold-underline", "body-md-bold", "body-md-underline", "body-md", "body-sm-bold-underline", "body-sm-bold", "body-sm-underline", "body-sm", "button-lg", "button-md", "button-sm", "chips-md", "chips-sm", "heading-lg-bold", "heading-lg", "heading-md-bold", "heading-md", "heading-sm-bold", "heading-sm", "hero-lg-bold", "hero-lg", "hero-md-bold", "hero-md", "hero-sm-bold", "hero-sm", "number-md", "number-sm", "table-header-md", "table-header-sm"];
+export type TypographyVariant = (typeof typographyVariants)[number];
 /**
  * Apply set of tokens for a given typography `variant`.
  * @param {TypographyVariant} [variant]
  * @returns {CSSResult}
  */
-declare function typography(variant?: TypographyVariant): CSSResult;
-export default typography;
-//# sourceMappingURL=typography.d.ts.map
+export declare function typography(variant?: TypographyVariant): CSSResult;

package/dist/styles/variables.css

@@ -0,0 +1,2 @@
+/* Used only to expose the file in the published library */
+@import "@loadsmart/miranda-tokens/dist/tokens/web/loadsmart/variables.css";

package/dist/styles/variables.scss

@@ -0,0 +1,2 @@
+/* Used only to expose the file in the published library */
+@import "@loadsmart/miranda-tokens/dist/tokens/web/loadsmart/variables.scss";

package/dist/tokens.d.ts

@@ -0,0 +1,2 @@
+export * from '@loadsmart/miranda-tokens';
+export * from '@loadsmart/miranda-tokens/dist/themes';

package/dist/tokens.js

@@ -0,0 +1,303 @@
+var themes$1 = {};
+
+/**
+ * Auto-generated file
+ * Do not edit directly
+ */
+var LoadsmartTheme = {
+    "brand-color-brand": "20, 214, 77",
+    "brand-color-brand-accent-1": "0, 215, 215",
+    "brand-color-brand-accent-2": "132, 241, 30",
+    "border-radius-none": "0px",
+    "border-radius-s": "4px",
+    "border-radius-m": "8px",
+    "border-radius-l": "16px",
+    "border-radius-circle": "50%",
+    "border-none": 0,
+    "border-thin": "1px",
+    "border-medium": "2px",
+    "border-thick": "4px",
+    "color-background-primary": "252, 252, 255",
+    "color-background-secondary": "248, 249, 251",
+    "color-background-tertiary": "230, 237, 242",
+    "color-background-highlight": "202, 219, 221",
+    "color-background-inverted": "32, 41, 49",
+    "color-background-secondary-inverted": "61, 74, 85",
+    "color-border-input": "193, 206, 217",
+    "color-border": "230, 237, 242",
+    "color-divider": "230, 237, 242",
+    "color-brand": "20, 214, 77",
+    "color-brand-accent-1": "0, 215, 215",
+    "color-brand-accent-2": "132, 241, 30",
+    "color-primary-20": "202, 219, 221",
+    "color-primary-60": "0, 84, 84",
+    "color-primary-100": "0, 51, 51",
+    "color-accent-20": "229, 245, 255",
+    "color-accent-60": "0, 98, 159",
+    "color-accent-100": "15, 66, 97",
+    "color-neutral-0": "252, 252, 255",
+    "color-neutral-10": "248, 249, 251",
+    "color-neutral-20": "230, 237, 242",
+    "color-neutral-40": "193, 206, 217",
+    "color-neutral-60": "94, 118, 138",
+    "color-neutral-80": "92, 106, 118",
+    "color-neutral-90": "61, 74, 85",
+    "color-neutral-100": "32, 41, 49",
+    "color-success-20": "227, 247, 239",
+    "color-success-60": "3, 124, 94",
+    "color-success-100": "0, 94, 71",
+    "color-danger-20": "255, 233, 230",
+    "color-danger-60": "186, 27, 27",
+    "color-danger-100": "104, 0, 3",
+    "color-warning-20": "255, 243, 214",
+    "color-warning-60": "248, 182, 14",
+    "color-warning-100": "102, 63, 25",
+    "color-text-primary": "32, 41, 49",
+    "color-text-secondary": "61, 74, 85",
+    "color-text-tertiary": "92, 106, 118",
+    "color-text-placeholder": "94, 118, 138",
+    "color-text-disabled": "193, 206, 217",
+    "color-text-inverted": "252, 252, 255",
+    "color-text-secondary-inverted": "193, 206, 217",
+    "color-text-error": "186, 27, 27",
+    "color-text-highlight": "0, 98, 159",
+    "color-text-link": "0, 84, 84",
+    "font-family-default": "'Manrope', sans-serif",
+    "font-family-title": "'Plus Jakarta Sans', 'Manrope', sans-serif",
+    "font-size-1": "0.625rem",
+    "font-size-2": "0.75rem",
+    "font-size-3": "0.875rem",
+    "font-size-4": "1rem",
+    "font-size-5": "1.25rem",
+    "font-size-6": "1.625rem",
+    "font-size-7": "2.375rem",
+    "font-size-8": "3rem",
+    "font-size-9": "3.625rem",
+    "font-weight-regular": 500,
+    "font-weight-medium": 600,
+    "font-weight-bold": 700,
+    "line-height-1": "100%",
+    "line-height-2": "125%",
+    "line-height-3": "130%",
+    "line-height-4": "140%",
+    "line-height-5": "150%",
+    "line-height-6": "180%",
+    "media-screen-desktop": "1025px",
+    "media-screen-tablet": "481px",
+    "opacity-0": "0%",
+    "opacity-20": "20%",
+    "opacity-40": "40%",
+    "opacity-60": "60%",
+    "opacity-100": "100%",
+    "elevation-1": "0px 0px 2px rgba(94, 118, 138, 0.1), 0px 1px 6px 2px rgba(61, 74, 85, 0.15)",
+    "elevation-2": "0px 1px 3px rgba(94, 118, 138, 0.2), 0px 4px 8px 3px rgba(61, 74, 85, 0.15)",
+    "elevation-3": "0px 0px 4px rgba(94, 118, 138, 0.2), 0px 6px 12px 6px rgba(61, 74, 85, 0.15)",
+    "elevation-4": "0px 5px 6px 4px rgba(94, 118, 138, 0.2), 0px 8px 10px rgba(61, 74, 85, 0.1)",
+    "glow-primary": "0.0px 0.0px 4.0px 0px rgb(3, 124, 94, .5)",
+    "glow-warning": "0.0px 0.0px 4.0px 0px rgba(255, 206, 79, 1.0)",
+    "spacing-1": "4px",
+    "spacing-2": "8px",
+    "spacing-3": "12px",
+    "spacing-4": "16px",
+    "spacing-5": "20px",
+    "spacing-6": "24px",
+    "spacing-8": "32px",
+    "spacing-10": "40px",
+    "spacing-12": "48px",
+    "spacing-14": "56px",
+    "spacing-16": "64px",
+    "spacing-20": "80px",
+    "spacing-30": "120px",
+    "spacing-0-5": "2px",
+    "global-height-small": "1.75rem",
+    "global-height-default": "2.5rem",
+    "global-height-large": "3rem",
+    "platform-font-default": "'Manrope', sans-serif",
+    "platform-font-title": "'Plus Jakarta Sans', 'Manrope', sans-serif"
+};
+
+var LoadsmartTheme_1 = themes$1.LoadsmartTheme = LoadsmartTheme;
+
+var themes = themes$1;
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Sort an array of strings in a special way that considers numeric parts within the strings.
+ *
+ * @param values - An array of strings to be sorted.
+ * @returns - A new array containing the sorted strings.
+ */
+function sortNumericValues(values) {
+    // Create a copy of the input array to avoid modifying the original array.
+    return __spreadArray([], values, true).sort(function (a, b) {
+        return a.localeCompare(b, undefined, {
+            numeric: true,
+            sensitivity: 'base',
+        });
+    });
+}
+
+function extractTokens(tokens, prefix) {
+    return tokens.filter(function (token) {
+        return token.startsWith(prefix);
+    });
+}
+function excludeTokens(tokens, prefix) {
+    return tokens.filter(function (token) {
+        return !token.startsWith(prefix);
+    });
+}
+var ALL_TOKENS = Object.keys(themes.LoadsmartTheme);
+// We strip brand and platform-specific tokens as they should not be used directly.
+var TOKENS = sortNumericValues(excludeTokens(excludeTokens(ALL_TOKENS, 'brand-'), 'platform-'));
+var BACKGROUND_COLOR_TOKENS = extractTokens(TOKENS, 'color-background-');
+var BORDER_RADIUS_TOKENS = extractTokens(TOKENS, 'border-radius-');
+var BORDER_TOKENS = extractTokens(TOKENS, 'border-');
+var BORDER_WIDTH_TOKENS = [
+    'border-none',
+    'border-thin',
+    'border-medium',
+    'border-thick',
+];
+var COLOR_TOKENS = extractTokens(TOKENS, 'color-');
+var ELEVATION_TOKENS = extractTokens(TOKENS, 'elevation-');
+var FONT_FAMILY_TOKENS = extractTokens(TOKENS, 'font-family-');
+var FONT_SIZE_TOKENS = extractTokens(TOKENS, 'font-size-');
+var FONT_WEIGHT_TOKENS = extractTokens(TOKENS, 'font-weight-');
+var GLOBAL_TOKENS = extractTokens(TOKENS, 'global-');
+var GLOW_TOKENS = extractTokens(TOKENS, 'glow-');
+var LINE_HEIGHT_TOKENS = extractTokens(TOKENS, 'line-height-');
+var OPACITY_TOKENS = extractTokens(TOKENS, 'opacity-');
+var SPACING_TOKENS = extractTokens(TOKENS, 'spacing-');
+var MEDIA_QUERY_TOKENS = extractTokens(TOKENS, 'media-');
+var SPACING_TOKENS_WITH_NONE = __spreadArray(['none'], SPACING_TOKENS, true);
+
+/**
+ * Get token value.
+ *
+ * @example
+ * ```js
+ * getToken('color-primary')
+ * ```
+ *
+ * @param token - Token whose value should be retrieved.
+ * @returns {TokenValue | undefined} Token value or `undefined` otherwise.
+ */
+function getToken(token) {
+    return themes.LoadsmartTheme[token];
+}
+
+function toCSSVariable(token) {
+    var value = getToken(token);
+    if (value == null) {
+        return value;
+    }
+    return "--m-".concat(token);
+}
+
+function toCSSValue(token, alpha) {
+    var value = getToken(token);
+    if (value == null) {
+        return '';
+    }
+    if (token.startsWith('color-')) {
+        return "rgba(var(".concat(toCSSVariable(token), ", ").concat(value, "), ").concat(alpha !== null && alpha !== void 0 ? alpha : 1, ")");
+    }
+    return "var(".concat(toCSSVariable(token), ", ").concat(value, ")");
+}
+
+/**
+ * Get css value for spacing token validating 'none'.
+ *
+ * @param spacing - Spacing token or 'none'
+ * @param defaultSpacing - Default spacing token if the provided spacing is not valid
+ * @returns The css value for the spacing token
+ */
+function toSpacingCSSValue(spacing, defaultSpacing) {
+    var _a;
+    var defaultValue = defaultSpacing ? toCSSValue(defaultSpacing) : '';
+    if (!spacing) {
+        return defaultValue;
+    }
+    return (_a = (spacing === 'none' ? '0' : toCSSValue(spacing))) !== null && _a !== void 0 ? _a : defaultValue;
+}
+
+/**
+ * Get the hex value for a color token.
+ *
+ * @example
+ * ```js
+ * getHexColor('color-primary')
+ * ```
+ *
+ * @param token - Color token whose value should be retrieved.
+ * @returns {string | undefined} Hexadecimal color value or undefined
+ */
+function getHexColor(token) {
+    var tokenValue = String(getToken(token) || '');
+    if (!tokenValue)
+        return undefined;
+    var colors = tokenValue.split(', ').map(Number);
+    if (colors.length !== 3)
+        throw new Error('color token must be in the `R, G, B` format');
+    return colors.reduce(function (hexColor, current) {
+        var hexValue = current.toString(16).padStart(2, '0');
+        return hexColor.concat(hexValue);
+    }, '#');
+}
+
+var BACKGROUND_COLOR_TOKENS_1 = BACKGROUND_COLOR_TOKENS;
+var BORDER_RADIUS_TOKENS_1 = BORDER_RADIUS_TOKENS;
+var BORDER_TOKENS_1 = BORDER_TOKENS;
+var BORDER_WIDTH_TOKENS_1 = BORDER_WIDTH_TOKENS;
+var COLOR_TOKENS_1 = COLOR_TOKENS;
+var ELEVATION_TOKENS_1 = ELEVATION_TOKENS;
+var FONT_FAMILY_TOKENS_1 = FONT_FAMILY_TOKENS;
+var FONT_SIZE_TOKENS_1 = FONT_SIZE_TOKENS;
+var FONT_WEIGHT_TOKENS_1 = FONT_WEIGHT_TOKENS;
+var GLOBAL_TOKENS_1 = GLOBAL_TOKENS;
+var GLOW_TOKENS_1 = GLOW_TOKENS;
+var LINE_HEIGHT_TOKENS_1 = LINE_HEIGHT_TOKENS;
+var MEDIA_QUERY_TOKENS_1 = MEDIA_QUERY_TOKENS;
+var OPACITY_TOKENS_1 = OPACITY_TOKENS;
+var SPACING_TOKENS_1 = SPACING_TOKENS;
+var SPACING_TOKENS_WITH_NONE_1 = SPACING_TOKENS_WITH_NONE;
+var TOKENS_1 = TOKENS;
+var getHexColor_1 = getHexColor;
+var getToken_1 = getToken;
+var toCSSValue_1 = toCSSValue;
+var toCSSVariable_1 = toCSSVariable;
+var toSpacingCSSValue_1 = toSpacingCSSValue;
+
+export { BACKGROUND_COLOR_TOKENS_1 as BACKGROUND_COLOR_TOKENS, BORDER_RADIUS_TOKENS_1 as BORDER_RADIUS_TOKENS, BORDER_TOKENS_1 as BORDER_TOKENS, BORDER_WIDTH_TOKENS_1 as BORDER_WIDTH_TOKENS, COLOR_TOKENS_1 as COLOR_TOKENS, ELEVATION_TOKENS_1 as ELEVATION_TOKENS, FONT_FAMILY_TOKENS_1 as FONT_FAMILY_TOKENS, FONT_SIZE_TOKENS_1 as FONT_SIZE_TOKENS, FONT_WEIGHT_TOKENS_1 as FONT_WEIGHT_TOKENS, GLOBAL_TOKENS_1 as GLOBAL_TOKENS, GLOW_TOKENS_1 as GLOW_TOKENS, LINE_HEIGHT_TOKENS_1 as LINE_HEIGHT_TOKENS, LoadsmartTheme_1 as LoadsmartTheme, MEDIA_QUERY_TOKENS_1 as MEDIA_QUERY_TOKENS, OPACITY_TOKENS_1 as OPACITY_TOKENS, SPACING_TOKENS_1 as SPACING_TOKENS, SPACING_TOKENS_WITH_NONE_1 as SPACING_TOKENS_WITH_NONE, TOKENS_1 as TOKENS, getHexColor_1 as getHexColor, getToken_1 as getToken, toCSSValue_1 as toCSSValue, toCSSVariable_1 as toCSSVariable, toSpacingCSSValue_1 as toSpacingCSSValue };

package/dist/utils/chunk/chunk.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Returns chunks of an array.
+ *
+ * @example
+ * Consider the following sequence:
+ * chunk([1, 2, 3, 4], 2);
+ * The result would be [[1, 2], [3, 4]].
+ *
+ * @template T
+ * @param {T[]} array
+ * @param {number} chunkSize
+ * @returns {T[][]}
+ */
+declare const chunk: <T>(array: T[], chunkSize: number) => T[][];
+export default chunk;

package/dist/utils/chunk/index.d.ts

@@ -0,0 +1 @@
+export { default } from './chunk';

package/dist/utils/clamp/clamp.d.ts

@@ -7,4 +7,3 @@
  */
 declare function clamp(value: number, lower: number, upper: number): number;
 export default clamp;
-//# sourceMappingURL=clamp.d.ts.map

package/dist/utils/clamp/index.d.ts

@@ -1,2 +1 @@
 export { default } from './clamp';
-//# sourceMappingURL=index.d.ts.map

package/dist/utils/conditional.d.ts

@@ -0,0 +1,21 @@
+type ObjectConditionDefinition = {
+    [key: string]: boolean | undefined;
+};
+export type ConditionDefinition = string | ObjectConditionDefinition;
+/**
+ * Concatenate style properties or class names conditionally.
+ * Conditions can be functions that consume components props,
+ * objects, strings, or numbers (that will be coerced to strings).
+ * @example
+ * ```jsx
+ * // returns 'some-class class-a'
+ * conditional('some-class', {
+ *  'class-a': true,
+ *  'class-b': false,
+ * })
+ * ```
+ * @param conditions
+ * @returns {string}
+ */
+declare function conditional(...conditions: ConditionDefinition[]): string;
+export default conditional;

package/dist/utils/context-root.d.ts

@@ -4,4 +4,3 @@
  * for more details.
  */
 export declare function attachContextRoot(): void;
-//# sourceMappingURL=context-root.d.ts.map

package/dist/utils/events.d.ts

@@ -22,4 +22,8 @@
  * @return Whether or not the event was dispatched (if cancelable).
  */
 export declare function redispatchEvent(element: Element, event: Event): boolean;
-//# sourceMappingURL=events.d.ts.map
+/**
+ * Check if `event` happened on the given `element`.
+ * @returns `true` if the event happened on the given element, `false` otherwise.
+ */
+export declare function isInsideElement(event: Event, element: HTMLElement): boolean;