@coveo/atomic 3.34.0-pre.c894ef6d76 → 3.34.0-pre.d1623a758e

package/dist/atomic/components/facet-number-input.js

@@ -42,11 +42,11 @@ const FacetNumberInput = /*@__PURE__*/ proxyCustomElement(class FacetNumberInput
         const inputClasses = 'p-2.5 input-primary placeholder-neutral-dark min-w-0 mr-1';
         const labelClasses = 'text-neutral-dark text-sm';
         const step = this.type === 'integer' ? '1' : 'any';
-        return (h("form", { key: '3afc8c27aad7fc2f3f280a8e5305dfdbc5291f74', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
+        return (h("form", { key: '86d1c2d7802d76a450c70e9b912a3625b58598e9', class: "mt-4 gap-y-0.5 px-2", part: "input-form", onSubmit: (e) => {
                 e.preventDefault();
                 this.apply();
                 return false;
-            } }, h("label", { key: '9749444397b017e575f1cbc598ef8d4e440dc8b0', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: '94b1e3e64ec6ef14aff52ecf8e18c52bc987c7a7', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: '89da4fb4747fb9d0cba5251dd3972677867301de', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '17813e5183986382376d765716ed60bff74de98c', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: 'a98a7d0b356bb5c3eeec2512d96fd5bedc3605a6', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
+            } }, h("label", { key: '4efbfd89bcef3fcb8069262be2f8e29e4c9ba4d5', part: "label-start", class: labelClasses, htmlFor: `${this.filterState.facetId}_start` }, minText), h("input", { key: 'aec5064d6ab22483bc8a4d0b2a21a1c7938d892d', part: "input-start", id: `${this.filterState.facetId}_start`, type: "number", step: step, ref: (ref) => (this.startRef = ref), class: inputClasses, "aria-label": minAria, required: true, min: Number.MIN_SAFE_INTEGER, max: this.end, value: this.filterState.range?.start, onInput: (e) => (this.start = e.target.valueAsNumber) }), h("label", { key: '4ace78b18cd98b105cf2d662061067baec719c24', part: "label-end", class: labelClasses, htmlFor: `${this.filterState.facetId}_end` }, maxText), h("input", { key: '5f607bf1dc3a62e3c80b58a27314814b70450839', part: "input-end", id: `${this.filterState.facetId}_end`, type: "number", step: step, ref: (ref) => (this.endRef = ref), class: inputClasses, "aria-label": maxAria, required: true, min: this.start, max: Number.MAX_SAFE_INTEGER, value: this.filterState.range?.end, onInput: (e) => (this.end = e.target.valueAsNumber) }), h(Button, { key: '3901070b4c6f0d81fe653a8b03eac8420945c463', style: "outline-primary", type: "submit", part: "input-apply-button", class: "flex-none truncate p-2.5", ariaLabel: applyAria, text: apply })));
     }
     static get style() { return AtomicFacetNumberInputStyle0; }
 }, [0, "atomic-facet-number-input", {

package/dist/atomic/components/global/environment.js

@@ -3,7 +3,7 @@ function getWindow() {
 }
 export function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.34.0-pre.c894ef6d76",
+        version: "3.34.0-pre.d1623a758e",
         headlessVersion,
     };
 }

package/dist/atomic/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;;;;;;;;;;;SAYgB,cAAc,CAAoB,OAAgB;IAChE,OAAO,WAAW,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACnD;;MCHa,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACoDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/commerce/product-template-component-utils/stencil-product-template-decorators.tsx","src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import {Product} from '@coveo/headless/commerce';\nimport {itemContext} from '../../common/item-list/stencil-item-decorators';\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This method is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the method in the [connectedCallback lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered \"atomic-product\".\n * @returns A promise that resolves on initialization of the parent \"atomic-product\" element, or rejects when there is no parent \"atomic-product\" element.\n *\n * @deprecated should only be used for Stencil components. For Lit components, use `fetchProductContext` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function productContext<T extends Product>(element: Element) {\n  return itemContext<T>(element, 'atomic-product');\n}\n","import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\nimport type {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import type {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport type {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  type InteractiveItemContextEvent,\n} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  type ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;;;;;;;;;;;SAYgB,cAAc,CAAoB,OAAgB;IAChE,OAAO,WAAW,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACnD;;MCHa,kBAAmB,SAAQ,KAAK;IAC3C,YAAY,WAAmB,EAAE,UAAkB;QACjD,KAAK,CACH,QAAQ,WAAW,sCAAsC,UAAU,YAAY,CAChF,CAAC;KACH;;;ACfH,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;SAIpC,gBAAgB,CAAI,OAAgB,EAAE,UAAkB;IACtE,OAAO,IAAI,OAAO,CAAI,CAAC,OAAO,EAAE,MAAM;QACpC,MAAM,KAAK,GAAG,gBAAgB,CAC5B,oBAAoB,EACpB,CAAC,IAAO;YACN,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC;SACtB,CACF,CAAC;QACF,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;YACjC,MAAM,CACJ,IAAI,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,CACnE,CAAC;SACH;KACF,CAAC,CAAC;AACL;;ACoDA;;;;;;;;;;SAUgB,mBAAmB,CAAoB,OAAgB;IACrE,OAAO,gBAAgB,CAAI,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxD;;;;","names":[],"sources":["src/components/commerce/product-template-component-utils/stencil-product-template-decorators.tsx","src/components/common/item-list/context/item-context-controller.ts","src/components/common/item-list/fetch-item-context.ts","src/decorators/commerce/product-template-decorators.ts"],"sourcesContent":["import {Product} from '@coveo/headless/commerce';\nimport {itemContext} from '../../common/item-list/stencil-item-decorators';\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This method is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the method in the [connectedCallback lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered \"atomic-product\".\n * @returns A promise that resolves on initialization of the parent \"atomic-product\" element, or rejects when there is no parent \"atomic-product\" element.\n *\n * @deprecated should only be used for Stencil components. For Lit components, use `fetchProductContext` from \\@/src/decorators/commerce/product-template-decorators.ts\n */\nexport function productContext<T extends Product>(element: Element) {\n  return itemContext<T>(element, 'atomic-product');\n}\n","import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';\nimport type {InitializableComponent} from '@/src/decorators/types.js';\nimport {buildCustomEvent} from '@/src/utils/event-utils';\n\ntype LitElementWithError = Omit<\n  Pick<InitializableComponent, 'error'>,\n  'error'\n> &\n  LitElement & {\n    error: Error | null;\n  };\n\nconst itemContextEventName = 'atomic/resolveResult';\n\nexport class MissingParentError extends Error {\n  constructor(elementName: string, parentName: string) {\n    super(\n      `The \"${elementName}\" element must be the child of an \"${parentName}\" element.`\n    );\n  }\n}\n\nfunction extractFolded<T = Record<string, unknown>>(\n  item: Record<string, unknown>,\n  returnFolded: boolean\n): T {\n  if (returnFolded) {\n    if ('children' in item) {\n      return item as T;\n    } else {\n      return {children: [], result: item} as T;\n    }\n  }\n\n  if ('children' in item && 'result' in item) {\n    return item.result as T;\n  }\n  return item as T;\n}\n\n/**\n * A reactive controller that manages item context data from parent components.\n * Handles fetching item data via custom events and manages error states.\n */\nexport class ItemContextController<T = Record<string, unknown>>\n  implements ReactiveController\n{\n  private host: ReactiveControllerHost & LitElementWithError;\n  private parentName: string;\n  private folded: boolean;\n  private _item: T | null = null;\n  private _error: MissingParentError | null = null;\n\n  constructor(\n    host: ReactiveControllerHost & LitElementWithError,\n    options: {parentName?: string; folded?: boolean} = {}\n  ) {\n    this.host = host;\n    this.parentName = options.parentName ?? 'atomic-result';\n    this.folded = options.folded ?? false;\n    host.addController(this);\n  }\n\n  get item(): T | null {\n    return this._error ? null : this._item;\n  }\n\n  get error(): MissingParentError | null {\n    return this._error;\n  }\n\n  get hasError(): boolean {\n    return this._error !== null;\n  }\n\n  hostConnected(): void {\n    this._resolveItemContext();\n  }\n\n  private _resolveItemContext(): void {\n    const event = buildCustomEvent(\n      itemContextEventName,\n      (item: Record<string, unknown>) => {\n        this._item = extractFolded<T>(item, this.folded);\n        this._error = null;\n        this.host.error = null;\n        this.host.requestUpdate();\n      }\n    );\n\n    const canceled = this.host.dispatchEvent(event);\n    if (canceled) {\n      const elementName = (this.host as Element).nodeName.toLowerCase();\n      this._error = new MissingParentError(elementName, this.parentName);\n      this._item = null;\n      this.host.error = this._error;\n      this.host.requestUpdate();\n    }\n  }\n}\n\ntype ItemContextEventHandler<T> = (item: T) => void;\nexport type ItemContextEvent<T> = CustomEvent<ItemContextEventHandler<T>>;\n","import {closest} from '../../../utils/dom-utils.js';\nimport {buildCustomEvent} from '../../../utils/event-utils.js';\nimport {MissingParentError} from './context/item-context-controller.js';\n\nconst itemContextEventName = 'atomic/resolveResult';\n\ntype ItemContextEventHandler<T> = (item: T) => void;\n\nexport function fetchItemContext<T>(element: Element, parentName: string) {\n  return new Promise<T>((resolve, reject) => {\n    const event = buildCustomEvent<ItemContextEventHandler<T>>(\n      itemContextEventName,\n      (item: T) => {\n        return resolve(item);\n      }\n    );\n    element.dispatchEvent(event);\n\n    if (!closest(element, parentName)) {\n      reject(\n        new MissingParentError(element.nodeName.toLowerCase(), parentName)\n      );\n    }\n  });\n}\n","import type {InteractiveProduct, Product} from '@coveo/headless/commerce';\nimport type {LitElement} from 'lit';\nimport {\n  InteractiveItemContextController,\n  type InteractiveItemContextEvent,\n} from '@/src/components/common/item-list/context/interactive-item-context-controller';\nimport {\n  ItemContextController,\n  type ItemContextEvent,\n} from '@/src/components/common/item-list/context/item-context-controller';\nimport {fetchItemContext} from '@/src/components/common/item-list/fetch-item-context';\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing product context in product template components.\n *\n * @param host - The Lit component instance\n * @param options - Configuration options\n * @returns ItemContextController instance configured for atomic-product\n *\n * @example\n * ```typescript\n * @customElement('my-product-component')\n * export class MyProductComponent extends LitElement {\n *   private productController = createProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.productController.item;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createProductContextController(\n  host: LitElement & {error: Error | null},\n  options: {folded?: boolean} = {}\n): ItemContextController<Product> {\n  return new ItemContextController<Product>(host, {\n    parentName: 'atomic-product',\n    folded: options.folded ?? false,\n  });\n}\n\n/**\n * Creates a [Lit reactive controller](https://lit.dev/docs/composition/controllers/) for managing interactive product context in product template components.\n *\n * @param host - The Lit component instance\n * @returns InteractiveItemContextController instance\n *\n * @example\n * ```typescript\n * @customElement('my-interactive-product-component')\n * export class MyInteractiveProductComponent extends LitElement {\n *   private interactiveProductController = createInteractiveProductContextController(this);\n *\n *   @state() product!: Product;\n *\n *   render() {\n *     this.product = this.interactiveProductController.interactiveItem;\n *     return html`<div>${this.product?.ec_name}</div>`;\n *   }\n * }\n * ```\n */\nexport function createInteractiveProductContextController(\n  host: LitElement & {error: Error}\n): InteractiveItemContextController<InteractiveProduct> {\n  return new InteractiveItemContextController<InteractiveProduct>(host);\n}\n\nexport type ProductContextEvent<T = Product> = ItemContextEvent<T>;\nexport type InteractiveProductContextEvent<\n  T extends InteractiveProduct = InteractiveProduct,\n> = InteractiveItemContextEvent<T>;\n\n/**\n * Retrieves `Product` on a rendered `atomic-product`.\n *\n * This utility function is useful for building custom product template elements, see [Create a Product List](https://docs.coveo.com/en/atomic/latest/cc-search/create-custom-components/native-components/#custom-product-template-component-example) for more information.\n *\n * You should use the utility function in the [`connectedCallback` lifecycle method](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks).\n *\n * @param element - The element that the event is dispatched to, which must be the child of a rendered `atomic-product`.\n * @returns A promise that resolves on initialization of the parent `atomic-product` element, or rejects when there is no parent `atomic-product` element.\n */\nexport function fetchProductContext<T extends Product>(element: Element) {\n  return fetchItemContext<T>(element, 'atomic-product');\n}\n"],"version":3}

package/dist/atomic/components/item-template-provider.js

@@ -1,5 +1,25 @@
+import { h } from '@stencil/core/internal/client';
 import { buildResultTemplatesManager } from '@coveo/headless';
 
+// The Lit equivalent of this file is item-placeholders.ts. The Lit version doesn't include the placeholder guard.
+const ResultsPlaceholdersGuard = (props) => {
+    if (!props.displayPlaceholders) {
+        return;
+    }
+    switch (props.display) {
+        case 'table':
+            return h(TableDisplayResultsPlaceholder, { ...props });
+        default:
+            return h(ResultsPlaceholder, { ...props });
+    }
+};
+const ResultsPlaceholder = (props) => {
+    return Array.from({ length: props.numberOfPlaceholders }, (_, i) => (h("atomic-result-placeholder", { key: `placeholder-${i}`, density: props.density, display: props.display || 'list', imageSize: props.imageSize })));
+};
+const TableDisplayResultsPlaceholder = (props) => {
+    return (h("atomic-result-table-placeholder", { density: props.density, imageSize: props.imageSize, rows: props.numberOfPlaceholders }));
+};
+
 class TemplateProvider {
     constructor(props, buildManager) {
         this.props = props;
@@ -68,6 +88,6 @@ class ItemTemplateProvider extends TemplateProvider {
     }
 }
 
-export { ItemTemplateProvider as I };
+export { ItemTemplateProvider as I, ResultsPlaceholdersGuard as R, ResultsPlaceholder as a };
 
 //# sourceMappingURL=item-template-provider.js.map

package/dist/atomic/components/item-template-provider.js.map

@@ -1 +1 @@
-{"file":"item-template-provider.js","mappings":";;MAesB,gBAAgB;IAapC,YACU,KAAsC,EACtC,YAIP;QALO,UAAK,GAAL,KAAK,CAAiC;QACtC,iBAAY,GAAZ,YAAY,CAInB;QAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAC3C,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAEO,MAAM,uBAAuB;QACnC,MAAM,eAAe,GAAG,MAAM,OAAO,CAAC,GAAG,CACvC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,OAAO,qBAAqB;YAC1D,IAAI,EAAE,aAAa,IAAI,qBAAqB,CAAC,EAAE;gBAC7C,MAAM,cAAc,CAAC,WAAW,CAC7B,qBAAqC,CAAC,OAAO,CAAC,WAAW,EAAE,CAC7D,CAAC;aACH;YAED,MAAM,QAAQ,GAAG,MAAM,qBAAqB,CAAC,WAAW,EAAE,CAAC;YAC3D,IAAI,CAAC,QAAQ,EAAE;gBACb,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;aACtC;YACD,OAAO,QAAQ,CAAC;SACjB,CAAC,CACH,CAAC;QAEF,MAAM,SAAS,GAAG,CAChB,CAAC,eAAe,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB;cACxD,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;cAC5B,EAAE,EACN,MAAM,CACN,eAAe,CAAC,MAAM,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAI1C,CACJ,CAAC;QAEF,IAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC,CAAC;QACrD,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC;KAC9C;IAEM,kBAAkB,CAAC,IAAc;QACtC,OAAO,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,IAAI,CAAE,CAAC;KACnD;IAEM,sBAAsB,CAAC,IAAc;QAC1C,OAAO,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAE,CAAC;KACvD;IAEM,2BAA2B;QAChC,OAAO,QAAQ,CAAC,sBAAsB,EAAE,CAAC;KAC1C;IAED,IAAW,mBAAmB;QAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,2BAA2B,EAAE,CAAC;KACjD;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,CAAC;KACzC;;;MC/EU,oBAAqB,SAAQ,gBAAwB;IAChE,YACE,KAA8D,EACtD,kBAA+B;QAEvC,KAAK,CAAC,KAAK,EAAE,MAAM,2BAA2B,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QAF/D,uBAAkB,GAAlB,kBAAkB,CAAa;KAGxC;;IAGS,mBAAmB;QAK3B,MAAM,OAAO,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;QAClD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC5D,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAE5B,MAAM,WAAW,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;QACtD,MAAM,UAAU,GAAG;;QAEf,IAAI,CAAC,kBAAkB,GAAG,gCAAgC,IAAI,CAAC,kBAAkB,QAAQ,GAAG,EAAE;;KAEjG,CAAC;QACF,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACxD,YAAY,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC;QAC3C,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC9C,OAAO;YACL,OAAO;YACP,WAAW;YACX,UAAU,EAAE,EAAE;SACf,CAAC;KACH;;;;;","names":[],"sources":["src/components/common/template-provider/template-provider.ts","src/components/common/item-list/item-template-provider.ts"],"sourcesContent":["import type {Template, TemplatesManager} from '@coveo/headless';\n\nexport interface TemplateElement<ItemType> extends HTMLElement {\n  getTemplate(): Promise<Template<ItemType, DocumentFragment> | null>;\n}\n\nexport interface TemplateProviderProps<ItemType> {\n  getResultTemplateRegistered(): boolean;\n  setResultTemplateRegistered(value: boolean): void;\n  getTemplateHasError(): boolean;\n  setTemplateHasError(value: boolean): void;\n  templateElements: TemplateElement<ItemType>[];\n  includeDefaultTemplate: boolean;\n}\n\nexport abstract class TemplateProvider<ItemType> {\n  private templateManager: TemplatesManager<\n    ItemType,\n    DocumentFragment,\n    DocumentFragment\n  >;\n\n  protected abstract makeDefaultTemplate(): Template<\n    ItemType,\n    DocumentFragment,\n    DocumentFragment\n  >;\n\n  constructor(\n    private props: TemplateProviderProps<ItemType>,\n    private buildManager: () => TemplatesManager<\n      ItemType,\n      DocumentFragment,\n      DocumentFragment\n    >\n  ) {\n    this.templateManager = this.buildManager();\n    this.registerResultTemplates();\n  }\n\n  private async registerResultTemplates() {\n    const customTemplates = await Promise.all(\n      this.props.templateElements.map(async (resultTemplateElement) => {\n        if (!('getTemplate' in resultTemplateElement)) {\n          await customElements.whenDefined(\n            (resultTemplateElement as HTMLElement).tagName.toLowerCase()\n          );\n        }\n\n        const template = await resultTemplateElement.getTemplate();\n        if (!template) {\n          this.props.setTemplateHasError(true);\n        }\n        return template;\n      })\n    );\n\n    const templates = (\n      !customTemplates.length && this.props.includeDefaultTemplate\n        ? [this.makeDefaultTemplate()]\n        : []\n    ).concat(\n      customTemplates.filter((template) => template) as Template<\n        ItemType,\n        DocumentFragment,\n        DocumentFragment\n      >[]\n    );\n\n    this.templateManager.registerTemplates(...templates);\n    this.props.setResultTemplateRegistered(true);\n  }\n\n  public getTemplateContent(item: ItemType) {\n    return this.templateManager.selectTemplate(item)!;\n  }\n\n  public getLinkTemplateContent(item: ItemType) {\n    return this.templateManager.selectLinkTemplate(item)!;\n  }\n\n  public getEmptyLinkTemplateContent() {\n    return document.createDocumentFragment();\n  }\n\n  public get templatesRegistered() {\n    return this.props.getResultTemplateRegistered();\n  }\n\n  public get hasError() {\n    return this.props.getTemplateHasError();\n  }\n}\n","import {\n  buildResultTemplatesManager,\n  type Result,\n  type Template,\n} from '@coveo/headless';\nimport type {AnyBindings} from '../interface/bindings';\nimport type {ItemTarget} from '../layout/display-options';\nimport {\n  TemplateProvider,\n  type TemplateProviderProps,\n} from '../template-provider/template-provider';\n\nexport class ItemTemplateProvider extends TemplateProvider<Result> {\n  constructor(\n    props: TemplateProviderProps<Result> & {bindings: AnyBindings},\n    private gridCellLinkTarget?: ItemTarget\n  ) {\n    super(props, () => buildResultTemplatesManager(props.bindings.engine));\n  }\n\n  // TODO: Add JSX support for default template\n  protected makeDefaultTemplate(): Template<\n    Result,\n    DocumentFragment,\n    DocumentFragment\n  > {\n    const content = document.createDocumentFragment();\n    const linkEl = document.createElement('atomic-result-link');\n    content.appendChild(linkEl);\n\n    const linkContent = document.createDocumentFragment();\n    const linkMarkup = `\n      <atomic-result-link>\n      ${this.gridCellLinkTarget ? `<a slot=\"attributes\" target=\"${this.gridCellLinkTarget}\"></a>` : ''}\n      </atomic-result-link>\n    `;\n    const linkTemplate = document.createElement('template');\n    linkTemplate.innerHTML = linkMarkup.trim();\n    linkContent.appendChild(linkTemplate.content);\n    return {\n      content,\n      linkContent,\n      conditions: [],\n    };\n  }\n}\n"],"version":3}
+{"file":"item-template-provider.js","mappings":"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","names":[],"sources":["src/components/common/atomic-result-placeholder/stencil-placeholders.tsx","src/components/common/template-provider/template-provider.ts","src/components/common/item-list/item-template-provider.ts"],"sourcesContent":["// The Lit equivalent of this file is item-placeholders.ts. The Lit version doesn't include the placeholder guard.\nimport {FunctionalComponent, h} from '@stencil/core';\nimport {\n  ItemDisplayDensity,\n  ItemDisplayImageSize,\n  ItemDisplayLayout,\n} from '../layout/display-options.js';\n\ninterface ResultPlaceholderProps {\n  density: ItemDisplayDensity;\n  imageSize: ItemDisplayImageSize;\n  display: ItemDisplayLayout;\n  numberOfPlaceholders: number;\n}\n\ninterface ResultPlaceholderGuardProps extends ResultPlaceholderProps {\n  displayPlaceholders: boolean;\n}\n\nexport const ResultsPlaceholdersGuard: FunctionalComponent<\n  ResultPlaceholderGuardProps\n> = (props) => {\n  if (!props.displayPlaceholders) {\n    return;\n  }\n  switch (props.display) {\n    case 'table':\n      return <TableDisplayResultsPlaceholder {...props} />;\n    default:\n      return <ResultsPlaceholder {...props} />;\n  }\n};\n\nexport const ResultsPlaceholder: FunctionalComponent<ResultPlaceholderProps> = (\n  props\n) => {\n  return Array.from({length: props.numberOfPlaceholders}, (_, i) => (\n    <atomic-result-placeholder\n      key={`placeholder-${i}`}\n      density={props.density}\n      display={props.display || 'list'}\n      imageSize={props.imageSize}\n    ></atomic-result-placeholder>\n  ));\n};\n\nconst TableDisplayResultsPlaceholder: FunctionalComponent<\n  ResultPlaceholderProps\n> = (props) => {\n  return (\n    <atomic-result-table-placeholder\n      density={props.density}\n      imageSize={props.imageSize}\n      rows={props.numberOfPlaceholders}\n    ></atomic-result-table-placeholder>\n  );\n};\n","import type {Template, TemplatesManager} from '@coveo/headless';\n\nexport interface TemplateElement<ItemType> extends HTMLElement {\n  getTemplate(): Promise<Template<ItemType, DocumentFragment> | null>;\n}\n\nexport interface TemplateProviderProps<ItemType> {\n  getResultTemplateRegistered(): boolean;\n  setResultTemplateRegistered(value: boolean): void;\n  getTemplateHasError(): boolean;\n  setTemplateHasError(value: boolean): void;\n  templateElements: TemplateElement<ItemType>[];\n  includeDefaultTemplate: boolean;\n}\n\nexport abstract class TemplateProvider<ItemType> {\n  private templateManager: TemplatesManager<\n    ItemType,\n    DocumentFragment,\n    DocumentFragment\n  >;\n\n  protected abstract makeDefaultTemplate(): Template<\n    ItemType,\n    DocumentFragment,\n    DocumentFragment\n  >;\n\n  constructor(\n    private props: TemplateProviderProps<ItemType>,\n    private buildManager: () => TemplatesManager<\n      ItemType,\n      DocumentFragment,\n      DocumentFragment\n    >\n  ) {\n    this.templateManager = this.buildManager();\n    this.registerResultTemplates();\n  }\n\n  private async registerResultTemplates() {\n    const customTemplates = await Promise.all(\n      this.props.templateElements.map(async (resultTemplateElement) => {\n        if (!('getTemplate' in resultTemplateElement)) {\n          await customElements.whenDefined(\n            (resultTemplateElement as HTMLElement).tagName.toLowerCase()\n          );\n        }\n\n        const template = await resultTemplateElement.getTemplate();\n        if (!template) {\n          this.props.setTemplateHasError(true);\n        }\n        return template;\n      })\n    );\n\n    const templates = (\n      !customTemplates.length && this.props.includeDefaultTemplate\n        ? [this.makeDefaultTemplate()]\n        : []\n    ).concat(\n      customTemplates.filter((template) => template) as Template<\n        ItemType,\n        DocumentFragment,\n        DocumentFragment\n      >[]\n    );\n\n    this.templateManager.registerTemplates(...templates);\n    this.props.setResultTemplateRegistered(true);\n  }\n\n  public getTemplateContent(item: ItemType) {\n    return this.templateManager.selectTemplate(item)!;\n  }\n\n  public getLinkTemplateContent(item: ItemType) {\n    return this.templateManager.selectLinkTemplate(item)!;\n  }\n\n  public getEmptyLinkTemplateContent() {\n    return document.createDocumentFragment();\n  }\n\n  public get templatesRegistered() {\n    return this.props.getResultTemplateRegistered();\n  }\n\n  public get hasError() {\n    return this.props.getTemplateHasError();\n  }\n}\n","import {\n  buildResultTemplatesManager,\n  type Result,\n  type Template,\n} from '@coveo/headless';\nimport type {AnyBindings} from '../interface/bindings';\nimport type {ItemTarget} from '../layout/display-options';\nimport {\n  TemplateProvider,\n  type TemplateProviderProps,\n} from '../template-provider/template-provider';\n\nexport class ItemTemplateProvider extends TemplateProvider<Result> {\n  constructor(\n    props: TemplateProviderProps<Result> & {bindings: AnyBindings},\n    private gridCellLinkTarget?: ItemTarget\n  ) {\n    super(props, () => buildResultTemplatesManager(props.bindings.engine));\n  }\n\n  // TODO: Add JSX support for default template\n  protected makeDefaultTemplate(): Template<\n    Result,\n    DocumentFragment,\n    DocumentFragment\n  > {\n    const content = document.createDocumentFragment();\n    const linkEl = document.createElement('atomic-result-link');\n    content.appendChild(linkEl);\n\n    const linkContent = document.createDocumentFragment();\n    const linkMarkup = `\n      <atomic-result-link>\n      ${this.gridCellLinkTarget ? `<a slot=\"attributes\" target=\"${this.gridCellLinkTarget}\"></a>` : ''}\n      </atomic-result-link>\n    `;\n    const linkTemplate = document.createElement('template');\n    linkTemplate.innerHTML = linkMarkup.trim();\n    linkContent.appendChild(linkTemplate.content);\n    return {\n      content,\n      linkContent,\n      conditions: [],\n    };\n  }\n}\n"],"version":3}

package/dist/atomic/components/show-hide-button.js

@@ -1,6 +1,6 @@
 import { getElement, h, Fragment } from '@stencil/core/internal/client';
 import { b as buildCustomEvent } from './event-utils.js';
-import { a as ResultsPlaceholder } from './stencil-placeholders.js';
+import { a as ResultsPlaceholder } from './item-template-provider.js';
 import { B as Button } from './stencil-button.js';
 
 const foldedItemListContextEventName = 'atomic/resolveFoldedResultList';

package/dist/atomic/components/stencil-button.js

@@ -1,6 +1,5 @@
 import { h } from '@stencil/core/internal/client';
 import { l as listenOnce } from './event-utils.js';
-import { a as getRippleColorForButtonStyle, g as getClassNameForButtonStyle } from './stencil-button-style.js';
 
 const RIPPLE = 'ripple';
 function getAnimationDurationInMilliseconds(radiusPixels) {
@@ -42,6 +41,49 @@ async function cleanupAnimationOnFinish(ripple, animationDuration) {
     setTimeout(() => ripple?.remove(), animationDuration + animationDuration * 0.1);
 }
 
+/**
+ * @deprecated Should only be used for Stencil components; for Lit components, use the button-style.ts
+ * This file is required to be in a tsx file to be able to use it in Stencil components.
+ */
+function getClassNameForButtonStyle(buttonStyle) {
+    switch (buttonStyle) {
+        case 'primary':
+            return 'btn-primary';
+        case 'outline-primary':
+            return 'btn-outline-primary';
+        case 'outline-neutral':
+            return 'btn-outline-neutral';
+        case 'outline-error':
+            return 'btn-outline-error';
+        case 'outline-bg-neutral':
+            return 'btn-outline-bg-neutral';
+        case 'outline-bg-error':
+            return 'btn-outline-bg-error';
+        case 'text-primary':
+            return 'btn-text-primary';
+        case 'text-neutral':
+            return 'btn-text-neutral';
+        case 'text-transparent':
+            return 'btn-text-transparent';
+        case 'square-neutral':
+            return 'btn-square-neutral';
+    }
+}
+/**
+ * @deprecated Should only be used for Stencil components; for Lit components, use the button-style.ts
+ * This file is required to be in a tsx file to be able to use it in Stencil components.
+ */
+function getRippleColorForButtonStyle(buttonStyle) {
+    switch (buttonStyle) {
+        case 'primary':
+            return 'primary';
+        case 'text-transparent':
+            return 'neutral-light';
+        default:
+            return 'neutral';
+    }
+}
+
 /**
  * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead
  */
@@ -81,6 +123,6 @@ const Button = (props, children) => {
         children));
 };
 
-export { Button as B, createRipple as c };
+export { Button as B, getClassNameForButtonStyle as a, createRipple as c, getRippleColorForButtonStyle as g };
 
 //# sourceMappingURL=stencil-button.js.map

package/dist/atomic/components/stencil-button.js.map

@@ -1 +1 @@
-{"file":"stencil-button.js","mappings":"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","names":[],"sources":["src/utils/ripple-utils.ts","src/components/common/stencil-button.tsx"],"sourcesContent":["import {listenOnce} from './event-utils';\n\ninterface RippleOptions {\n  color: string;\n  /**\n   * When the ripple's parent is not the event's origin\n   */\n  parent?: Element;\n}\n\nconst RIPPLE = 'ripple';\n\nfunction getAnimationDurationInMilliseconds(radiusPixels: number) {\n  // A 318px wide button has a duration of 700ms.\n  return Math.cbrt(radiusPixels) * 129.21;\n}\n\nfunction setPositionRelativeIfStatic(element: Element) {\n  if (getComputedStyle(element).position === 'static') {\n    element.classList.add('ripple-relative');\n  }\n}\n\nexport async function createRipple(event: MouseEvent, options: RippleOptions) {\n  const button = options.parent ?? (event.currentTarget as Element);\n  const existingRipple = button.getElementsByClassName(RIPPLE)[0];\n  existingRipple?.remove();\n\n  button.classList.add('ripple-parent');\n  setPositionRelativeIfStatic(button);\n  Array.from(button.children).forEach(setPositionRelativeIfStatic);\n\n  const ripple = document.createElement('span');\n  ripple.classList.add(RIPPLE);\n  ripple.style.backgroundColor = `var(--atomic-${options.color})`;\n  ripple.setAttribute('part', RIPPLE);\n\n  const diameter = Math.max(button.clientWidth, button.clientHeight);\n  const radius = diameter / 2;\n  const animationDuration = getAnimationDurationInMilliseconds(radius);\n  const {top, left} = button.getBoundingClientRect();\n  ripple.style.width = ripple.style.height = `${diameter}px`;\n  ripple.style.left = `${event.clientX - (left + radius)}px`;\n  ripple.style.top = `${event.clientY - (top + radius)}px`;\n  ripple.style.setProperty('--animation-duration', `${animationDuration}ms`);\n  button.prepend(ripple);\n  await cleanupAnimationOnFinish(ripple, animationDuration);\n}\n\nasync function cleanupAnimationOnFinish(\n  ripple: HTMLSpanElement,\n  animationDuration: number\n) {\n  listenOnce(ripple, 'animationend', () => {\n    ripple?.remove();\n  });\n  // Backup in case the button gets hidden or unmounted and the ripple hasn't been cleaned up.\n  setTimeout(\n    () => ripple?.remove(),\n    animationDuration + animationDuration * 0.1\n  );\n}\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {createRipple} from '../../utils/ripple-utils';\nimport {\n  ButtonStyle,\n  getRippleColorForButtonStyle,\n  getClassNameForButtonStyle,\n} from './stencil-button-style';\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use ButtonProps interface instead\n */\nexport interface StencilButtonProps {\n  style: ButtonStyle;\n  onClick?(event?: MouseEvent): void;\n  class?: string;\n  text?: string;\n  part?: string;\n  type?: string;\n  form?: string;\n  role?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  ariaExpanded?: string;\n  ariaPressed?: string;\n  ariaChecked?: string;\n  ariaCurrent?: string;\n  ariaControls?: string;\n  ariaHidden?: string;\n  tabIndex?: string;\n  title?: string;\n  ref?(element?: HTMLButtonElement): void;\n}\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead\n */\nexport const Button: FunctionalComponent<StencilButtonProps> = (\n  props,\n  children\n) => {\n  const rippleColor = getRippleColorForButtonStyle(props.style);\n  const className = getClassNameForButtonStyle(props.style);\n\n  const attributes = {\n    class: props.class ? `${className} ${props.class}` : className,\n    part: props.part,\n    onClick: props.onClick,\n    title: props.title,\n    type: props.type,\n    role: props.role,\n    'aria-label': props.ariaLabel,\n    'aria-expanded': props.ariaExpanded,\n    'aria-pressed': props.ariaPressed,\n    'aria-checked': props.ariaChecked,\n    'aria-current': props.ariaCurrent,\n    'aria-controls': props.ariaControls,\n    'aria-hidden': props.ariaHidden,\n    disabled: props.disabled,\n    ref(buttonEl?: HTMLButtonElement) {\n      if (props.form) {\n        buttonEl?.setAttribute('form', props.form);\n      }\n      if (props.ariaHidden) {\n        buttonEl?.setAttribute('aria-hidden', props.ariaHidden);\n      }\n      if (props.tabIndex) {\n        buttonEl?.setAttribute('tabindex', props.tabIndex);\n      }\n      props.ref?.(buttonEl);\n    },\n  };\n\n  return (\n    <button\n      {...attributes}\n      onMouseDown={(e) => createRipple(e, {color: rippleColor})}\n    >\n      {props.text ? <span class=\"truncate\">{props.text}</span> : null}\n      {children}\n    </button>\n  );\n};\n"],"version":3}
+{"file":"stencil-button.js","mappings":"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","names":[],"sources":["src/utils/ripple-utils.ts","src/components/common/stencil-button-style.tsx","src/components/common/stencil-button.tsx"],"sourcesContent":["import {listenOnce} from './event-utils';\n\ninterface RippleOptions {\n  color: string;\n  /**\n   * When the ripple's parent is not the event's origin\n   */\n  parent?: Element;\n}\n\nconst RIPPLE = 'ripple';\n\nfunction getAnimationDurationInMilliseconds(radiusPixels: number) {\n  // A 318px wide button has a duration of 700ms.\n  return Math.cbrt(radiusPixels) * 129.21;\n}\n\nfunction setPositionRelativeIfStatic(element: Element) {\n  if (getComputedStyle(element).position === 'static') {\n    element.classList.add('ripple-relative');\n  }\n}\n\nexport async function createRipple(event: MouseEvent, options: RippleOptions) {\n  const button = options.parent ?? (event.currentTarget as Element);\n  const existingRipple = button.getElementsByClassName(RIPPLE)[0];\n  existingRipple?.remove();\n\n  button.classList.add('ripple-parent');\n  setPositionRelativeIfStatic(button);\n  Array.from(button.children).forEach(setPositionRelativeIfStatic);\n\n  const ripple = document.createElement('span');\n  ripple.classList.add(RIPPLE);\n  ripple.style.backgroundColor = `var(--atomic-${options.color})`;\n  ripple.setAttribute('part', RIPPLE);\n\n  const diameter = Math.max(button.clientWidth, button.clientHeight);\n  const radius = diameter / 2;\n  const animationDuration = getAnimationDurationInMilliseconds(radius);\n  const {top, left} = button.getBoundingClientRect();\n  ripple.style.width = ripple.style.height = `${diameter}px`;\n  ripple.style.left = `${event.clientX - (left + radius)}px`;\n  ripple.style.top = `${event.clientY - (top + radius)}px`;\n  ripple.style.setProperty('--animation-duration', `${animationDuration}ms`);\n  button.prepend(ripple);\n  await cleanupAnimationOnFinish(ripple, animationDuration);\n}\n\nasync function cleanupAnimationOnFinish(\n  ripple: HTMLSpanElement,\n  animationDuration: number\n) {\n  listenOnce(ripple, 'animationend', () => {\n    ripple?.remove();\n  });\n  // Backup in case the button gets hidden or unmounted and the ripple hasn't been cleaned up.\n  setTimeout(\n    () => ripple?.remove(),\n    animationDuration + animationDuration * 0.1\n  );\n}\n","export type ButtonStyle =\n  | 'primary'\n  | 'outline-primary'\n  | 'outline-neutral'\n  | 'outline-error'\n  | 'outline-bg-neutral'\n  | 'outline-bg-error'\n  | 'text-primary'\n  | 'text-neutral'\n  | 'text-transparent'\n  | 'square-neutral';\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the button-style.ts\n * This file is required to be in a tsx file to be able to use it in Stencil components.\n */\nexport function getClassNameForButtonStyle(buttonStyle: ButtonStyle) {\n  switch (buttonStyle) {\n    case 'primary':\n      return 'btn-primary';\n    case 'outline-primary':\n      return 'btn-outline-primary';\n    case 'outline-neutral':\n      return 'btn-outline-neutral';\n    case 'outline-error':\n      return 'btn-outline-error';\n    case 'outline-bg-neutral':\n      return 'btn-outline-bg-neutral';\n    case 'outline-bg-error':\n      return 'btn-outline-bg-error';\n    case 'text-primary':\n      return 'btn-text-primary';\n    case 'text-neutral':\n      return 'btn-text-neutral';\n    case 'text-transparent':\n      return 'btn-text-transparent';\n    case 'square-neutral':\n      return 'btn-square-neutral';\n  }\n}\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the button-style.ts\n * This file is required to be in a tsx file to be able to use it in Stencil components.\n */\nexport function getRippleColorForButtonStyle(buttonStyle: ButtonStyle) {\n  switch (buttonStyle) {\n    case 'primary':\n      return 'primary';\n    case 'text-transparent':\n      return 'neutral-light';\n    default:\n      return 'neutral';\n  }\n}\n","import {FunctionalComponent, h} from '@stencil/core';\nimport {createRipple} from '../../utils/ripple-utils';\nimport {\n  ButtonStyle,\n  getRippleColorForButtonStyle,\n  getClassNameForButtonStyle,\n} from './stencil-button-style';\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use ButtonProps interface instead\n */\nexport interface StencilButtonProps {\n  style: ButtonStyle;\n  onClick?(event?: MouseEvent): void;\n  class?: string;\n  text?: string;\n  part?: string;\n  type?: string;\n  form?: string;\n  role?: string;\n  disabled?: boolean;\n  ariaLabel?: string;\n  ariaExpanded?: string;\n  ariaPressed?: string;\n  ariaChecked?: string;\n  ariaCurrent?: string;\n  ariaControls?: string;\n  ariaHidden?: string;\n  tabIndex?: string;\n  title?: string;\n  ref?(element?: HTMLButtonElement): void;\n}\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead\n */\nexport const Button: FunctionalComponent<StencilButtonProps> = (\n  props,\n  children\n) => {\n  const rippleColor = getRippleColorForButtonStyle(props.style);\n  const className = getClassNameForButtonStyle(props.style);\n\n  const attributes = {\n    class: props.class ? `${className} ${props.class}` : className,\n    part: props.part,\n    onClick: props.onClick,\n    title: props.title,\n    type: props.type,\n    role: props.role,\n    'aria-label': props.ariaLabel,\n    'aria-expanded': props.ariaExpanded,\n    'aria-pressed': props.ariaPressed,\n    'aria-checked': props.ariaChecked,\n    'aria-current': props.ariaCurrent,\n    'aria-controls': props.ariaControls,\n    'aria-hidden': props.ariaHidden,\n    disabled: props.disabled,\n    ref(buttonEl?: HTMLButtonElement) {\n      if (props.form) {\n        buttonEl?.setAttribute('form', props.form);\n      }\n      if (props.ariaHidden) {\n        buttonEl?.setAttribute('aria-hidden', props.ariaHidden);\n      }\n      if (props.tabIndex) {\n        buttonEl?.setAttribute('tabindex', props.tabIndex);\n      }\n      props.ref?.(buttonEl);\n    },\n  };\n\n  return (\n    <button\n      {...attributes}\n      onMouseDown={(e) => createRipple(e, {color: rippleColor})}\n    >\n      {props.text ? <span class=\"truncate\">{props.text}</span> : null}\n      {children}\n    </button>\n  );\n};\n"],"version":3}

package/dist/atomic/components/stencil-radio-button.js

@@ -1,6 +1,5 @@
 import { h } from '@stencil/core/internal/client';
-import { c as createRipple } from './stencil-button.js';
-import { a as getRippleColorForButtonStyle, g as getClassNameForButtonStyle } from './stencil-button-style.js';
+import { c as createRipple, g as getRippleColorForButtonStyle, a as getClassNameForButtonStyle } from './stencil-button.js';
 
 /**
  * @deprecated Should only be used for Stencil components; for Lit components, use the radioButton function instead.

package/dist/atomic/components/stencil-radio-button.js.map

@@ -1 +1 @@
-{"file":"stencil-radio-button.js","mappings":"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","names":[],"sources":["src/components/common/stencil-radio-button.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {JSXBase} from '@stencil/core/internal';\nimport {createRipple} from '../../utils/ripple-utils';\nimport {RadioButtonProps} from './radio-button';\nimport {\n  getClassNameForButtonStyle,\n  getRippleColorForButtonStyle,\n} from './stencil-button-style';\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the RadioButtonProps from radio-button.ts instead.\n */\nexport interface StencilRadioButtonProps extends Omit<RadioButtonProps, 'ref'> {\n  ref?(element?: HTMLInputElement): void;\n}\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the radioButton function instead.\n */\nexport const RadioButton: FunctionalComponent<StencilRadioButtonProps> = (\n  props\n) => {\n  const classNames = ['btn-radio'];\n  let onMouseDown:\n    | JSXBase.DOMAttributes<HTMLInputElement>['onMouseDown']\n    | undefined;\n  if (props.style) {\n    const rippleColor = getRippleColorForButtonStyle(props.style);\n    classNames.push(getClassNameForButtonStyle(props.style));\n\n    onMouseDown = (e) => createRipple(e, {color: rippleColor});\n  }\n  if (props.checked) {\n    classNames.push('selected');\n  }\n  if (props.class) {\n    classNames.push(props.class);\n  }\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (props.selectWhenFocused !== false) {\n      return;\n    }\n    const {key} = event;\n    const radioGroup = (event.currentTarget as HTMLElement).parentNode;\n\n    if (!radioGroup || !isArrowKey(key)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const buttons = getRadioButtons(radioGroup);\n    const currentIndex = getCurrentIndex(\n      buttons,\n      event.currentTarget as HTMLInputElement\n    );\n    const newIndex = getNewIndex(key, currentIndex, buttons.length);\n\n    if (buttons[newIndex]) {\n      buttons[newIndex].focus();\n    }\n  };\n\n  const isArrowKey = (key: string) => {\n    return ['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp'].includes(key);\n  };\n\n  const getRadioButtons = (radioGroup: ParentNode) => {\n    return Array.from(\n      radioGroup.querySelectorAll('[type=\"radio\"]')\n    ) as HTMLInputElement[];\n  };\n\n  const getCurrentIndex = (\n    buttons: HTMLInputElement[],\n    currentButton: HTMLInputElement\n  ) => {\n    return buttons.findIndex((button) => button === currentButton);\n  };\n\n  const getNewIndex = (key: string, currentIndex: number, length: number) => {\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        return (currentIndex - 1 + length) % length;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        return (currentIndex + 1) % length;\n      default:\n        return currentIndex;\n    }\n  };\n\n  const attributes = {\n    name: props.groupName,\n    key: props.key,\n    checked: props.checked,\n    class: classNames.join(' '),\n    part: props.part,\n    'aria-label': props.ariaLabel ?? props.text,\n    'aria-current': props.ariaCurrent,\n    value: props.text,\n    ref: props.ref,\n  };\n\n  return (\n    <input\n      onKeyDown={handleKeyDown}\n      type=\"radio\"\n      onChange={(e) =>\n        (e.currentTarget as HTMLInputElement).checked && props.onChecked?.()\n      }\n      onMouseDown={onMouseDown}\n      {...attributes}\n    />\n  );\n};\n"],"version":3}
+{"file":"stencil-radio-button.js","mappings":";;;AAgBA;;;MAGa,WAAW,GAAiD,CACvE,KAAK;IAEL,MAAM,UAAU,GAAG,CAAC,WAAW,CAAC,CAAC;IACjC,IAAI,WAES,CAAC;IACd,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,MAAM,WAAW,GAAG,4BAA4B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC9D,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAEzD,WAAW,GAAG,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,EAAE,EAAC,KAAK,EAAE,WAAW,EAAC,CAAC,CAAC;KAC5D;IACD,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC7B;IACD,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,MAAM,aAAa,GAAG,CAAC,KAAoB;QACzC,IAAI,KAAK,CAAC,iBAAiB,KAAK,KAAK,EAAE;YACrC,OAAO;SACR;QACD,MAAM,EAAC,GAAG,EAAC,GAAG,KAAK,CAAC;QACpB,MAAM,UAAU,GAAI,KAAK,CAAC,aAA6B,CAAC,UAAU,CAAC;QAEnE,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACnC,OAAO;SACR;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,OAAO,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;QAC5C,MAAM,YAAY,GAAG,eAAe,CAClC,OAAO,EACP,KAAK,CAAC,aAAiC,CACxC,CAAC;QACF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;QAEhE,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;YACrB,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;SAC3B;KACF,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,GAAW;QAC7B,OAAO,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KAC1E,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,UAAsB;QAC7C,OAAO,KAAK,CAAC,IAAI,CACf,UAAU,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CACxB,CAAC;KACzB,CAAC;IAEF,MAAM,eAAe,GAAG,CACtB,OAA2B,EAC3B,aAA+B;QAE/B,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,KAAK,MAAM,KAAK,aAAa,CAAC,CAAC;KAChE,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,YAAoB,EAAE,MAAc;QACpE,QAAQ,GAAG;YACT,KAAK,WAAW,CAAC;YACjB,KAAK,SAAS;gBACZ,OAAO,CAAC,YAAY,GAAG,CAAC,GAAG,MAAM,IAAI,MAAM,CAAC;YAC9C,KAAK,YAAY,CAAC;YAClB,KAAK,WAAW;gBACd,OAAO,CAAC,YAAY,GAAG,CAAC,IAAI,MAAM,CAAC;YACrC;gBACE,OAAO,YAAY,CAAC;SACvB;KACF,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,IAAI,EAAE,KAAK,CAAC,SAAS;QACrB,GAAG,EAAE,KAAK,CAAC,GAAG;QACd,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;QAC3B,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,YAAY,EAAE,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI;QAC3C,cAAc,EAAE,KAAK,CAAC,WAAW;QACjC,KAAK,EAAE,KAAK,CAAC,IAAI;QACjB,GAAG,EAAE,KAAK,CAAC,GAAG;KACf,CAAC;IAEF,QACE,aACE,SAAS,EAAE,aAAa,EACxB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,CAAC,CAAC,KACT,CAAC,CAAC,aAAkC,CAAC,OAAO,IAAI,KAAK,CAAC,SAAS,IAAI,EAEtE,WAAW,EAAE,WAAW,KACpB,UAAU,GACd,EACF;AACJ;;;;","names":[],"sources":["src/components/common/stencil-radio-button.tsx"],"sourcesContent":["import {FunctionalComponent, h} from '@stencil/core';\nimport {JSXBase} from '@stencil/core/internal';\nimport {createRipple} from '../../utils/ripple-utils';\nimport {RadioButtonProps} from './radio-button';\nimport {\n  getClassNameForButtonStyle,\n  getRippleColorForButtonStyle,\n} from './stencil-button-style';\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the RadioButtonProps from radio-button.ts instead.\n */\nexport interface StencilRadioButtonProps extends Omit<RadioButtonProps, 'ref'> {\n  ref?(element?: HTMLInputElement): void;\n}\n\n/**\n * @deprecated Should only be used for Stencil components; for Lit components, use the radioButton function instead.\n */\nexport const RadioButton: FunctionalComponent<StencilRadioButtonProps> = (\n  props\n) => {\n  const classNames = ['btn-radio'];\n  let onMouseDown:\n    | JSXBase.DOMAttributes<HTMLInputElement>['onMouseDown']\n    | undefined;\n  if (props.style) {\n    const rippleColor = getRippleColorForButtonStyle(props.style);\n    classNames.push(getClassNameForButtonStyle(props.style));\n\n    onMouseDown = (e) => createRipple(e, {color: rippleColor});\n  }\n  if (props.checked) {\n    classNames.push('selected');\n  }\n  if (props.class) {\n    classNames.push(props.class);\n  }\n\n  const handleKeyDown = (event: KeyboardEvent) => {\n    if (props.selectWhenFocused !== false) {\n      return;\n    }\n    const {key} = event;\n    const radioGroup = (event.currentTarget as HTMLElement).parentNode;\n\n    if (!radioGroup || !isArrowKey(key)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const buttons = getRadioButtons(radioGroup);\n    const currentIndex = getCurrentIndex(\n      buttons,\n      event.currentTarget as HTMLInputElement\n    );\n    const newIndex = getNewIndex(key, currentIndex, buttons.length);\n\n    if (buttons[newIndex]) {\n      buttons[newIndex].focus();\n    }\n  };\n\n  const isArrowKey = (key: string) => {\n    return ['ArrowLeft', 'ArrowRight', 'ArrowDown', 'ArrowUp'].includes(key);\n  };\n\n  const getRadioButtons = (radioGroup: ParentNode) => {\n    return Array.from(\n      radioGroup.querySelectorAll('[type=\"radio\"]')\n    ) as HTMLInputElement[];\n  };\n\n  const getCurrentIndex = (\n    buttons: HTMLInputElement[],\n    currentButton: HTMLInputElement\n  ) => {\n    return buttons.findIndex((button) => button === currentButton);\n  };\n\n  const getNewIndex = (key: string, currentIndex: number, length: number) => {\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        return (currentIndex - 1 + length) % length;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        return (currentIndex + 1) % length;\n      default:\n        return currentIndex;\n    }\n  };\n\n  const attributes = {\n    name: props.groupName,\n    key: props.key,\n    checked: props.checked,\n    class: classNames.join(' '),\n    part: props.part,\n    'aria-label': props.ariaLabel ?? props.text,\n    'aria-current': props.ariaCurrent,\n    value: props.text,\n    ref: props.ref,\n  };\n\n  return (\n    <input\n      onKeyDown={handleKeyDown}\n      type=\"radio\"\n      onChange={(e) =>\n        (e.currentTarget as HTMLInputElement).checked && props.onChecked?.()\n      }\n      onMouseDown={onMouseDown}\n      {...attributes}\n    />\n  );\n};\n"],"version":3}

package/dist/atomic/components/tab-button.js

@@ -25,7 +25,7 @@ const AtomicTabButton = /*@__PURE__*/ proxyCustomElement(class AtomicTabButton e
         return this.active ? '' : 'text-neutral-dark hover:text-primary-light';
     }
     render() {
-        return (h(Host, { key: '664e3146ffed0c73ec4baa3dc016da5de5865da4', role: "listitem", class: `${this.activeTabClass}`, "aria-current": this.active ? 'true' : 'false', "aria-label": 'tab for ' + this.label, part: 'button-container' + (this.active ? '-active' : '') }, h(Button, { key: 'dc11bc1ebcaa478d87a544d143028d06d11d6089', class: `w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`, part: 'tab-button' + (this.active ? '-active' : ''), onClick: this.select, style: "text-transparent" }, this.label)));
+        return (h(Host, { key: '3f4124ae93e3618d4b708b0466560a6ee199fc8e', role: "listitem", class: `${this.activeTabClass}`, "aria-current": this.active ? 'true' : 'false', "aria-label": 'tab for ' + this.label, part: 'button-container' + (this.active ? '-active' : '') }, h(Button, { key: 'e2d40ec38ee9af1c84662c81915e8e3ad6098a41', class: `w-full truncate px-2 pb-1 text-xl sm:px-6 ${this.activeTabTextClass}`, part: 'tab-button' + (this.active ? '-active' : ''), onClick: this.select, style: "text-transparent" }, this.label)));
     }
     static get style() { return AtomicTabButtonStyle0; }
 }, [0, "atomic-tab-button", {

package/dist/atomic/components/tab-popover.js

@@ -144,7 +144,7 @@ const TabPopover = /*@__PURE__*/ proxyCustomElement(class TabPopover extends HTM
         this.popperInstance?.forceUpdate();
     }
     render() {
-        return (h(Host, { key: '5bccea802e62c4027ebf62ce69332215925475f2', onFocusout: (event) => this.closePopoverOnFocusOut(event), class: this.show ? '' : 'visibility-hidden', "aria-hidden": !this.show }, this.renderPopover(), this.isOpen && this.renderBackdrop()));
+        return (h(Host, { key: 'ea32303930fe0e7b00855f2a922a4e85a72d6a6a', onFocusout: (event) => this.closePopoverOnFocusOut(event), class: this.show ? '' : 'visibility-hidden', "aria-hidden": !this.show }, this.renderPopover(), this.isOpen && this.renderBackdrop()));
     }
     get host() { return this; }
     static get style() { return AtomicTabPopoverStyle0; }

package/dist/atomic/components/utils/compare-utils.js

@@ -0,0 +1,49 @@
+/**
+ * Performs a deep equality comparison between two values.
+ * Handles primitives, null/undefined, arrays, and objects.
+ *
+ * @param a - First value to compare
+ * @param b - Second value to compare
+ * @returns true if values are deeply equal, false otherwise
+ */
+export function deepEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    if (a == null || b == null) {
+        return false;
+    }
+    const typeA = typeof a;
+    const typeB = typeof b;
+    if (typeA !== typeB) {
+        return false;
+    }
+    if (Array.isArray(a)) {
+        if (!Array.isArray(b) || a.length !== b.length) {
+            return false;
+        }
+        for (let i = 0; i < a.length; i++) {
+            if (!deepEqual(a[i], b[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    if (typeA === 'object') {
+        const aObj = a;
+        const bObj = b;
+        const aKeys = Object.keys(aObj);
+        const bKeys = Object.keys(bObj);
+        if (aKeys.length !== bKeys.length) {
+            return false;
+        }
+        for (let i = 0; i < aKeys.length; i++) {
+            const key = aKeys[i];
+            if (!deepEqual(aObj[key], bObj[key])) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}

package/dist/atomic/{p-3cbab25b.entry.js → p-03e57267.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as r,g as s}from"./p-dc3df5ce.js";import{d as e,a as i}from"./p-25a96534.js";import"./p-1580513b.js";const o=class{constructor(r){t(this,r);this.error=undefined;this.currency=undefined}componentWillLoad(){this.format=e(this.currency);try{i(((t,r)=>this.format(t,r)),this.host)}catch(t){this.error=t}}render(){if(this.error){return r("atomic-component-error",{key:"af6838ce71462de1c33af19501ca0eabf434afe5",element:this.host,error:this.error})}}get host(){return s(this)}};export{o as atomic_format_currency};
-//# sourceMappingURL=p-3cbab25b.entry.js.map
+import{r as t,h as r,g as s}from"./p-dc3df5ce.js";import{d as e,a as i}from"./p-25a96534.js";import"./p-1580513b.js";const o=class{constructor(r){t(this,r);this.error=undefined;this.currency=undefined}componentWillLoad(){this.format=e(this.currency);try{i(((t,r)=>this.format(t,r)),this.host)}catch(t){this.error=t}}render(){if(this.error){return r("atomic-component-error",{key:"2ab289aee2c309bd30465869693c3362da97cc03",element:this.host,error:this.error})}}get host(){return s(this)}};export{o as atomic_format_currency};
+//# sourceMappingURL=p-03e57267.entry.js.map

package/dist/atomic/p-049357e3.entry.js

@@ -0,0 +1,2 @@
+import{r as n,h as r}from"./p-dc3df5ce.js";import{I as t}from"./p-ca0e9cd6.js";import"./p-75c37247.js";import"./p-1580513b.js";const e=`<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M6.80533 10.547L6.34412 10.3539C6.25831 10.5589 6.31805 10.7958 6.49074 10.9356C6.66344 11.0754 6.90766 11.0845 7.09024 10.9579L6.80533 10.547ZM7.42452 10.1176L7.1396 9.70675L7.42452 10.1176ZM7.09291 9.86009L7.55412 10.0532L7.09291 9.86009ZM7.63231 9.92488L12.1735 4.51291L11.4075 3.87012L6.86627 9.28209L7.63231 9.92488ZM11.7905 4.1915L7.23771 9.61727L8.00375 10.2601L12.5565 4.83429L11.7905 4.1915ZM7.1396 9.70675L6.52041 10.1361L7.09024 10.9579L7.70943 10.5285L7.1396 9.70675ZM7.26654 10.7401L7.55412 10.0532L6.6317 9.667L6.34412 10.3539L7.26654 10.7401ZM7.23771 9.61727C7.20913 9.65133 7.17614 9.68142 7.1396 9.70675L7.70943 10.5285C7.81904 10.4525 7.91802 10.3622 8.00375 10.2601L7.23771 9.61727ZM11.8213 4.54372C11.7155 4.45497 11.7017 4.29728 11.7905 4.1915L12.5565 4.83429C12.8228 4.51699 12.7814 4.04393 12.4641 3.77768L11.8213 4.54372ZM12.1735 4.51291C12.0848 4.61868 11.9271 4.63248 11.8213 4.54372L12.4641 3.77768C12.1468 3.51143 11.6737 3.55282 11.4075 3.87012L12.1735 4.51291ZM6.86627 9.28209C6.76914 9.39785 6.69005 9.52762 6.6317 9.667L7.55412 10.0532C7.57357 10.0067 7.59993 9.96347 7.63231 9.92488L6.86627 9.28209Z" fill="currentColor"/>\n<path d="M0.500009 11.5H1.00001H0.500009ZM0.5 1.5H0V1.5L0.5 1.5ZM11 8.89473C11 8.61859 10.7762 8.39473 10.5 8.39473C10.2239 8.39473 10 8.61859 10 8.89473H11ZM10 3C10 3.27614 10.2239 3.5 10.5 3.5C10.7762 3.5 11 3.27614 11 3H10ZM9.50001 12H1.50001V13H9.50001V12ZM1.00001 11.5L1 1.5L0 1.5L8.82149e-06 11.5H1.00001ZM1.5 1H9.50001V0H1.5V1ZM10 8.89473V11.5H11V8.89473H10ZM10 1.5V3H11V1.5H10ZM9.50001 1C9.77615 1 10 1.22386 10 1.5H11C11 0.671572 10.3284 0 9.50001 0V1ZM1.50001 12C1.22387 12 1.00001 11.7761 1.00001 11.5H8.82149e-06C9.47714e-06 12.3284 0.671582 13 1.50001 13V12ZM9.50001 13C10.3284 13 11 12.3284 11 11.5H10C10 11.7761 9.77615 12 9.50001 12V13ZM1 1.5C1 1.22386 1.22386 1 1.5 1V0C0.671573 0 0 0.671574 0 1.5H1Z" fill="currentColor"/>\n<line x1="2.5" y1="6.5" x2="7.5" y2="6.5" stroke="currentColor" stroke-linecap="round"/>\n<line x1="2.5" y1="3.5" x2="8.5" y2="3.5" stroke="currentColor" stroke-linecap="round"/>\n<path d="M2.5 9.5L4.5 9.5" stroke="currentColor" stroke-linecap="round"/>\n</svg>\n`;const i='/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer properties {\n  *, :before, :after, ::backdrop {\n    --tw-translate-x: 0;\n    --tw-translate-y: 0;\n    --tw-translate-z: 0;\n    --tw-scale-x: 1;\n    --tw-scale-y: 1;\n    --tw-scale-z: 1;\n    --tw-rotate-x: initial;\n    --tw-rotate-y: initial;\n    --tw-rotate-z: initial;\n    --tw-skew-x: initial;\n    --tw-skew-y: initial;\n    --tw-space-x-reverse: 0;\n    --tw-divide-y-reverse: 0;\n    --tw-border-style: solid;\n    --tw-gradient-position: initial;\n    --tw-gradient-from: #0000;\n    --tw-gradient-via: #0000;\n    --tw-gradient-to: #0000;\n    --tw-gradient-stops: initial;\n    --tw-gradient-via-stops: initial;\n    --tw-gradient-from-position: 0%;\n    --tw-gradient-via-position: 50%;\n    --tw-gradient-to-position: 100%;\n    --tw-leading: initial;\n    --tw-font-weight: initial;\n    --tw-shadow: 0 0 #0000;\n    --tw-shadow-color: initial;\n    --tw-shadow-alpha: 100%;\n    --tw-inset-shadow: 0 0 #0000;\n    --tw-inset-shadow-color: initial;\n    --tw-inset-shadow-alpha: 100%;\n    --tw-ring-color: initial;\n    --tw-ring-shadow: 0 0 #0000;\n    --tw-inset-ring-color: initial;\n    --tw-inset-ring-shadow: 0 0 #0000;\n    --tw-ring-inset: initial;\n    --tw-ring-offset-width: 0px;\n    --tw-ring-offset-color: #fff;\n    --tw-ring-offset-shadow: 0 0 #0000;\n    --tw-outline-style: solid;\n    --tw-blur: initial;\n    --tw-brightness: initial;\n    --tw-contrast: initial;\n    --tw-grayscale: initial;\n    --tw-hue-rotate: initial;\n    --tw-invert: initial;\n    --tw-opacity: initial;\n    --tw-saturate: initial;\n    --tw-sepia: initial;\n    --tw-drop-shadow: initial;\n    --tw-drop-shadow-color: initial;\n    --tw-drop-shadow-alpha: 100%;\n    --tw-drop-shadow-size: initial;\n    --tw-duration: initial;\n    --tw-ease: initial;\n    --tw-content: "";\n  }\n}\n@layer theme, base, components, utilities;\n@layer theme;\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, var(--atomic-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n    "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n    }\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .\\@container {\n    container-type: inline-size;\n  }\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .collapse {\n    visibility: collapse;\n  }\n  .invisible {\n    visibility: hidden;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .sticky {\n    position: sticky;\n  }\n  .inset-0 {\n    inset: calc(0.25rem * 0);\n  }\n  .-top-2 {\n    top: calc(0.25rem * -2);\n  }\n  .-top-4 {\n    top: calc(0.25rem * -4);\n  }\n  .top-0 {\n    top: calc(0.25rem * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-6 {\n    top: calc(0.25rem * 6);\n  }\n  .top-\\[4px\\] {\n    top: 4px;\n  }\n  .top-full {\n    top: 100%;\n  }\n  .top-px {\n    top: 1px;\n  }\n  .-right-2 {\n    right: calc(0.25rem * -2);\n  }\n  .right-0 {\n    right: calc(0.25rem * 0);\n  }\n  .right-2 {\n    right: calc(0.25rem * 2);\n  }\n  .right-6 {\n    right: calc(0.25rem * 6);\n  }\n  .right-12 {\n    right: calc(0.25rem * 12);\n  }\n  .right-20 {\n    right: calc(0.25rem * 20);\n  }\n  .right-px {\n    right: 1px;\n  }\n  .bottom-0 {\n    bottom: calc(0.25rem * 0);\n  }\n  .bottom-1 {\n    bottom: calc(0.25rem * 1);\n  }\n  .bottom-2 {\n    bottom: calc(0.25rem * 2);\n  }\n  .bottom-px {\n    bottom: 1px;\n  }\n  .left-0 {\n    left: calc(0.25rem * 0);\n  }\n  .left-1 {\n    left: calc(0.25rem * 1);\n  }\n  .left-2 {\n    left: calc(0.25rem * 2);\n  }\n  .left-\\[15px\\] {\n    left: 15px;\n  }\n  .isolate {\n    isolation: isolate;\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-1 {\n    z-index: 1;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-9998 {\n    z-index: 9998;\n  }\n  .z-9999 {\n    z-index: 9999;\n  }\n  .order-last {\n    order: 9999;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .container {\n    width: 100%;\n  }\n  @media (width >= 1024px) {\n    .container {\n      max-width: 1024px;\n    }\n  }\n  @media (width >= 40rem) {\n    .container {\n      max-width: 40rem;\n    }\n  }\n  @media (width >= 48rem) {\n    .container {\n      max-width: 48rem;\n    }\n  }\n  @media (width >= 64rem) {\n    .container {\n      max-width: 64rem;\n    }\n  }\n  @media (width >= 80rem) {\n    .container {\n      max-width: 80rem;\n    }\n  }\n  @media (width >= 96rem) {\n    .container {\n      max-width: 96rem;\n    }\n  }\n  .m-0 {\n    margin: calc(0.25rem * 0);\n  }\n  .m-2 {\n    margin: calc(0.25rem * 2);\n  }\n  .mx-0 {\n    margin-inline: calc(0.25rem * 0);\n  }\n  .mx-0\\.5 {\n    margin-inline: calc(0.25rem * 0.5);\n  }\n  .mx-1 {\n    margin-inline: calc(0.25rem * 1);\n  }\n  .mx-6 {\n    margin-inline: calc(0.25rem * 6);\n  }\n  .mx-16 {\n    margin-inline: calc(0.25rem * 16);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .my-2 {\n    margin-block: calc(0.25rem * 2);\n  }\n  .my-3 {\n    margin-block: calc(0.25rem * 3);\n  }\n  .my-4 {\n    margin-block: calc(0.25rem * 4);\n  }\n  .my-6 {\n    margin-block: calc(0.25rem * 6);\n  }\n  .my-auto {\n    margin-block: auto;\n  }\n  .mt-0 {\n    margin-top: calc(0.25rem * 0);\n  }\n  .mt-1 {\n    margin-top: calc(0.25rem * 1);\n  }\n  .mt-1\\.5 {\n    margin-top: calc(0.25rem * 1.5);\n  }\n  .mt-2 {\n    margin-top: calc(0.25rem * 2);\n  }\n  .mt-2\\.5 {\n    margin-top: calc(0.25rem * 2.5);\n  }\n  .mt-3 {\n    margin-top: calc(0.25rem * 3);\n  }\n  .mt-4 {\n    margin-top: calc(0.25rem * 4);\n  }\n  .mt-6 {\n    margin-top: calc(0.25rem * 6);\n  }\n  .mt-7 {\n    margin-top: calc(0.25rem * 7);\n  }\n  .mt-8 {\n    margin-top: calc(0.25rem * 8);\n  }\n  .mt-10 {\n    margin-top: calc(0.25rem * 10);\n  }\n  .mt-px {\n    margin-top: 1px;\n  }\n  .mr-0 {\n    margin-right: calc(0.25rem * 0);\n  }\n  .mr-0\\.5 {\n    margin-right: calc(0.25rem * 0.5);\n  }\n  .mr-1 {\n    margin-right: calc(0.25rem * 1);\n  }\n  .mr-1\\.5 {\n    margin-right: calc(0.25rem * 1.5);\n  }\n  .mr-2 {\n    margin-right: calc(0.25rem * 2);\n  }\n  .mr-3 {\n    margin-right: calc(0.25rem * 3);\n  }\n  .mr-6 {\n    margin-right: calc(0.25rem * 6);\n  }\n  .mb-0 {\n    margin-bottom: calc(0.25rem * 0);\n  }\n  .mb-1 {\n    margin-bottom: calc(0.25rem * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(0.25rem * 2);\n  }\n  .mb-3 {\n    margin-bottom: calc(0.25rem * 3);\n  }\n  .mb-4 {\n    margin-bottom: calc(0.25rem * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(0.25rem * 6);\n  }\n  .ml-0\\.5 {\n    margin-left: calc(0.25rem * 0.5);\n  }\n  .ml-1 {\n    margin-left: calc(0.25rem * 1);\n  }\n  .ml-2 {\n    margin-left: calc(0.25rem * 2);\n  }\n  .ml-4 {\n    margin-left: calc(0.25rem * 4);\n  }\n  .ml-6 {\n    margin-left: calc(0.25rem * 6);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .box-border {\n    box-sizing: border-box;\n  }\n  .box-content {\n    box-sizing: content-box;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .line-clamp-2 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n  .line-clamp-3 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n  }\n  .line-clamp-4 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 4;\n  }\n  .line-clamp-none {\n    overflow: visible;\n    display: block;\n    -webkit-box-orient: horizontal;\n    -webkit-line-clamp: unset;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .aspect-square-\\[auto\\] {\n    aspect-ratio: 1 / 1;\n    height: auto;\n  }\n  @supports not (aspect-ratio: 1 / 1) {\n    .aspect-square-\\[auto\\] {\n      height: auto;\n    }\n  }\n  .aspect-square-\\[auto\\] {\n    aspect-ratio: 1 / 1;\n    height: auto;\n  }\n  @supports not (aspect-ratio: 1 / 1) {\n    .aspect-square-\\[auto\\] {\n      height: auto;\n    }\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-\\[27px\\] {\n    width: 27px;\n    height: 27px;\n  }\n  .h-1 {\n    height: calc(0.25rem * 1);\n  }\n  .h-2 {\n    height: calc(0.25rem * 2);\n  }\n  .h-2\\.5 {\n    height: calc(0.25rem * 2.5);\n  }\n  .h-3 {\n    height: calc(0.25rem * 3);\n  }\n  .h-4 {\n    height: calc(0.25rem * 4);\n  }\n  .h-5 {\n    height: calc(0.25rem * 5);\n  }\n  .h-5\\/6 {\n    height: calc(5/6 * 100%);\n  }\n  .h-6 {\n    height: calc(0.25rem * 6);\n  }\n  .h-7 {\n    height: calc(0.25rem * 7);\n  }\n  .h-8 {\n    height: calc(0.25rem * 8);\n  }\n  .h-9 {\n    height: calc(0.25rem * 9);\n  }\n  .h-10 {\n    height: calc(0.25rem * 10);\n  }\n  .h-12 {\n    height: calc(0.25rem * 12);\n  }\n  .h-\\[2\\.6rem\\] {\n    height: 2.6rem;\n  }\n  .h-\\[9px\\] {\n    height: 9px;\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-96 {\n    max-height: calc(0.25rem * 96);\n  }\n  .min-h-10 {\n    min-height: calc(0.25rem * 10);\n  }\n  .min-lines-2 {\n    min-height: calc(var(--line-height) * 2);\n  }\n  .min-lines-2 {\n    min-height: calc(var(--line-height) * 2);\n  }\n  .min-lines-3 {\n    min-height: calc(var(--line-height) * 3);\n  }\n  .min-lines-3 {\n    min-height: calc(var(--line-height) * 3);\n  }\n  .w-0\\.5 {\n    width: calc(0.25rem * 0.5);\n  }\n  .w-1 {\n    width: calc(0.25rem * 1);\n  }\n  .w-1\\/2 {\n    width: calc(1/2 * 100%);\n  }\n  .w-2 {\n    width: calc(0.25rem * 2);\n  }\n  .w-2\\.5 {\n    width: calc(0.25rem * 2.5);\n  }\n  .w-3 {\n    width: calc(0.25rem * 3);\n  }\n  .w-3\\.5 {\n    width: calc(0.25rem * 3.5);\n  }\n  .w-3\\/5 {\n    width: calc(3/5 * 100%);\n  }\n  .w-4 {\n    width: calc(0.25rem * 4);\n  }\n  .w-5 {\n    width: calc(0.25rem * 5);\n  }\n  .w-5\\/6 {\n    width: calc(5/6 * 100%);\n  }\n  .w-6 {\n    width: calc(0.25rem * 6);\n  }\n  .w-7 {\n    width: calc(0.25rem * 7);\n  }\n  .w-8 {\n    width: calc(0.25rem * 8);\n  }\n  .w-9 {\n    width: calc(0.25rem * 9);\n  }\n  .w-10 {\n    width: calc(0.25rem * 10);\n  }\n  .w-12 {\n    width: calc(0.25rem * 12);\n  }\n  .w-20 {\n    width: calc(0.25rem * 20);\n  }\n  .w-26 {\n    width: calc(0.25rem * 26);\n  }\n  .w-28 {\n    width: calc(0.25rem * 28);\n  }\n  .w-32 {\n    width: calc(0.25rem * 32);\n  }\n  .w-36 {\n    width: calc(0.25rem * 36);\n  }\n  .w-44 {\n    width: calc(0.25rem * 44);\n  }\n  .w-48 {\n    width: calc(0.25rem * 48);\n  }\n  .w-60 {\n    width: calc(0.25rem * 60);\n  }\n  .w-64 {\n    width: calc(0.25rem * 64);\n  }\n  .w-72 {\n    width: calc(0.25rem * 72);\n  }\n  .w-100 {\n    width: calc(0.25rem * 100);\n  }\n  .w-\\[2\\.6rem\\] {\n    width: 2.6rem;\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-max {\n    width: max-content;\n  }\n  .max-w-4\\/5 {\n    max-width: calc(4/5 * 100%);\n  }\n  .max-w-60 {\n    max-width: calc(0.25rem * 60);\n  }\n  .max-w-\\[30ch\\] {\n    max-width: 30ch;\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .max-w-lg {\n    max-width: 32rem;\n  }\n  .max-w-max {\n    max-width: max-content;\n  }\n  .min-w-0 {\n    min-width: calc(0.25rem * 0);\n  }\n  .min-w-10 {\n    min-width: calc(0.25rem * 10);\n  }\n  .min-w-20 {\n    min-width: calc(0.25rem * 20);\n  }\n  .min-w-24 {\n    min-width: calc(0.25rem * 24);\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-none {\n    flex: none;\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .flex-grow {\n    flex-grow: 1;\n  }\n  .grow {\n    flex-grow: 1;\n  }\n  .basis-1\\/2 {\n    flex-basis: calc(1/2 * 100%);\n  }\n  .basis-8 {\n    flex-basis: calc(0.25rem * 8);\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-1\\/2 {\n    --tw-translate-x: calc(1/2 * 100%);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-75 {\n    --tw-scale-x: 75%;\n    --tw-scale-y: 75%;\n    --tw-scale-z: 75%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-pulse {\n    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  .animate-spin {\n    animation: spin 1s linear infinite;\n  }\n  .cursor-\\[inherit\\] {\n    cursor: inherit;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .list-outside {\n    list-style-position: outside;\n  }\n  .list-decimal {\n    list-style-type: decimal;\n  }\n  .list-disc {\n    list-style-type: disc;\n  }\n  .list-none {\n    list-style-type: none;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .grid-cols-\\[min-content_1fr\\] {\n    grid-template-columns: min-content 1fr;\n  }\n  .grid-cols-\\[min-content_auto\\] {\n    grid-template-columns: min-content auto;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .place-items-center {\n    place-items: center;\n  }\n  .content-center {\n    align-content: center;\n  }\n  .items-baseline {\n    align-items: baseline;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-0\\.5 {\n    gap: calc(0.25rem * 0.5);\n  }\n  .gap-1 {\n    gap: calc(0.25rem * 1);\n  }\n  .gap-2 {\n    gap: calc(0.25rem * 2);\n  }\n  .gap-3 {\n    gap: calc(0.25rem * 3);\n  }\n  .gap-4 {\n    gap: calc(0.25rem * 4);\n  }\n  .gap-8 {\n    gap: calc(0.25rem * 8);\n  }\n  :where(.space-y-1 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse)));\n  }\n  .gap-x-1\\.5 {\n    column-gap: calc(0.25rem * 1.5);\n  }\n  .gap-x-2 {\n    column-gap: calc(0.25rem * 2);\n  }\n  .gap-x-4 {\n    column-gap: calc(0.25rem * 4);\n  }\n  :where(.space-x-1\\.5 > :not(:last-child)) {\n    --tw-space-x-reverse: 0;\n    margin-inline-start: calc(calc(0.25rem * 1.5) * var(--tw-space-x-reverse));\n    margin-inline-end: calc(calc(0.25rem * 1.5) * calc(1 - var(--tw-space-x-reverse)));\n  }\n  .gap-y-0\\.5 {\n    row-gap: calc(0.25rem * 0.5);\n  }\n  :where(.divide-y > :not(:last-child)) {\n    --tw-divide-y-reverse: 0;\n    border-bottom-style: var(--tw-border-style);\n    border-top-style: var(--tw-border-style);\n    border-top-width: calc(1px * var(--tw-divide-y-reverse));\n    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  }\n  :where(.divide-neutral > :not(:last-child)) {\n    border-color: var(--atomic-neutral);\n  }\n  .self-center {\n    align-self: center;\n  }\n  .self-start {\n    align-self: flex-start;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-auto {\n    overflow-x: auto;\n  }\n  .overflow-x-clip {\n    overflow-x: clip;\n  }\n  .overflow-x-scroll {\n    overflow-x: scroll;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .overflow-y-visible {\n    overflow-y: visible;\n  }\n  .scroll-smooth {\n    scroll-behavior: smooth;\n  }\n  .rounded {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-3xl {\n    border-radius: 1.5rem;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--atomic-border-radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--atomic-border-radius-md);\n  }\n  .rounded-none {\n    border-radius: 0;\n  }\n  .rounded-sm {\n    border-radius: var(--atomic-border-radius);\n  }\n  .rounded-xl {\n    border-radius: var(--atomic-border-radius-xl);\n  }\n  .rounded-tl-none {\n    border-top-left-radius: 0;\n  }\n  .rounded-r-none {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-gray-200 {\n    border-color: oklch(0.928 0.006 264.531);\n  }\n  .border-neutral {\n    border-color: var(--atomic-neutral);\n  }\n  .border-neutral-dark {\n    border-color: var(--atomic-neutral-dark);\n  }\n  .border-neutral-dim {\n    border-color: var(--atomic-neutral-dim);\n  }\n  .border-primary {\n    border-color: var(--atomic-primary);\n  }\n  .border-primary-light {\n    border-color: var(--atomic-primary-light);\n  }\n  .border-t-neutral {\n    border-top-color: var(--atomic-neutral);\n  }\n  .border-b-neutral {\n    border-bottom-color: var(--atomic-neutral);\n  }\n  .border-b-neutral-dim {\n    border-bottom-color: var(--atomic-neutral-dim);\n  }\n  .border-l-neutral {\n    border-left-color: var(--atomic-neutral);\n  }\n  .border-l-neutral-dim {\n    border-left-color: var(--atomic-neutral-dim);\n  }\n  .bg-\\[\\#F1F2FF\\] {\n    background-color: #F1F2FF;\n  }\n  .bg-\\[rgba\\(40\\,40\\,40\\,0\\.8\\)\\] {\n    background-color: rgba(40,40,40,0.8);\n  }\n  .bg-background {\n    background-color: var(--atomic-background);\n  }\n  .bg-error {\n    background-color: var(--atomic-error);\n  }\n  .bg-gray-50 {\n    background-color: oklch(0.985 0.002 247.839);\n  }\n  .bg-neutral {\n    background-color: var(--atomic-neutral);\n  }\n  .bg-neutral-dark {\n    background-color: var(--atomic-neutral-dark);\n  }\n  .bg-neutral-light {\n    background-color: var(--atomic-neutral-light);\n  }\n  .bg-primary {\n    background-color: var(--atomic-primary);\n  }\n  .bg-primary-background {\n    background-color: var(--atomic-primary-background);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-white {\n    background-color: #fff;\n  }\n  .bg-linear-to-l {\n    --tw-gradient-position: to left;\n  }\n  @supports (background-image: linear-gradient(in lab, red, red)) {\n    .bg-linear-to-l {\n      --tw-gradient-position: to left in oklab;\n    }\n  }\n  .bg-linear-to-l {\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .bg-linear-to-r {\n    --tw-gradient-position: to right;\n  }\n  @supports (background-image: linear-gradient(in lab, red, red)) {\n    .bg-linear-to-r {\n      --tw-gradient-position: to right in oklab;\n    }\n  }\n  .bg-linear-to-r {\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-background\\/60 {\n    --tw-gradient-from: color-mix(in srgb, #ffffff 60%, transparent);\n  }\n  @supports (color: color-mix(in lab, red, red)) {\n    .from-background\\/60 {\n      --tw-gradient-from: color-mix(in oklab, var(--atomic-background) 60%, transparent);\n    }\n  }\n  .from-background\\/60 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .from-more-results-progress-bar-color-from {\n    --tw-gradient-from: var(\n    --atomic-more-results-progress-bar-color-from,\n    var(--atomic-primary-dark)\n  );\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .to-more-results-progress-bar-color-to {\n    --tw-gradient-to: var(\n    --atomic-more-results-progress-bar-color-to,\n    var(--atomic-primary-light)\n  );\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .stroke-\\[1\\.25\\] {\n    stroke-width: 1.25;\n  }\n  .object-contain {\n    object-fit: contain;\n  }\n  .p-0 {\n    padding: calc(0.25rem * 0);\n  }\n  .p-1 {\n    padding: calc(0.25rem * 1);\n  }\n  .p-2 {\n    padding: calc(0.25rem * 2);\n  }\n  .p-2\\.5 {\n    padding: calc(0.25rem * 2.5);\n  }\n  .p-3 {\n    padding: calc(0.25rem * 3);\n  }\n  .p-3\\.5 {\n    padding: calc(0.25rem * 3.5);\n  }\n  .p-4 {\n    padding: calc(0.25rem * 4);\n  }\n  .p-6 {\n    padding: calc(0.25rem * 6);\n  }\n  .p-7 {\n    padding: calc(0.25rem * 7);\n  }\n  .p-8 {\n    padding: calc(0.25rem * 8);\n  }\n  .px-1 {\n    padding-inline: calc(0.25rem * 1);\n  }\n  .px-2 {\n    padding-inline: calc(0.25rem * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(0.25rem * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(0.25rem * 3);\n  }\n  .px-4 {\n    padding-inline: calc(0.25rem * 4);\n  }\n  .px-6 {\n    padding-inline: calc(0.25rem * 6);\n  }\n  .px-9 {\n    padding-inline: calc(0.25rem * 9);\n  }\n  .py-0\\.5 {\n    padding-block: calc(0.25rem * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(0.25rem * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(0.25rem * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(0.25rem * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(0.25rem * 2.5);\n  }\n  .py-3 {\n    padding-block: calc(0.25rem * 3);\n  }\n  .py-3\\.5 {\n    padding-block: calc(0.25rem * 3.5);\n  }\n  .py-4 {\n    padding-block: calc(0.25rem * 4);\n  }\n  .py-4\\.5 {\n    padding-block: calc(0.25rem * 4.5);\n  }\n  .py-5 {\n    padding-block: calc(0.25rem * 5);\n  }\n  .py-6 {\n    padding-block: calc(0.25rem * 6);\n  }\n  .pt-0\\.5 {\n    padding-top: calc(0.25rem * 0.5);\n  }\n  .pt-8 {\n    padding-top: calc(0.25rem * 8);\n  }\n  .pr-2 {\n    padding-right: calc(0.25rem * 2);\n  }\n  .pr-6 {\n    padding-right: calc(0.25rem * 6);\n  }\n  .pr-24 {\n    padding-right: calc(0.25rem * 24);\n  }\n  .pb-1 {\n    padding-bottom: calc(0.25rem * 1);\n  }\n  .pb-3 {\n    padding-bottom: calc(0.25rem * 3);\n  }\n  .pb-4 {\n    padding-bottom: calc(0.25rem * 4);\n  }\n  .pb-5 {\n    padding-bottom: calc(0.25rem * 5);\n  }\n  .pb-6 {\n    padding-bottom: calc(0.25rem * 6);\n  }\n  .pl-0 {\n    padding-left: calc(0.25rem * 0);\n  }\n  .pl-1 {\n    padding-left: calc(0.25rem * 1);\n  }\n  .pl-3 {\n    padding-left: calc(0.25rem * 3);\n  }\n  .pl-7 {\n    padding-left: calc(0.25rem * 7);\n  }\n  .pl-9 {\n    padding-left: calc(0.25rem * 9);\n  }\n  .pl-10 {\n    padding-left: calc(0.25rem * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .align-baseline {\n    vertical-align: baseline;\n  }\n  .align-bottom {\n    vertical-align: bottom;\n  }\n  .align-middle {\n    vertical-align: middle;\n  }\n  .font-sans {\n    font-family: var(--atomic-font-family);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .set-font-size-sm {\n    --font-size: var(--atomic-text-sm);\n    font-size: var(--font-size);\n    --line-height: calc(var(--font-size) * var(--atomic-line-height-ratio));\n    line-height: var(--line-height);\n  }\n  .text-2xl {\n    font-size: var(--atomic-text-2xl);\n    line-height: var(--tw-leading, calc(2 / 1.5));\n  }\n  .text-base {\n    font-size: var(--atomic-text-base);\n    line-height: var(--tw-leading, calc(1.5 / 1));\n  }\n  .text-lg {\n    font-size: var(--atomic-text-lg);\n    line-height: var(--tw-leading, calc(1.75 / 1.125));\n  }\n  .text-sm {\n    font-size: var(--atomic-text-sm);\n    line-height: var(--tw-leading, calc(1.25 / 0.875));\n  }\n  .text-xl {\n    font-size: var(--atomic-text-xl);\n    line-height: var(--tw-leading, calc(1.75 / 1.25));\n  }\n  .text-xs {\n    font-size: 0.75rem;\n    line-height: var(--tw-leading, calc(1 / 0.75));\n  }\n  .text-xs\\/\\[1rem\\] {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .leading-4 {\n    --tw-leading: calc(0.25rem * 4);\n    line-height: calc(0.25rem * 4);\n  }\n  .leading-5 {\n    --tw-leading: calc(0.25rem * 5);\n    line-height: calc(0.25rem * 5);\n  }\n  .leading-6 {\n    --tw-leading: calc(0.25rem * 6);\n    line-height: calc(0.25rem * 6);\n  }\n  .leading-8 {\n    --tw-leading: calc(0.25rem * 8);\n    line-height: calc(0.25rem * 8);\n  }\n  .leading-10 {\n    --tw-leading: calc(0.25rem * 10);\n    line-height: calc(0.25rem * 10);\n  }\n  .leading-\\[1\\.5\\] {\n    --tw-leading: 1.5;\n    line-height: 1.5;\n  }\n  .leading-\\[calc\\(1\\/\\.75\\)\\] {\n    --tw-leading: calc(1 / .75);\n    line-height: calc(1 / .75);\n  }\n  .leading-\\[var\\(--line-height\\)\\] {\n    --tw-leading: var(--line-height);\n    line-height: var(--line-height);\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--atomic-font-bold);\n    font-weight: var(--atomic-font-bold);\n  }\n  .font-light {\n    --tw-font-weight: 300;\n    font-weight: 300;\n  }\n  .font-medium {\n    --tw-font-weight: 500;\n    font-weight: 500;\n  }\n  .font-normal {\n    --tw-font-weight: var(--atomic-font-normal);\n    font-weight: var(--atomic-font-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: 600;\n    font-weight: 600;\n  }\n  .break-words {\n    overflow-wrap: break-word;\n  }\n  .break-all {\n    word-break: break-all;\n  }\n  .break-keep {\n    word-break: keep-all;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-normal {\n    white-space: normal;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-\\[\\#54698D\\] {\n    color: #54698D;\n  }\n  .text-\\[inherit\\] {\n    color: inherit;\n  }\n  .text-black {\n    color: #000;\n  }\n  .text-error {\n    color: var(--atomic-error);\n  }\n  .text-gray-500 {\n    color: oklch(0.551 0.027 264.364);\n  }\n  .text-gray-600 {\n    color: oklch(0.446 0.03 256.802);\n  }\n  .text-gray-700 {\n    color: oklch(0.373 0.034 259.733);\n  }\n  .text-gray-900 {\n    color: oklch(0.21 0.034 264.665);\n  }\n  .text-green-600 {\n    color: oklch(0.627 0.194 149.214);\n  }\n  .text-inline-code {\n    color: var(--atomic-inline-code);\n  }\n  .text-neutral {\n    color: var(--atomic-neutral);\n  }\n  .text-neutral-dark {\n    color: var(--atomic-neutral-dark);\n  }\n  .text-on-background {\n    color: var(--atomic-on-background);\n  }\n  .text-on-primary {\n    color: var(--atomic-on-primary);\n  }\n  .text-primary {\n    color: var(--atomic-primary);\n  }\n  .text-primary-light {\n    color: var(--atomic-primary-light);\n  }\n  .text-rating-icon-active {\n    color: var(--atomic-rating-icon-active-color, #f6ce3c);\n  }\n  .text-rating-icon-inactive {\n    color: var(\n    --atomic-rating-icon-inactive-color,\n    var(--atomic-neutral)\n  );\n  }\n  .text-success {\n    color: var(--atomic-success);\n  }\n  .text-transparent {\n    color: transparent;\n  }\n  .capitalize {\n    text-transform: capitalize;\n  }\n  .lowercase {\n    text-transform: lowercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .placeholder-neutral-dark::placeholder {\n    color: var(--atomic-neutral-dark);\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-80 {\n    opacity: 80%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-inner-primary {\n    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--atomic-primary));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0px 2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-t-lg {\n    --tw-shadow: 0px -2px 8px var(--tw-shadow-color, rgba(229, 232, 232, 0.75));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-1 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-3 {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-primary {\n    --tw-ring-color: var(--atomic-primary);\n  }\n  .ring-primary-light {\n    --tw-ring-color: var(--atomic-primary-light);\n  }\n  .ring-ring-primary {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .outline-error {\n    outline-color: var(--atomic-error);\n  }\n  .outline-neutral {\n    outline-color: var(--atomic-neutral);\n  }\n  .outline-primary {\n    outline-color: var(--atomic-primary);\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .grayscale {\n    --tw-grayscale: grayscale(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .invert {\n    --tw-invert: invert(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .filter {\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-\\[visibility\\] {\n    transition-property: visibility;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));\n    transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .ease-in-out {\n    --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .\\[grid-area\\:modal\\] {\n    grid-area: modal;\n  }\n  .\\[scrollbar-gutter\\:stable_both-edges\\] {\n    scrollbar-gutter: stable both-edges;\n  }\n  @media (hover: hover) {\n    .group-hover\\:visible:is(:where(.group):hover *) {\n      visibility: visible;\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-error:is(:where(.group):hover *) {\n      color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-primary:is(:where(.group):hover *) {\n      color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .group-hover\\:text-primary-light:is(:where(.group):hover *) {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .group-focus\\:text-primary:is(:where(.group):focus *) {\n    color: var(--atomic-primary);\n  }\n  .group-focus\\:text-primary-light:is(:where(.group):focus *) {\n    color: var(--atomic-primary-light);\n  }\n  .group-focus-visible\\:text-error:is(:where(.group):focus-visible *) {\n    color: var(--atomic-error);\n  }\n  .group-focus-visible\\:text-primary:is(:where(.group):focus-visible *) {\n    color: var(--atomic-primary);\n  }\n  .peer-focus-within\\:border-primary-light:is(:where(.peer):focus-within ~ *) {\n    border-color: var(--atomic-primary-light);\n  }\n  .peer-focus-within\\:text-primary-light:is(:where(.peer):focus-within ~ *) {\n    color: var(--atomic-primary-light);\n  }\n  @media (hover: hover) {\n    .peer-hover\\:border-primary-light:is(:where(.peer):hover ~ *) {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .peer-hover\\:text-error:is(:where(.peer):hover ~ *) {\n      color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .peer-hover\\:text-primary-light:is(:where(.peer):hover ~ *) {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .before\\:inline::before {\n    content: var(--tw-content);\n    display: inline;\n  }\n  .before\\:content-\\[\\\'\\,\\\\00a0\\\'\\]::before {\n    --tw-content: \',\\00a0\';\n    content: var(--tw-content);\n  }\n  .after\\:absolute::after {\n    content: var(--tw-content);\n    position: absolute;\n  }\n  .after\\:-bottom-0\\.5::after {\n    content: var(--tw-content);\n    bottom: calc(0.25rem * -0.5);\n  }\n  .after\\:block::after {\n    content: var(--tw-content);\n    display: block;\n  }\n  .after\\:h-1::after {\n    content: var(--tw-content);\n    height: calc(0.25rem * 1);\n  }\n  .after\\:w-full::after {\n    content: var(--tw-content);\n    width: 100%;\n  }\n  .after\\:rounded::after {\n    content: var(--tw-content);\n    border-radius: var(--atomic-border-radius);\n  }\n  .after\\:bg-primary::after {\n    content: var(--tw-content);\n    background-color: var(--atomic-primary);\n  }\n  .focus-within\\:border-disabled:focus-within {\n    border-color: var(--atomic-disabled);\n  }\n  .focus-within\\:border-primary:focus-within {\n    border-color: var(--atomic-primary);\n  }\n  .focus-within\\:ring-3:focus-within {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .focus-within\\:ring-neutral:focus-within {\n    --tw-ring-color: var(--atomic-neutral);\n  }\n  .focus-within\\:ring-ring-primary:focus-within {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  @media (hover: hover) {\n    .hover\\:border:hover {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:border-error:hover {\n      border-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:border-primary-light:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-error:hover {\n      background-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-neutral-light:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-primary-light:hover {\n      background-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:bg-transparent:hover {\n      background-color: transparent;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:fill-white:hover {\n      fill: #fff;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:text-primary-light:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:underline:hover {\n      text-decoration-line: underline;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:opacity-100:hover {\n      opacity: 100%;\n    }\n  }\n  @media (hover: hover) {\n    .hover\\:shadow-sm:hover {\n      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:opacity-100:focus {\n    opacity: 100%;\n  }\n  .focus\\:outline-hidden:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  @media (forced-colors: active) {\n    .focus\\:outline-hidden:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .focus-visible\\:border:focus-visible {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .focus-visible\\:border-error:focus-visible {\n    border-color: var(--atomic-error);\n  }\n  .focus-visible\\:border-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .focus-visible\\:border-primary-light:focus-visible {\n    border-color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:bg-error:focus-visible {\n    background-color: var(--atomic-error);\n  }\n  .focus-visible\\:bg-neutral-light:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .focus-visible\\:bg-primary-light:focus-visible {\n    background-color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:text-primary-light:focus-visible {\n    color: var(--atomic-primary-light);\n  }\n  .focus-visible\\:underline:focus-visible {\n    text-decoration-line: underline;\n  }\n  .focus-visible\\:ring-2:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .focus-visible\\:outline-none:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  @media (width >= 40rem) {\n    .sm\\:px-6 {\n      padding-inline: calc(0.25rem * 6);\n    }\n  }\n  .\\[part\\=\\"breadcrumb-button\\"\\]\\:visible:is(part="breadcrumb-button") {\n    visibility: visible;\n  }\n}\n@layer theme, base, components, utilities;\n@layer components {\n  .input-primary {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n  }\n  @media (hover: hover) {\n    .input-primary:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  .input-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .input-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .input-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .input-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-radio {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n  }\n  .btn-radio::before {\n    --tw-content: attr(value);\n    content: var(--tw-content);\n  }\n  .btn-primary {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-primary);\n    color: var(--atomic-on-primary);\n  }\n  @media (hover: hover) {\n    .btn-primary:hover {\n      background-color: var(--atomic-primary-light);\n    }\n  }\n  .btn-primary:focus-visible {\n    background-color: var(--atomic-primary-light);\n  }\n  .btn-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-primary:disabled {\n    cursor: not-allowed;\n  }\n  .btn-primary:disabled {\n    background-color: var(--atomic-disabled);\n  }\n  .btn-outline-primary {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-primary);\n  }\n  @media (hover: hover) {\n    .btn-outline-primary:hover {\n      border-color: var(--atomic-primary-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-primary:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .btn-outline-primary:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-primary:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-primary:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-primary:disabled {\n    color: var(--atomic-neutral);\n  }\n  .btn-text-primary {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-background);\n    color: var(--atomic-primary);\n  }\n  @media (hover: hover) {\n    .btn-text-primary:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  .btn-text-primary:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-text-primary:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-neutral {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-neutral:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-neutral:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-neutral:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-neutral:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-neutral:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-neutral:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-bg-neutral {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-bg-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-bg-neutral:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-bg-neutral:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-bg-neutral:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-bg-neutral:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-bg-error {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      border-color: var(--atomic-primary);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-bg-error:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-outline-bg-error:focus-visible {\n    border-color: var(--atomic-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-outline-bg-error:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-bg-error:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-bg-error:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-bg-error:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-bg-error:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-bg-error:disabled {\n    opacity: 50%;\n  }\n  .btn-outline-error {\n    border-radius: var(--atomic-border-radius);\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-outline-error:hover {\n      border-color: var(--atomic-error);\n    }\n  }\n  @media (hover: hover) {\n    .btn-outline-error:hover {\n      color: var(--atomic-error);\n    }\n  }\n  .btn-outline-error:focus-visible {\n    border-color: var(--atomic-error);\n  }\n  .btn-outline-error:focus-visible {\n    color: var(--atomic-error);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-ring-color: var(--atomic-ring-primary);\n  }\n  .btn-outline-error:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-outline-error:disabled {\n    cursor: not-allowed;\n  }\n  .btn-outline-error:disabled {\n    border-color: var(--atomic-neutral);\n  }\n  .btn-outline-error:disabled {\n    color: var(--atomic-on-background);\n  }\n  .btn-outline-error:disabled {\n    opacity: 50%;\n  }\n  .btn-text-neutral {\n    border-radius: var(--atomic-border-radius);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-text-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  @media (hover: hover) {\n    .btn-text-neutral:hover {\n      color: var(--atomic-primary);\n    }\n  }\n  .btn-text-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-text-neutral:focus-visible {\n    color: var(--atomic-primary);\n  }\n  .btn-text-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-text-transparent {\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-text-transparent:hover {\n      color: var(--atomic-primary-light);\n    }\n  }\n  .btn-text-transparent:focus-visible {\n    color: var(--atomic-primary-light);\n  }\n  .btn-square-neutral {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n    border-color: var(--atomic-neutral);\n    background-color: var(--atomic-background);\n    color: var(--atomic-on-background);\n  }\n  @media (hover: hover) {\n    .btn-square-neutral:hover {\n      background-color: var(--atomic-neutral-light);\n    }\n  }\n  .btn-square-neutral:focus-visible {\n    background-color: var(--atomic-neutral-light);\n  }\n  .btn-square-neutral:focus-visible {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .btn-page {\n    display: grid;\n    height: calc(0.25rem * 10);\n    width: calc(0.25rem * 10);\n    place-items: center;\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n    font-size: var(--atomic-text-lg);\n    line-height: var(--tw-leading, calc(1.75 / 1.125));\n  }\n  @media (hover: hover) {\n    .btn-page:hover {\n      border-style: var(--tw-border-style);\n      border-width: 1px;\n    }\n  }\n  .btn-page:focus-visible {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .btn-page.selected {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n    border-color: var(--atomic-primary);\n    --tw-font-weight: var(--atomic-font-bold);\n    font-weight: var(--atomic-font-bold);\n  }\n}\n@layer base {\n  :host {\n    display: block;\n  }\n  :host, button, input, select {\n    font-family: var(--atomic-font-family);\n    font-size: var(--atomic-text-base);\n    line-height: var(--tw-leading, calc(1.5 / 1));\n    --tw-font-weight: var(--atomic-font-normal);\n    font-weight: var(--atomic-font-normal);\n  }\n  button {\n    cursor: pointer;\n  }\n  :host(.atomic-hidden) {\n    display: none;\n  }\n  .ripple {\n    position: absolute;\n    pointer-events: none;\n    transform: scale(0);\n    border-radius: 50%;\n    animation: ripple var(--animation-duration) linear;\n  }\n  .ripple-relative {\n    position: relative;\n  }\n  .ripple-parent {\n    overflow: hidden;\n  }\n  @keyframes ripple {\n    to {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-leading {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: "*";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: "*";\n  initial-value: "";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: "";\n    }\n  }\n}\n';const a=i;const o=class{constructor(r){n(this,r);this.clickCallback=()=>{};this.tooltip="";this.clickCallback=()=>{};this.tooltip=""}render(){return r(t,{key:"c00f67b7536b8bff92e626d8bc8dad79ac3ab0d9",partPrefix:"insight-edit-toggle",style:"outline-neutral",icon:e,ariaLabel:"Edit",onClick:this.clickCallback,title:this.tooltip})}};o.style=a;export{o as atomic_insight_edit_toggle};
+//# sourceMappingURL=p-049357e3.entry.js.map

package/dist/atomic/{p-a130b00b.entry.js.map → p-049357e3.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["atomicInsightEditToggleCss","AtomicInsightEditToggleStyle0","AtomicInsightEditToggle","this","clickCallback","tooltip","render","h","IconButton","key","partPrefix","style","icon","EditIcon","ariaLabel","onClick","title"],"sources":["src/components/insight/atomic-insight-edit-toggle/atomic-insight-edit-toggle.pcss?tag=atomic-insight-edit-toggle&encapsulation=shadow","src/components/insight/atomic-insight-edit-toggle/atomic-insight-edit-toggle.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n","import {Component, h, Prop} from '@stencil/core';\nimport EditIcon from '../../../images/edit.svg';\nimport {IconButton} from '../../common/stencil-iconButton';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'atomic-insight-edit-toggle',\n  styleUrl: 'atomic-insight-edit-toggle.pcss',\n  shadow: true,\n})\nexport class AtomicInsightEditToggle {\n  @Prop({mutable: true}) public clickCallback: () => void = () => {};\n\n  @Prop({mutable: true}) public tooltip = '';\n\n  public render() {\n    return (\n      <IconButton\n        partPrefix=\"insight-edit-toggle\"\n        style=\"outline-neutral\"\n        icon={EditIcon}\n        ariaLabel=\"Edit\"\n        onClick={this.clickCallback}\n        title={this.tooltip}\n      />\n    );\n  }\n}\n"],"mappings":"83EAAA,MAAMA,EAA6B,+8iEACnC,MAAAC,EAAeD,E,MCWFE,EAAuB,M,yBACJC,KAAAC,cAA4B,OAE5BD,KAAAE,QAAU,G,mBAFkB,O,aAElB,E,CAEjC,MAAAC,GACL,OACEC,EAACC,EAAU,CAAAC,IAAA,2CACTC,WAAW,sBACXC,MAAM,kBACNC,KAAMC,EACNC,UAAU,OACVC,QAASZ,KAAKC,cACdY,MAAOb,KAAKE,S","ignoreList":[]}
+{"version":3,"names":["atomicInsightEditToggleCss","AtomicInsightEditToggleStyle0","AtomicInsightEditToggle","this","clickCallback","tooltip","render","h","IconButton","key","partPrefix","style","icon","EditIcon","ariaLabel","onClick","title"],"sources":["src/components/insight/atomic-insight-edit-toggle/atomic-insight-edit-toggle.pcss?tag=atomic-insight-edit-toggle&encapsulation=shadow","src/components/insight/atomic-insight-edit-toggle/atomic-insight-edit-toggle.tsx"],"sourcesContent":["@import '../../../global/global.pcss';\n","import {Component, h, Prop} from '@stencil/core';\nimport EditIcon from '../../../images/edit.svg';\nimport {IconButton} from '../../common/stencil-iconButton';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'atomic-insight-edit-toggle',\n  styleUrl: 'atomic-insight-edit-toggle.pcss',\n  shadow: true,\n})\nexport class AtomicInsightEditToggle {\n  @Prop({mutable: true}) public clickCallback: () => void = () => {};\n\n  @Prop({mutable: true}) public tooltip = '';\n\n  public render() {\n    return (\n      <IconButton\n        partPrefix=\"insight-edit-toggle\"\n        style=\"outline-neutral\"\n        icon={EditIcon}\n        ariaLabel=\"Edit\"\n        onClick={this.clickCallback}\n        title={this.tooltip}\n      />\n    );\n  }\n}\n"],"mappings":"s2EAAA,MAAMA,EAA6B,+8iEACnC,MAAAC,EAAeD,E,MCWFE,EAAuB,M,yBACJC,KAAAC,cAA4B,OAE5BD,KAAAE,QAAU,G,mBAFkB,O,aAElB,E,CAEjC,MAAAC,GACL,OACEC,EAACC,EAAU,CAAAC,IAAA,2CACTC,WAAW,sBACXC,MAAM,kBACNC,KAAMC,EACNC,UAAU,OACVC,QAASZ,KAAKC,cACdY,MAAOb,KAAKE,S","ignoreList":[]}