bromcom-ui-next 0.1.0

package/dist/collection/components/text/text.component.js

@@ -0,0 +1,176 @@
+import { h } from "@stencil/core";
+import cs from "classnames";
+import { variantTagMap } from "./text.utils";
+export class BcmText {
+    constructor() {
+        /** Text variant */
+        this.variant = 'body';
+        /** Text size */
+        this.size = 'medium';
+        this.variantClassMap = {
+            display: 'font-semibold text-size-12 text-color-header',
+            heading1: 'font-semibold text-size-7 text-color-header',
+            heading2: 'font-semibold text-size-6 text-color-header',
+            title1: {
+                small: 'font-semibold text-size-5 text-color-header',
+                medium: 'font-semibold text-size-6 text-color-header',
+                large: 'font-semibold text-size-7 text-color-header',
+            },
+            title2: {
+                small: 'font-semibold text-size-4 text-color-default',
+                medium: 'font-semibold text-size-5 text-color-default',
+                large: 'font-semibold text-size-6 text-color-default',
+            },
+            title3: {
+                small: 'font-semibold text-size-3 text-color-disabled',
+                medium: 'font-semibold text-size-4 text-color-disabled',
+                large: 'font-semibold text-size-5 text-color-disabled',
+            },
+            body: {
+                small: 'font-regular text-size-4 text-color-default',
+                medium: 'font-regular text-size-5 text-color-default',
+                large: 'font-regular text-size-6 text-color-default',
+            },
+            bodyAccent: {
+                small: 'font-medium text-size-4 text-color-default',
+                medium: 'font-medium text-size-5 text-color-default',
+                large: 'font-medium text-size-6 text-color-default',
+            },
+            helper: {
+                small: 'font-regular text-size-4 text-color-helper',
+                medium: 'font-regular text-size-5 text-color-helper',
+                large: 'font-regular text-size-6 text-color-helper',
+            },
+            caption: {
+                small: 'font-regular text-size-3 text-color-caption',
+                medium: 'font-regular text-size-4 text-color-caption',
+                large: 'font-regular text-size-5 text-color-caption',
+            },
+            link: {
+                small: 'font-medium text-size-4 underline text-color-primary',
+                medium: 'font-medium text-size-5 underline text-color-primary',
+                large: 'font-medium text-size-6 underline text-color-primary',
+            },
+            label: {
+                small: 'font-medium text-size-3 text-color-label',
+                medium: 'font-medium text-size-4 text-color-label',
+                large: 'font-medium text-size-5 text-color-label',
+            },
+            placeholder: {
+                small: 'font-regular text-size-4 text-color-placeholder',
+                medium: 'font-regular text-size-5 text-color-placeholder',
+                large: 'font-regular text-size-6 text-color-placeholder',
+            },
+            info: {
+                small: 'font-regular text-size-3 text-color-default',
+                medium: 'font-regular text-size-4 text-color-default',
+                large: 'font-regular text-size-5 text-color-default',
+            },
+            infoAccent: {
+                small: 'font-medium text-size-3 text-color-header',
+                medium: 'font-medium text-size-4 text-color-header',
+                large: 'font-medium text-size-5 text-color-header',
+            },
+        };
+        this.getTextClass = (variant, size) => {
+            const variantClasses = this.variantClassMap[variant];
+            if (typeof variantClasses === 'string') {
+                return variantClasses;
+            }
+            return variantClasses[size];
+        };
+    }
+    render() {
+        const Tag = variantTagMap[this.variant];
+        const variantClass = this.getTextClass(this.variant, this.size);
+        return (h(Tag, { key: 'ea72d277f1a6779788bda53fcb3f792d2d74a876', class: cs('bcm-text appearance-none m-0 p-0', variantClass), part: "text" }, h("slot", { key: '2c3a717515f076cffdb55efb9ad207e11d9d2ca7' }, this.text)));
+    }
+    static get is() { return "bcm-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text content"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextVariant",
+                    "resolved": "\"body\" | \"bodyAccent\" | \"caption\" | \"display\" | \"heading1\" | \"heading2\" | \"helper\" | \"info\" | \"infoAccent\" | \"label\" | \"link\" | \"placeholder\" | \"title1\" | \"title2\" | \"title3\"",
+                    "references": {
+                        "TextVariant": {
+                            "location": "import",
+                            "path": "./text.types",
+                            "id": "src/components/text/text.types.ts::TextVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text variant"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'body'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "TextSize": {
+                            "location": "import",
+                            "path": "./text.types",
+                            "id": "src/components/text/text.types.ts::TextSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=text.component.js.map

package/dist/collection/components/text/text.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.component.js","sourceRoot":"","sources":["../../../src/components/text/text.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport cs from 'classnames';\nimport { TextVariant, TextSize } from './text.types';\nimport { variantTagMap } from './text.utils';\n\n@Component({\n  tag: 'bcm-text',\n  styleUrl: 'text.scss',\n  shadow: true,\n})\nexport class BcmText {\n  /** Text content */\n  @Prop()\n  text: string;\n\n  /** Text variant */\n  @Prop()\n  variant: TextVariant = 'body';\n\n  /** Text size */\n  @Prop()\n  size: TextSize = 'medium';\n\n  private readonly variantClassMap = {\n    display: 'font-semibold text-size-12 text-color-header',\n    heading1: 'font-semibold text-size-7 text-color-header',\n    heading2: 'font-semibold text-size-6 text-color-header',\n    title1: {\n      small: 'font-semibold text-size-5 text-color-header',\n      medium: 'font-semibold text-size-6 text-color-header',\n      large: 'font-semibold text-size-7 text-color-header',\n    },\n    title2: {\n      small: 'font-semibold text-size-4 text-color-default',\n      medium: 'font-semibold text-size-5 text-color-default',\n      large: 'font-semibold text-size-6 text-color-default',\n    },\n    title3: {\n      small: 'font-semibold text-size-3 text-color-disabled',\n      medium: 'font-semibold text-size-4 text-color-disabled',\n      large: 'font-semibold text-size-5 text-color-disabled',\n    },\n    body: {\n      small: 'font-regular text-size-4 text-color-default',\n      medium: 'font-regular text-size-5 text-color-default',\n      large: 'font-regular text-size-6 text-color-default',\n    },\n    bodyAccent: {\n      small: 'font-medium text-size-4 text-color-default',\n      medium: 'font-medium text-size-5 text-color-default',\n      large: 'font-medium text-size-6 text-color-default',\n    },\n    helper: {\n      small: 'font-regular text-size-4 text-color-helper',\n      medium: 'font-regular text-size-5 text-color-helper',\n      large: 'font-regular text-size-6 text-color-helper',\n    },\n    caption: {\n      small: 'font-regular text-size-3 text-color-caption',\n      medium: 'font-regular text-size-4 text-color-caption',\n      large: 'font-regular text-size-5 text-color-caption',\n    },\n    link: {\n      small: 'font-medium text-size-4 underline text-color-primary',\n      medium: 'font-medium text-size-5 underline text-color-primary',\n      large: 'font-medium text-size-6 underline text-color-primary',\n    },\n    label: {\n      small: 'font-medium text-size-3 text-color-label',\n      medium: 'font-medium text-size-4 text-color-label',\n      large: 'font-medium text-size-5 text-color-label',\n    },\n    placeholder: {\n      small: 'font-regular text-size-4 text-color-placeholder',\n      medium: 'font-regular text-size-5 text-color-placeholder',\n      large: 'font-regular text-size-6 text-color-placeholder',\n    },\n    info: {\n      small: 'font-regular text-size-3 text-color-default',\n      medium: 'font-regular text-size-4 text-color-default',\n      large: 'font-regular text-size-5 text-color-default',\n    },\n    infoAccent: {\n      small: 'font-medium text-size-3 text-color-header',\n      medium: 'font-medium text-size-4 text-color-header',\n      large: 'font-medium text-size-5 text-color-header',\n    },\n  } as const;\n\n  private getTextClass = (variant: TextVariant, size: TextSize): string => {\n    const variantClasses = this.variantClassMap[variant];\n\n    if (typeof variantClasses === 'string') {\n      return variantClasses;\n    }\n\n    return variantClasses[size];\n  };\n\n  render() {\n    const Tag = variantTagMap[this.variant];\n    const variantClass = this.getTextClass(this.variant, this.size);\n\n    return (\n      <Tag class={cs('bcm-text appearance-none m-0 p-0', variantClass)} part=\"text\">\n        <slot>{this.text}</slot>\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/text/text.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: ;border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.static{position:static}.m-0{margin:0}.appearance-none{appearance:none}.p-0{padding:0}.text-size-12{font-size:var(--bcm-ui-font-size-12,60px);line-height:var(--bcm-ui-line-height-12,72px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

package/dist/collection/components/text/text.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text.types.js.map

package/dist/collection/components/text/text.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.types.js","sourceRoot":"","sources":["../../../src/components/text/text.types.ts"],"names":[],"mappings":"","sourcesContent":["export type TextVariant =\n  | 'display'\n  | 'heading1'\n  | 'heading2'\n  | 'title1'\n  | 'title2'\n  | 'title3'\n  | 'body'\n  | 'bodyAccent'\n  | 'helper'\n  | 'caption'\n  | 'link'\n  | 'label'\n  | 'placeholder'\n  | 'info'\n  | 'infoAccent';\n\nexport type TextSize = 'small' | 'medium' | 'large';\n\nexport type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'label' | 'a';\n"]}

package/dist/collection/components/text/text.utils.js

@@ -0,0 +1,18 @@
+export const variantTagMap = {
+    display: 'h1',
+    heading1: 'h2',
+    heading2: 'h3',
+    title1: 'h4',
+    title2: 'h5',
+    title3: 'h6',
+    body: 'p',
+    bodyAccent: 'p',
+    helper: 'p',
+    caption: 'p',
+    label: 'label',
+    placeholder: 'p',
+    link: 'a',
+    info: 'p',
+    infoAccent: 'p',
+};
+//# sourceMappingURL=text.utils.js.map

package/dist/collection/components/text/text.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.utils.js","sourceRoot":"","sources":["../../../src/components/text/text.utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAiC;IACzD,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,GAAG;IACT,UAAU,EAAE,GAAG;IACf,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,GAAG;IACZ,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,GAAG;IAChB,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,UAAU,EAAE,GAAG;CAChB,CAAC","sourcesContent":["import { TextVariant, TextTag } from './text.types';\n\nexport const variantTagMap: Record<TextVariant, TextTag> = {\n  display: 'h1',\n  heading1: 'h2',\n  heading2: 'h3',\n  title1: 'h4',\n  title2: 'h5',\n  title3: 'h6',\n  body: 'p',\n  bodyAccent: 'p',\n  helper: 'p',\n  caption: 'p',\n  label: 'label',\n  placeholder: 'p',\n  link: 'a',\n  info: 'p',\n  infoAccent: 'p',\n};\n"]}

package/dist/collection/global/global.js

@@ -0,0 +1,40 @@
+function addHeadScript(obj) {
+  const head = document.head;
+  const script = document.createElement('script');
+  Object.keys(obj).forEach(key => {
+    script[key] = obj[key];
+  });
+  head.appendChild(script);
+}
+
+addHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });
+
+const FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';
+
+let element = (tag, p = {}) => Object.assign(document.createElement(tag), p);
+
+customElements.define(
+  'bcm-icon',
+  class extends HTMLElement {
+    constructor() {
+      let href = FA_GLOBAL_CSS;
+      let linkFontAwesome = () => element('link', { rel: 'stylesheet', href });
+      let hasFontAwesome = document.querySelector(`link[href="${href}"]`);
+      if (!hasFontAwesome) document.head.append(linkFontAwesome());
+      super().attachShadow({ mode: 'open' }).append(linkFontAwesome(), element('icon'));
+    }
+    connectedCallback() {
+      this.style.display = 'inline-block';
+      this.icon = this.icon;
+      //   this.onclick = evt => this.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: evt }));
+      //this.onmouseenter = evt => this.dispatchEvent(new CustomEvent('mouseenter', { bubbles: true, detail: evt }));
+      //this.onmouseleave = evt => this.dispatchEvent(new CustomEvent('mouseleave', { bubbles: true, detail: evt }));
+    }
+    get icon() {
+      return this.getAttribute('name') || this.getAttribute('icon-name');
+    }
+    set icon(icon) {
+      this.shadowRoot.querySelector('icon').innerHTML = `<i class="${icon}"></i>`;
+    }
+  },
+);

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport type * from './components.d.ts';\n"]}

package/dist/collection/styles/theme-variables.js

@@ -0,0 +1,355 @@
+export const themeVariables = {
+    fontSize: {
+        'size-1': ['var(--bcm-ui-font-size-1, 8px)', { lineHeight: 'var(--bcm-ui-line-height-1, 10px)' }],
+        'size-2': ['var(--bcm-ui-font-size-2, 10px)', { lineHeight: 'var(--bcm-ui-line-height-2, 12px)' }],
+        'size-3': ['var(--bcm-ui-font-size-3, 12px)', { lineHeight: 'var(--bcm-ui-line-height-3, 16px)' }],
+        'size-4': ['var(--bcm-ui-font-size-4, 14px)', { lineHeight: 'var(--bcm-ui-line-height-4, 20px)' }],
+        'size-5': ['var(--bcm-ui-font-size-5, 16px)', { lineHeight: 'var(--bcm-ui-line-height-5, 24px)' }],
+        'size-6': ['var(--bcm-ui-font-size-6, 18px)', { lineHeight: 'var(--bcm-ui-line-height-6, 24px)' }],
+        'size-7': ['var(--bcm-ui-font-size-7, 20px)', { lineHeight: 'var(--bcm-ui-line-height-7, 28px)' }],
+        'size-8': ['var(--bcm-ui-font-size-8, 24px)', { lineHeight: 'var(--bcm-ui-line-height-8, 32px)' }],
+        'size-9': ['var(--bcm-ui-font-size-9, 32px)', { lineHeight: 'var(--bcm-ui-line-height-9, 36px)' }],
+        'size-10': ['var(--bcm-ui-font-size-10, 36px)', { lineHeight: 'var(--bcm-ui-line-height-10, 44px)' }],
+        'size-11': ['var(--bcm-ui-font-size-11, 48px)', { lineHeight: 'var(--bcm-ui-line-height-11, 64px)' }],
+        'size-12': ['var(--bcm-ui-font-size-12, 60px)', { lineHeight: 'var(--bcm-ui-line-height-12, 72px)' }],
+        'size-13': ['var(--bcm-ui-font-size-13, 72px)', { lineHeight: 'var(--bcm-ui-line-height-13, 90px)' }],
+        'size-14': ['var(--bcm-ui-font-size-14, 96px)', { lineHeight: 'var(--bcm-ui-line-height-14, 96px)' }],
+        'size-inherit': ['inherit', { lineHeight: 'inherit' }],
+    },
+    textColor: {
+        DEFAULT: 'var(--bcm-ui-color-text-default)',
+        base: 'var(--bcm-ui-color-text-base)',
+        header: 'var(--bcm-ui-color-text-header)',
+        label: 'var(--bcm-ui-color-text-label)',
+        helper: 'var(--bcm-ui-color-text-helper)',
+        placeholder: 'var(--bcm-ui-color-text-placeholder)',
+        caption: 'var(--bcm-ui-color-text-caption)',
+        iconDefault: 'var(--bcm-ui-color-text-icon-default)',
+        iconDark: 'var(--bcm-ui-color-text-icon-dark)',
+        primary: 'var(--bcm-ui-color-text-primary)',
+        info: 'var(--bcm-ui-color-text-info)',
+        success: 'var(--bcm-ui-color-text-success)',
+        warning: 'var(--bcm-ui-color-text-warning)',
+        error: 'var(--bcm-ui-color-text-error)',
+        disabled: 'var(--bcm-ui-color-text-disabled)',
+        visited: 'var(--bcm-ui-color-text-visited)',
+        palette: {
+            slate: 'var(--bcm-ui-color-text-palette-slate)',
+            gray: 'var(--bcm-ui-color-text-palette-gray)',
+            zinc: 'var(--bcm-ui-color-text-palette-zinc)',
+            neutral: 'var(--bcm-ui-color-text-palette-neutral)',
+            stone: 'var(--bcm-ui-color-text-palette-stone)',
+            red: 'var(--bcm-ui-color-text-palette-red)',
+            orange: 'var(--bcm-ui-color-text-palette-orange)',
+            amber: 'var(--bcm-ui-color-text-palette-amber)',
+            yellow: 'var(--bcm-ui-color-text-palette-yellow)',
+            lime: 'var(--bcm-ui-color-text-palette-lime)',
+            green: 'var(--bcm-ui-color-text-palette-green)',
+            emerald: 'var(--bcm-ui-color-text-palette-emerald)',
+            teal: 'var(--bcm-ui-color-text-palette-teal)',
+            cyan: 'var(--bcm-ui-color-text-palette-cyan)',
+            sky: 'var(--bcm-ui-color-text-palette-sky)',
+            blue: 'var(--bcm-ui-color-text-palette-blue)',
+            indigo: 'var(--bcm-ui-color-text-palette-indigo)',
+            violet: 'var(--bcm-ui-color-text-palette-violet)',
+            purple: 'var(--bcm-ui-color-text-palette-purple)',
+            fuchsia: 'var(--bcm-ui-color-text-palette-fuchsia)',
+            pink: 'var(--bcm-ui-color-text-palette-pink)',
+            rose: 'var(--bcm-ui-color-text-palette-rose)',
+        },
+    },
+    v4ColorPalette: {
+        inherit: 'inherit',
+        current: 'currentColor',
+        transparent: 'transparent',
+        black: '#000',
+        white: '#fff',
+        slate: {
+            '50': 'oklch(0.984 0.003 247.858)',
+            '100': 'oklch(0.968 0.007 247.896)',
+            '200': 'oklch(0.929 0.013 255.508)',
+            '300': 'oklch(0.869 0.022 252.894)',
+            '400': 'oklch(0.704 0.04 256.788)',
+            '500': 'oklch(0.554 0.046 257.417)',
+            '600': 'oklch(0.446 0.043 257.281)',
+            '700': 'oklch(0.372 0.044 257.287)',
+            '800': 'oklch(0.279 0.041 260.031)',
+            '900': 'oklch(0.208 0.042 265.755)',
+            '950': 'oklch(0.129 0.042 264.695)',
+        },
+        gray: {
+            '50': 'oklch(0.985 0.002 247.839)',
+            '100': 'oklch(0.967 0.003 264.542)',
+            '200': 'oklch(0.928 0.006 264.531)',
+            '300': 'oklch(0.872 0.01 258.338)',
+            '400': 'oklch(0.707 0.022 261.325)',
+            '500': 'oklch(0.551 0.027 264.364)',
+            '600': 'oklch(0.446 0.03 256.802)',
+            '700': 'oklch(0.373 0.034 259.733)',
+            '800': 'oklch(0.278 0.033 256.848)',
+            '900': 'oklch(0.21 0.034 264.665)',
+            '950': 'oklch(0.13 0.028 261.692)',
+        },
+        zinc: {
+            '50': 'oklch(0.985 0 0)',
+            '100': 'oklch(0.967 0.001 286.375)',
+            '200': 'oklch(0.92 0.004 286.32)',
+            '300': 'oklch(0.871 0.006 286.286)',
+            '400': 'oklch(0.705 0.015 286.067)',
+            '500': 'oklch(0.552 0.016 285.938)',
+            '600': 'oklch(0.442 0.017 285.786)',
+            '700': 'oklch(0.37 0.013 285.805)',
+            '800': 'oklch(0.274 0.006 286.033)',
+            '900': 'oklch(0.21 0.006 285.885)',
+            '950': 'oklch(0.141 0.005 285.823)',
+        },
+        neutral: {
+            '50': 'oklch(0.985 0 0)',
+            '100': 'oklch(0.97 0 0)',
+            '200': 'oklch(0.922 0 0)',
+            '300': 'oklch(0.87 0 0)',
+            '400': 'oklch(0.708 0 0)',
+            '500': 'oklch(0.556 0 0)',
+            '600': 'oklch(0.439 0 0)',
+            '700': 'oklch(0.371 0 0)',
+            '800': 'oklch(0.269 0 0)',
+            '900': 'oklch(0.205 0 0)',
+            '950': 'oklch(0.145 0 0)',
+        },
+        stone: {
+            '50': 'oklch(0.985 0.001 106.423)',
+            '100': 'oklch(0.97 0.001 106.424)',
+            '200': 'oklch(0.923 0.003 48.717)',
+            '300': 'oklch(0.869 0.005 56.366)',
+            '400': 'oklch(0.709 0.01 56.259)',
+            '500': 'oklch(0.553 0.013 58.071)',
+            '600': 'oklch(0.444 0.011 73.639)',
+            '700': 'oklch(0.374 0.01 67.558)',
+            '800': 'oklch(0.268 0.007 34.298)',
+            '900': 'oklch(0.216 0.006 56.043)',
+            '950': 'oklch(0.147 0.004 49.25)',
+        },
+        red: {
+            '50': 'oklch(0.971 0.013 17.38)',
+            '100': 'oklch(0.936 0.032 17.717)',
+            '200': 'oklch(0.885 0.062 18.334)',
+            '300': 'oklch(0.808 0.114 19.571)',
+            '400': 'oklch(0.704 0.191 22.216)',
+            '500': 'oklch(0.637 0.237 25.331)',
+            '600': 'oklch(0.577 0.245 27.325)',
+            '700': 'oklch(0.505 0.213 27.518)',
+            '800': 'oklch(0.444 0.177 26.899)',
+            '900': 'oklch(0.396 0.141 25.723)',
+            '950': 'oklch(0.258 0.092 26.042)',
+        },
+        orange: {
+            '50': 'oklch(0.98 0.016 73.684)',
+            '100': 'oklch(0.954 0.038 75.164)',
+            '200': 'oklch(0.901 0.076 70.697)',
+            '300': 'oklch(0.837 0.128 66.29)',
+            '400': 'oklch(0.75 0.183 55.934)',
+            '500': 'oklch(0.705 0.213 47.604)',
+            '600': 'oklch(0.646 0.222 41.116)',
+            '700': 'oklch(0.553 0.195 38.402)',
+            '800': 'oklch(0.47 0.157 37.304)',
+            '900': 'oklch(0.408 0.123 38.172)',
+            '950': 'oklch(0.266 0.079 36.259)',
+        },
+        amber: {
+            '50': 'oklch(0.987 0.022 95.277)',
+            '100': 'oklch(0.962 0.059 95.617)',
+            '200': 'oklch(0.924 0.12 95.746)',
+            '300': 'oklch(0.879 0.169 91.605)',
+            '400': 'oklch(0.828 0.189 84.429)',
+            '500': 'oklch(0.769 0.188 70.08)',
+            '600': 'oklch(0.666 0.179 58.318)',
+            '700': 'oklch(0.555 0.163 48.998)',
+            '800': 'oklch(0.473 0.137 46.201)',
+            '900': 'oklch(0.414 0.112 45.904)',
+            '950': 'oklch(0.279 0.077 45.635)',
+        },
+        yellow: {
+            '50': 'oklch(0.987 0.026 102.212)',
+            '100': 'oklch(0.973 0.071 103.193)',
+            '200': 'oklch(0.945 0.129 101.54)',
+            '300': 'oklch(0.905 0.182 98.111)',
+            '400': 'oklch(0.852 0.199 91.936)',
+            '500': 'oklch(0.795 0.184 86.047)',
+            '600': 'oklch(0.681 0.162 75.834)',
+            '700': 'oklch(0.554 0.135 66.442)',
+            '800': 'oklch(0.476 0.114 61.907)',
+            '900': 'oklch(0.421 0.095 57.708)',
+            '950': 'oklch(0.286 0.066 53.813)',
+        },
+        lime: {
+            '50': 'oklch(0.986 0.031 120.757)',
+            '100': 'oklch(0.967 0.067 122.328)',
+            '200': 'oklch(0.938 0.127 124.321)',
+            '300': 'oklch(0.897 0.196 126.665)',
+            '400': 'oklch(0.841 0.238 128.85)',
+            '500': 'oklch(0.768 0.233 130.85)',
+            '600': 'oklch(0.648 0.2 131.684)',
+            '700': 'oklch(0.532 0.157 131.589)',
+            '800': 'oklch(0.453 0.124 130.933)',
+            '900': 'oklch(0.405 0.101 131.063)',
+            '950': 'oklch(0.274 0.072 132.109)',
+        },
+        green: {
+            '50': 'oklch(0.982 0.018 155.826)',
+            '100': 'oklch(0.962 0.044 156.743)',
+            '200': 'oklch(0.925 0.084 155.995)',
+            '300': 'oklch(0.871 0.15 154.449)',
+            '400': 'oklch(0.792 0.209 151.711)',
+            '500': 'oklch(0.723 0.219 149.579)',
+            '600': 'oklch(0.627 0.194 149.214)',
+            '700': 'oklch(0.527 0.154 150.069)',
+            '800': 'oklch(0.448 0.119 151.328)',
+            '900': 'oklch(0.393 0.095 152.535)',
+            '950': 'oklch(0.266 0.065 152.934)',
+        },
+        emerald: {
+            '50': 'oklch(0.979 0.021 166.113)',
+            '100': 'oklch(0.95 0.052 163.051)',
+            '200': 'oklch(0.905 0.093 164.15)',
+            '300': 'oklch(0.845 0.143 164.978)',
+            '400': 'oklch(0.765 0.177 163.223)',
+            '500': 'oklch(0.696 0.17 162.48)',
+            '600': 'oklch(0.596 0.145 163.225)',
+            '700': 'oklch(0.508 0.118 165.612)',
+            '800': 'oklch(0.432 0.095 166.913)',
+            '900': 'oklch(0.378 0.077 168.94)',
+            '950': 'oklch(0.262 0.051 172.552)',
+        },
+        teal: {
+            '50': 'oklch(0.984 0.014 180.72)',
+            '100': 'oklch(0.953 0.051 180.801)',
+            '200': 'oklch(0.91 0.096 180.426)',
+            '300': 'oklch(0.855 0.138 181.071)',
+            '400': 'oklch(0.777 0.152 181.912)',
+            '500': 'oklch(0.704 0.14 182.503)',
+            '600': 'oklch(0.6 0.118 184.704)',
+            '700': 'oklch(0.511 0.096 186.391)',
+            '800': 'oklch(0.437 0.078 188.216)',
+            '900': 'oklch(0.386 0.063 188.416)',
+            '950': 'oklch(0.277 0.046 192.524)',
+        },
+        cyan: {
+            '50': 'oklch(0.984 0.019 200.873)',
+            '100': 'oklch(0.956 0.045 203.388)',
+            '200': 'oklch(0.917 0.08 205.041)',
+            '300': 'oklch(0.865 0.127 207.078)',
+            '400': 'oklch(0.789 0.154 211.53)',
+            '500': 'oklch(0.715 0.143 215.221)',
+            '600': 'oklch(0.609 0.126 221.723)',
+            '700': 'oklch(0.52 0.105 223.128)',
+            '800': 'oklch(0.45 0.085 224.283)',
+            '900': 'oklch(0.398 0.07 227.392)',
+            '950': 'oklch(0.302 0.056 229.695)',
+        },
+        sky: {
+            '50': 'oklch(0.977 0.013 236.62)',
+            '100': 'oklch(0.951 0.026 236.824)',
+            '200': 'oklch(0.901 0.058 230.902)',
+            '300': 'oklch(0.828 0.111 230.318)',
+            '400': 'oklch(0.746 0.16 232.661)',
+            '500': 'oklch(0.685 0.169 237.323)',
+            '600': 'oklch(0.588 0.158 241.966)',
+            '700': 'oklch(0.5 0.134 242.749)',
+            '800': 'oklch(0.443 0.11 240.79)',
+            '900': 'oklch(0.391 0.09 240.876)',
+            '950': 'oklch(0.293 0.066 243.157)',
+        },
+        blue: {
+            '50': 'oklch(0.97 0.014 254.604)',
+            '100': 'oklch(0.932 0.032 255.585)',
+            '200': 'oklch(0.882 0.059 254.128)',
+            '300': 'oklch(0.809 0.105 251.813)',
+            '400': 'oklch(0.707 0.165 254.624)',
+            '500': 'oklch(0.623 0.214 259.815)',
+            '600': 'oklch(0.546 0.245 262.881)',
+            '700': 'oklch(0.488 0.243 264.376)',
+            '800': 'oklch(0.424 0.199 265.638)',
+            '900': 'oklch(0.379 0.146 265.522)',
+            '950': 'oklch(0.282 0.091 267.935)',
+        },
+        indigo: {
+            '50': 'oklch(0.962 0.018 272.314)',
+            '100': 'oklch(0.93 0.034 272.788)',
+            '200': 'oklch(0.87 0.065 274.039)',
+            '300': 'oklch(0.785 0.115 274.713)',
+            '400': 'oklch(0.673 0.182 276.935)',
+            '500': 'oklch(0.585 0.233 277.117)',
+            '600': 'oklch(0.511 0.262 276.966)',
+            '700': 'oklch(0.457 0.24 277.023)',
+            '800': 'oklch(0.398 0.195 277.366)',
+            '900': 'oklch(0.359 0.144 278.697)',
+            '950': 'oklch(0.257 0.09 281.288)',
+        },
+        violet: {
+            '50': 'oklch(0.969 0.016 293.756)',
+            '100': 'oklch(0.943 0.029 294.588)',
+            '200': 'oklch(0.894 0.057 293.283)',
+            '300': 'oklch(0.811 0.111 293.571)',
+            '400': 'oklch(0.702 0.183 293.541)',
+            '500': 'oklch(0.606 0.25 292.717)',
+            '600': 'oklch(0.541 0.281 293.009)',
+            '700': 'oklch(0.491 0.27 292.581)',
+            '800': 'oklch(0.432 0.232 292.759)',
+            '900': 'oklch(0.38 0.189 293.745)',
+            '950': 'oklch(0.283 0.141 291.089)',
+        },
+        purple: {
+            '50': 'oklch(0.977 0.014 308.299)',
+            '100': 'oklch(0.946 0.033 307.174)',
+            '200': 'oklch(0.902 0.063 306.703)',
+            '300': 'oklch(0.827 0.119 306.383)',
+            '400': 'oklch(0.714 0.203 305.504)',
+            '500': 'oklch(0.627 0.265 303.9)',
+            '600': 'oklch(0.558 0.288 302.321)',
+            '700': 'oklch(0.496 0.265 301.924)',
+            '800': 'oklch(0.438 0.218 303.724)',
+            '900': 'oklch(0.381 0.176 304.987)',
+            '950': 'oklch(0.291 0.149 302.717)',
+        },
+        fuchsia: {
+            '50': 'oklch(0.977 0.017 320.058)',
+            '100': 'oklch(0.952 0.037 318.852)',
+            '200': 'oklch(0.903 0.076 319.62)',
+            '300': 'oklch(0.833 0.145 321.434)',
+            '400': 'oklch(0.74 0.238 322.16)',
+            '500': 'oklch(0.667 0.295 322.15)',
+            '600': 'oklch(0.591 0.293 322.896)',
+            '700': 'oklch(0.518 0.253 323.949)',
+            '800': 'oklch(0.452 0.211 324.591)',
+            '900': 'oklch(0.401 0.17 325.612)',
+            '950': 'oklch(0.293 0.136 325.661)',
+        },
+        pink: {
+            '50': 'oklch(0.971 0.014 343.198)',
+            '100': 'oklch(0.948 0.028 342.258)',
+            '200': 'oklch(0.899 0.061 343.231)',
+            '300': 'oklch(0.823 0.12 346.018)',
+            '400': 'oklch(0.718 0.202 349.761)',
+            '500': 'oklch(0.656 0.241 354.308)',
+            '600': 'oklch(0.592 0.249 0.584)',
+            '700': 'oklch(0.525 0.223 3.958)',
+            '800': 'oklch(0.459 0.187 3.815)',
+            '900': 'oklch(0.408 0.153 2.432)',
+            '950': 'oklch(0.284 0.109 3.907)',
+        },
+        rose: {
+            '50': 'oklch(0.969 0.015 12.422)',
+            '100': 'oklch(0.941 0.03 12.58)',
+            '200': 'oklch(0.892 0.058 10.001)',
+            '300': 'oklch(0.81 0.117 11.638)',
+            '400': 'oklch(0.712 0.194 13.428)',
+            '500': 'oklch(0.645 0.246 16.439)',
+            '600': 'oklch(0.586 0.253 17.585)',
+            '700': 'oklch(0.514 0.222 16.935)',
+            '800': 'oklch(0.455 0.188 13.697)',
+            '900': 'oklch(0.41 0.159 10.272)',
+            '950': 'oklch(0.271 0.105 12.094)',
+        },
+    },
+};
+//# sourceMappingURL=theme-variables.js.map