globuswebcomponents 2.5.3 → 2.5.5

package/dist/globuscomponents/p-32d7bafb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbFeaturedIconCss","GbFeaturedIcon","constructor","hostRef","this","destructive","icon","leadingIconSvg","loadIcon","iconName","iconPath","getAssetPath","response","fetch","svg","text","componentWillLoad","render","h","key","class","size","innerHTML","gbStepBaseCss","GbStepBase","connector","showContent","showSupportingText","label","supportingText","featuredIconLeftLabelClasses","featuredIconLeftTextClasses","internalState","state","internalStatus","status","onStatusChange","newValue","_oldValue","onStateChange","Fragment","type","xmlns","width","height","viewBox","fill","d","stroke","breakpoint","gbStepIconBaseCss","GbStepIconBase"],"sources":["src/components/gb-featured-icon/gb-featured-icon.css?tag=gb-featured-icon&encapsulation=shadow","src/components/gb-featured-icon/gb-featured-icon.tsx","src/components/gb-step-base/gb-step-base.css?tag=gb-step-base&encapsulation=shadow","src/components/gb-step-base/gb-step-base.tsx","src/components/gb-step-icon-base/gb-step-icon-base.css?tag=gb-step-icon-base&encapsulation=shadow","src/components/gb-step-icon-base/gb-step-icon-base.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n:host{\r\n    width: fit-content;\r\n}\r\n\r\n.featured_icon_div {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-background-card, #ffffff);\r\n  box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.featured_icon_div.sm {\r\n  width: 2rem;\r\n  height: 2rem;\r\n  padding: var(--spacing-2);\r\n  border-radius: 0.375rem;\r\n}\r\n\r\n.featured_icon_div.md {\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n  padding: 0.625rem;\r\n  border-radius: var(--rounded-sm);\r\n}\r\n\r\n.featured_icon_div.lg {\r\n  width: 3rem;\r\n  height: 3rem;\r\n  padding: 0.75rem;\r\n  border-radius: 0.625rem;\r\n}\r\n\r\n.featured_icon_div.xl {\r\n  width: 3.5rem;\r\n  height: 3.5rem;\r\n  padding: 0.875rem;\r\n  border-radius: var(--rounded-md);\r\n}\r\n\r\n.icon{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.icon.sm svg {\r\n  width: 1rem;\r\n  height: 1rem;\r\n}\r\n\r\n.icon.md svg {\r\n  width: 1.25rem;\r\n  height: 1.25rem;\r\n}\r\n\r\n.icon.lg svg {\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n}\r\n\r\n.icon.xl svg {\r\n  width: 1.75rem;\r\n  height: 1.75rem;\r\n}\r\n\r\n.icon path[stroke] {\r\n    stroke: var(--color-icon-subtle, #697586);\r\n}\r\n\r\n.icon.destructive path[stroke] {\r\n    stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.icon path[fill] {\r\n    fill: var(--color-icon-subtle, #697586);\r\n}\r\n\r\n.icon.destructive path[fill] {\r\n    fill: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.featured_icon_div.destructive{\r\n  border: 1px solid var(--color-border-danger, #B51726);\r\n  background: var(--color-background-danger-subtlest, #FEF1F2);\r\n}","import { Component, Prop, State, getAssetPath, h } from \"@stencil/core\";\r\nimport { GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-featured-icon',\r\n  styleUrl: 'gb-featured-icon.css',\r\n  shadow: true,\r\n})\r\nexport class GbFeaturedIcon {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() icon: string = '';\r\n  @State() leadingIconSvg: string = '';\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`featured_icon_div ${this.size} ${this.destructive ? 'destructive' : ''}`}>\r\n        <div class={`icon ${this.size} ${this.destructive ? 'destructive' : ''}`} innerHTML={this.leadingIconSvg}></div>\r\n      </div>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n/* :host{\r\n    display: inline-block;\r\n} */\r\n\r\n/* Text Line Styles */\r\n.text_line_div {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n}\r\n\r\n.text_line_div.sm {\r\n  padding-top: var(--spacing-3);\r\n}\r\n\r\n.text_line_div.md {\r\n  padding-top: var(--spacing-4);\r\n}\r\n\r\n.text_line_div.lg {\r\n  padding-top: var(--spacing-5);\r\n}\r\n\r\n.bar {\r\n  height: 0.25rem;\r\n}\r\n\r\n.bar.incomplete.default {\r\n  background-color: var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.bar.current.default,\r\n.bar.complete.default {\r\n  background-color: var(--color-border-selected, #075db2);\r\n}\r\n\r\n.bar.incomplete.destructive,\r\n.bar.current.destructive,\r\n.bar.complete.destructive {\r\n  background-color: var(--color-border-danger, #b51726);\r\n}\r\n\r\n.text_line_div_content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.text_line_text.desktop{\r\n  white-space: nowrap;\r\n}\r\n\r\n.text_line_label.default.incomplete,\r\n.text_line_label.default.complete {\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.text_line_label.default.current,\r\n.text_line_text.default.current {\r\n  color: var(--color-text-selected, #075db2);\r\n}\r\n\r\n.text_line_text.default.incomplete,\r\n.text_line_text.default.complete {\r\n  color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.text_line_label.incomplete.destructive,\r\n.text_line_label.current.destructive,\r\n.text_line_label.complete.destructive {\r\n  color: var(--color-text-danger, #b51726);\r\n}\r\n\r\n.text_line_text.incomplete.destructive,\r\n.text_line_text.current.destructive,\r\n.text_line_text.complete.destructive {\r\n  color: var(--color-text-danger-subtle, #cc1a2a);\r\n}\r\n\r\n/* Icon Only Styles */\r\n.icon_only_div {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  border-radius: var(--rounded-full);\r\n}\r\n\r\n.icon_only_div.sm {\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n}\r\n\r\n.icon_only_div.md {\r\n  width: 2rem;\r\n  height: 2rem;\r\n}\r\n\r\n.icon_only_div.lg {\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n}\r\n\r\n.icon_only_div.default.incomplete {\r\n  background: var(--color-background-card, #ffffff);\r\n  border: 2px solid #cdd5df;\r\n}\r\n\r\n.icon_only_div.default.current,\r\n.icon_only_div.default.complete {\r\n  background: var(--color-background-information-subtlest, #e4f0fc);\r\n  border: 2.5px solid var(--color-icon-selected, #075db2);\r\n}\r\n\r\n.icon_only_div.incomplete.destructive,\r\n.icon_only_div.current.destructive,\r\n.icon_only_div.complete.destructive {\r\n  background: var(--color-background-danger-subtlest, #fef1f2);\r\n  border: 2.5px solid var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.dot {\r\n  border-radius: var(--rounded-full);\r\n}\r\n\r\n.dot.sm {\r\n  width: 0.6rem;\r\n  height: 0.6rem;\r\n}\r\n\r\n.dot.md {\r\n  width: 0.8rem;\r\n  height: 0.8rem;\r\n}\r\n\r\n.dot.lg {\r\n  width: 0.9rem;\r\n  height: 0.9rem;\r\n}\r\n\r\n.dot.default.incomplete {\r\n  background: #cdd5df;\r\n}\r\n\r\n.dot.default.current {\r\n  background: var(--color-icon-selected, #075db2);\r\n}\r\n\r\n.dot.incomplete.destructive,\r\n.dot.current.destructive {\r\n  background: var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.tick.sm {\r\n  width: 0.8rem;\r\n  height: 0.8rem;\r\n}\r\n\r\n.tick.md {\r\n  width: 1rem;\r\n  height: 1rem;\r\n}\r\n\r\n.tick.lg {\r\n  width: 1.2rem;\r\n  height: 1.2rem;\r\n}\r\n\r\n.tick.destructive path {\r\n  stroke: var(--color-icon-danger, #b51726);\r\n}\r\n\r\n/* Icon Left Styles */\r\n.icon_left_div {\r\n  display: flex;\r\n  align-items: flex-start;\r\n}\r\n\r\n.icon_left_div.sm {\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.icon_left_div.md,\r\n.icon_left_div.lg {\r\n  gap: var(--spacing-4);\r\n}\r\n\r\n.icon_left_text {\r\n  display: flex;\r\n  padding: var(--spacing-2) var(--spacing-none) var(--spacing-7) var(--spacing-none);\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-3);\r\n  flex: 1 0 0;\r\n}\r\n\r\n.connector_wrap {\r\n  display: flex;\r\n  padding-bottom: 0.25rem;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  align-self: stretch;\r\n}\r\n\r\n.connector_div {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-grow: 1;\r\n}\r\n\r\n.icon_left_connector {\r\n  width: var(--spacing-half); /* Adjust the width as needed */\r\n  height: 100%; /* Adjust the height as needed */\r\n  border-radius: 5px; /* Half of the width to make it fully rounded */\r\n}\r\n\r\n.icon_left_connector.default.incomplete,\r\n.icon_left_connector.default.current {\r\n  background-color: var(--color-border-subtler, #e3e8ef); /* Change the color as needed */\r\n}\r\n\r\n.icon_left_connector.default.complete {\r\n  background-color: var(--color-border-success, #079455);\r\n}\r\n\r\n.icon_left_connector.incomplete.destructive,\r\n.icon_left_connector.current.destructive,\r\n.icon_left_connector.complete.destructive {\r\n  background-color: var(--color-border-danger, #b51726);\r\n}\r\n\r\n/* Icon Top Styles */\r\n.step_icon {\r\n  display: flex;\r\n  gap: 0;\r\n}\r\n\r\n.icon_top_div,\r\n.icon_top_content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n.icon_top_div.sm,\r\n.icon_top_content {\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.icon_top_div.md,\r\n.icon_top_div.lg {\r\n  gap: var(--spacing-4);\r\n}\r\n\r\n.icon_top_connector {\r\n  width: 21rem;\r\n  height: 0.13rem;\r\n  border-radius: 5px; /* Half of the width to make it fully rounded */\r\n}\r\n\r\n.icon_top_connector.default.incomplete,\r\n.icon_top_connector.default.current {\r\n  background-color: var(--color-border-subtler, #e3e8ef); /* Change the color as needed */\r\n}\r\n\r\n.icon_top_connector.default.complete {\r\n  background-color: var(--color-border-selected, #075db2);\r\n}\r\n\r\n.icon_top_connector.incomplete.destructive,\r\n.icon_top_connector.current.destructive,\r\n.icon_top_connector.complete.destructive {\r\n  background-color: var(--color-border-danger, #b51726);\r\n}\r\n\r\n/* Featured Icon Left Styles */\r\n.featured_icon_left_div {\r\n  width: fit-content;\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.featured_icon_left_connector {\r\n  width: 0.125rem; /* Adjust the width as needed */\r\n  min-height: 2rem;\r\n  height: 100%; /* Adjust the height as needed */\r\n  border-radius: 5px; /* Half of the width to make it fully rounded */\r\n  background-color: var(--color-border-subtler, #e3e8ef); /* Change the color as needed */\r\n}\r\n\r\n.featured_icon_left_connector.incomplete.destructive,\r\n.featured_icon_left_connector.current.destructive,\r\n.featured_icon_left_connector.complete.destructive {\r\n  background-color: var(--color-border-danger, #b51726);\r\n}\r\n\r\n.featured_icon_left_content {\r\n  display: flex;\r\n  padding: var(--spacing-2) var(--spacing-none) 1.5rem var(--spacing-none);\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-3);\r\n  flex: 1 0 0;\r\n}\r\n\r\n.featured_icon_left_label.default.incomplete,\r\n.featured_icon_left_label.default.current,\r\n.featured_icon_left_label.default.complete,\r\n.featured_icon_left_text.default.incomplete{\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.featured_icon_left_text.default.current,\r\n.featured_icon_left_text.default.complete{\r\n    color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.featured_icon_left_label.destructive.incomplete,\r\n.featured_icon_left_label.destructive.current,\r\n.featured_icon_left_label.destructive.complete{\r\n    color: var(--color-text-danger, #B51726);\r\n}\r\n\r\n.featured_icon_left_text.destructive.incomplete,\r\n.featured_icon_left_text.destructive.current,\r\n.featured_icon_left_text.destructive.complete{\r\n    color: var(--color-text-danger-subtle, #CC1A2A);\r\n}","import { Component, Prop, h, Fragment, Watch, State } from \"@stencil/core\";\r\nimport { BreakPoints, GeneralSizes, ProgressStepStates, ProgressStepStatus, ProgressStepTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-step-base',\r\n  styleUrl: 'gb-step-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepBase {\r\n  @Prop() status: ProgressStepStatus;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: ProgressStepTypes;\r\n  @Prop() state: ProgressStepStates;\r\n  @Prop() connector: boolean = false;\r\n  @Prop() showContent: boolean = false;\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @State() internalState: ProgressStepStates;\r\n  @State() internalStatus: ProgressStepStatus;\r\n  @Prop() breakpoint: BreakPoints;\r\n\r\n  featuredIconLeftLabelClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  featuredIconLeftTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.internalStatus = this.status;\r\n  }\r\n\r\n  @Watch('status')\r\n  onStatusChange(newValue: ProgressStepStatus, _oldValue: ProgressStepStatus) {\r\n    this.internalStatus = newValue;\r\n  }\r\n\r\n  @Watch('state')\r\n  onStateChange(newValue: ProgressStepStates, _oldValue: ProgressStepStates) {\r\n    this.internalState = newValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.type === 'text_line' && (\r\n          <>\r\n            <div class={`bar ${this.size} ${this.status} ${this.internalState}`}></div>\r\n            {this.showContent && (\r\n              <div class={`text_line_div ${this.size} ${this.status} ${this.internalState}`}>\r\n                <div class={`text_line_div_content`}>\r\n                  <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n                  {this.showSupportingText && <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </>\r\n        )}\r\n        {this.type === 'icon_only' && (\r\n          <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n            {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n            {this.status === 'complete' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n                <path d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\" stroke=\"#075DB2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            )}\r\n          </div>\r\n        )}\r\n        {this.type === 'icon_left' && (\r\n          <div class={`icon_left_div ${this.size}`}>\r\n            <div class=\"connector_wrap\">\r\n              <gb-step-icon-base size={this.size} status={this.internalStatus} state={this.internalState}></gb-step-icon-base>\r\n              {this.connector && (\r\n                <div class=\"connector_div\">\r\n                  <div class={`icon_left_connector ${this.internalState} ${this.status}`}></div>\r\n                </div>\r\n              )}\r\n            </div>\r\n            <div class=\"icon_left_text\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'icon_top' && (\r\n          <div class={`icon_top_div ${this.size}`}>\r\n            <div class=\"step_icon_div\">\r\n              <div class=\"step_icon\">\r\n                <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n                  {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n                  {this.status === 'complete' && (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n                      <path\r\n                        d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n                        stroke=\"#075DB2\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"icon_top_content\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'featured_icon_left' && (\r\n          <div class=\"featured_icon_left_div\">\r\n            <div class=\"connector_wrap\">\r\n              <gb-featured-icon size=\"sm\" icon=\"assets/user.svg\" destructive={this.internalState === 'destructive' ? true : false}></gb-featured-icon>\r\n              {this.connector && (\r\n                <div class=\"connector_div\">\r\n                  <div class={`featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}`}></div>\r\n                </div>\r\n              )}\r\n            </div>\r\n            <div class=\"featured_icon_left_content\">\r\n              <p class={`featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n.icon_base_div {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  border-radius: var(--rounded-full);\r\n}\r\n\r\n.icon_base_div.sm {\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n}\r\n\r\n.icon_base_div.md {\r\n  width: 2rem;\r\n  height: 2rem;\r\n}\r\n\r\n.icon_base_div.lg {\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n}\r\n\r\n.icon_base_div.default.incomplete {\r\n  background: var(--color-background-card, #ffffff);\r\n  border: 2px solid #cdd5df;\r\n}\r\n\r\n.icon_base_div.default.current {\r\n  background: var(--color-background-information-subtlest, #e4f0fc);\r\n  border: 2.5px solid var(--color-icon-selected, #075db2);\r\n}\r\n\r\n.icon_base_div.default.complete {\r\n  background: var(--color-background-success-subtler, #dcfae6);\r\n  border: 2.5px solid var(--color-icon-success, #079455);\r\n}\r\n\r\n.icon_base_div.incomplete.destructive,\r\n.icon_base_div.current.destructive,\r\n.icon_base_div.complete.destructive {\r\n  background: var(--color-background-danger-subtlest, #fef1f2);\r\n  border: 2.5px solid var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.dot {\r\n  border-radius: var(--rounded-full);\r\n}\r\n\r\n.dot.sm {\r\n  width: 0.6rem;\r\n  height: 0.6rem;\r\n}\r\n\r\n.dot.md {\r\n  width: 0.8rem;\r\n  height: 0.8rem;\r\n}\r\n\r\n.dot.lg {\r\n  width: 0.9rem;\r\n  height: 0.9rem;\r\n}\r\n\r\n.dot.default.incomplete {\r\n  background: #cdd5df;\r\n}\r\n\r\n.dot.default.current {\r\n  background: var(--color-icon-selected, #075db2);\r\n}\r\n\r\n.dot.incomplete.destructive,\r\n.dot.current.destructive {\r\n  background: var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.tick.sm {\r\n  width: 0.8rem;\r\n  height: 0.8rem;\r\n}\r\n\r\n.tick.md {\r\n  width: 1rem;\r\n  height: 1rem;\r\n}\r\n\r\n.tick.lg {\r\n  width: 1.2rem;\r\n  height: 1.2rem;\r\n}\r\n\r\n.tick.complete.destructive path {\r\n  stroke: var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.tick.complete path{\r\n    stroke: var(--color-icon-success, #079455);\r\n}\r\n","import { Component, Prop, State, Watch, h } from '@stencil/core';\r\nimport { GeneralSizes, ProgressStepStatus, ProgressStepStates } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-step-icon-base',\r\n  styleUrl: 'gb-step-icon-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepIconBase {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() status: ProgressStepStatus;\r\n  @Prop() state: ProgressStepStates;\r\n  @State() internalState: ProgressStepStates;\r\n  @State() internalStatus: ProgressStepStatus;\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.internalStatus = this.status;\r\n  }\r\n\r\n  @Watch('status')\r\n  onStatusChange(newValue: ProgressStepStatus, _oldValue: ProgressStepStatus) {\r\n    this.internalStatus = newValue;\r\n  }\r\n\r\n  @Watch('state')\r\n  onStateChange(newValue: ProgressStepStates, _oldValue: ProgressStepStates) {\r\n    this.internalState = newValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`icon_base_div ${this.internalStatus} ${this.internalState} ${this.size}`}>\r\n        {this.status !== 'complete' && <div class={`dot ${this.internalStatus} ${this.internalState} ${this.size}`}></div>}\r\n        {this.status === 'complete' && (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.internalStatus} ${this.internalState} ${this.size}`}>\r\n            <path d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\" stroke=\"#075DB2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/globuscomponents/p-47a062a3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbNotificationContentCss","GbNotificationContent","constructor","hostRef","this","label","time","supportingText","render","iconSrc","getAssetPath","icon","h","key","class","src","alt"],"sources":["src/components/gb-notification-content/gb-notification-content.css?tag=gb-notification-content&encapsulation=shadow","src/components/gb-notification-content/gb-notification-content.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.notification_container {\r\n    display: inline-flex;\r\n    padding: var(--spacing-6) var(--spacing-2);\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-2);\r\n    border-radius: var(--rounded-none);\r\n    border-bottom: 0.6px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.notification_container:hover {\r\n    background-color: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.icon img {\r\n    fill: var(--color-icon-selected, #075DB2);\r\n    stroke: var(--color-icon-selected, #075DB2);\r\n}\r\n\r\nlabel{\r\n    color: #202939;\r\n    /* Text md/Medium */\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-size: var(--Font-Size-T-md, 16px);\r\n    font-style: normal;\r\n    font-weight: var(--Font-Weight-Medium, 500);\r\n    line-height: var(--Font-Line-height-T-md, 24px); /* 150% */\r\n    letter-spacing: var(--Font-Letter-spacing-T-md, 0px);\r\n}\r\n\r\n.time {\r\n    color: #697586;\r\n    /* Text xs/Regular */\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-size: var(--Font-Size-T-xs, 12px);\r\n    font-style: normal;\r\n    font-weight: var(--Font-Weight-Regular, 400);\r\n    line-height: var(--Font-Line-height-T-xs, 18px); /* 150% */\r\n    letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);\r\n}\r\n\r\n.notification_title {\r\n    display: flex;\r\n    width: 335px;\r\n    padding: 0px;\r\n    align-items: center;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.supporting_text {\r\n    padding-left: 28px;\r\n    color:var(--color-text, #4B5565);\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}","import {Component, Prop, h, getAssetPath} from '@stencil/core'\r\n\r\n@Component({\r\n    tag: 'gb-notification-content',\r\n    styleUrl: 'gb-notification-content.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbNotificationContent {\r\n    @Prop() icon: string;\r\n    @Prop() label: string = '';\r\n    @Prop() time: string = '';\r\n    @Prop() supportingText: string = '';\r\n\r\n    render() {\r\n\r\n        const iconSrc = getAssetPath(`${this.icon}`);\r\n\r\n        return (\r\n            <div class=\"notification_container\">\r\n                <div class=\"notification_title\">\r\n                    {this.icon && (\r\n                        <div class=\"icon\">\r\n                            <img src={iconSrc} alt=\"Icon\" />\r\n                        </div>\r\n                    )}\r\n                    <label>{this.label}</label>\r\n                    <span class=\"time\">\r\n                        {this.time}\r\n                    </span>\r\n                </div> \r\n                <div class=\"supporting_text\">\r\n                    <p class=\"text-sm-regular\">{this.supportingText}</p>\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}"],"mappings":"6CAAA,MAAMA,EAA2B,o9nE,MCQpBC,EAAqB,MANlC,WAAAC,CAAAC,G,UAQYC,KAAKC,MAAW,GAChBD,KAAIE,KAAW,GACfF,KAAcG,eAAW,EAyBpC,CAvBG,MAAAC,GAEI,MAAMC,EAAUC,EAAa,GAAGN,KAAKO,QAErC,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACPF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,sBACNV,KAAKO,MACFC,EAAK,OAAAC,IAAA,2CAAAC,MAAM,QACPF,EAAK,OAAAC,IAAA,2CAAAE,IAAKN,EAASO,IAAI,UAG/BJ,EAAQ,SAAAC,IAAA,4CAAAT,KAAKC,OACbO,EAAM,QAAAC,IAAA,2CAAAC,MAAM,QACPV,KAAKE,OAGdM,EAAK,OAAAC,IAAA,2CAAAC,MAAM,mBACPF,EAAG,KAAAC,IAAA,2CAAAC,MAAM,mBAAmBV,KAAKG,iB","ignoreList":[]}

package/dist/globuscomponents/p-56aea45c.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t}from"./p-Dlqa7tPI.js";const s="";const a=class{constructor(t){e(this,t);this.color="gray_light_bg";this.framed=false}render(){return t("div",{key:"e9eb5299e02d10bfe0e8609cb1c23d1cc147e0fd",class:"dot_group_div"},t("div",{key:"cd1f70e1ac81fc9da951558de4f184a899a5d8e0"}))}};a.style=s;export{a as gb_pagination_dot_group};
-//# sourceMappingURL=p-56aea45c.entry.js.map

package/dist/globuscomponents/p-64c20075.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as s}from"./p-Dlqa7tPI.js";const t="";const r=class{constructor(s){e(this,s)}render(){return s("div",{key:"4e167984f25cb6bb912e4a8e32f7e5a6464188e7",class:"table_cell_div"})}};r.style=t;export{r as gb_table_cell};
-//# sourceMappingURL=p-64c20075.entry.js.map

package/dist/globuscomponents/p-6750940c.entry.js

@@ -1,2 +0,0 @@
-import{r,c as n,a as e,h as a,g as t}from"./p-Dlqa7tPI.js";import{S as o}from"./p-cHn6O-Kf.js";const i="/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n  /* --------------------------------------Primary Colors--------------------------------------------- */\r\n  /* base color palette */\r\n  --base-white: #fff;\r\n  --base-black: #000;\r\n\r\n  /* gray color palette  */\r\n  --gray-25: #f9fafb;\r\n  --gray-50: #f6f8fa;\r\n  --gray-100: #eef2f6;\r\n  --gray-200: #e3e8ef;\r\n  --gray-300: #cdd5df;\r\n  --gray-400: #808c9e;\r\n  --gray-500: #697586;\r\n  --gray-600: #4b5565;\r\n  --gray-700: #364152;\r\n  --gray-800: #202939;\r\n  --gray-900: #121926;\r\n  --gray-950: #0d121c;\r\n\r\n  /* brand dark blue color palette */\r\n  --brandDarkBlue-25: #f9f9fb;\r\n  --brandDarkBlue-50: #edeef3;\r\n  --brandDarkBlue-100: #d3d5e0;\r\n  --brandDarkBlue-200: #b5b9cc;\r\n  --brandDarkBlue-300: #9095b2;\r\n  --brandDarkBlue-400: #464f7f;\r\n  --brandDarkBlue-500: #212c65;\r\n  --brandDarkBlue-600: #1e285c;\r\n  --brandDarkBlue-700: #1c2554;\r\n  --brandDarkBlue-800: #161d43;\r\n  --brandDarkBlue-900: #0b0f22;\r\n  --brandDarkBlue-950: #070914;\r\n\r\n  /* brand red color palette */\r\n  --brandRed-25: #fffbfa;\r\n  --brandRed-50: #fef1f2;\r\n  --brandRed-100: #fde3e5;\r\n  --brandRed-200: #f9b4ba;\r\n  --brandRed-300: #f68e98;\r\n  --brandRed-400: #f36976;\r\n  --brandRed-500: #e21b2e;\r\n  --brandRed-600: #cc1a2a;\r\n  --brandRed-700: #b51726;\r\n  --brandRed-800: #8c121d;\r\n  --brandRed-900: #680d16;\r\n  --brandRed-950: #3f080d;\r\n\r\n  /* warning color palette */\r\n  --warning-25: #fffcf5;\r\n  --warning-50: #fffaeb;\r\n  --warning-100: #fef0c7;\r\n  --warning-200: #fedf89;\r\n  --warning-300: #fec84b;\r\n  --warning-400: #fdb022;\r\n  --warning-500: #f79009;\r\n  --warning-600: #dc6803;\r\n  --warning-700: #b54708;\r\n  --warning-800: #93370d;\r\n  --warning-900: #7a2e0e;\r\n  --warning-950: #4e1d09;\r\n\r\n  /* success color palette  */\r\n  --success-25: #f6fef9;\r\n  --success-50: #ecfdf3;\r\n  --success-100: #dcfaeb;\r\n  --success-200: #a9efc5;\r\n  --success-300: #75e0a7;\r\n  --success-400: #47cd89;\r\n  --success-500: #17b26a;\r\n  --success-600: #079455;\r\n  --success-700: #067647;\r\n  --success-800: #085d3a;\r\n  --success-900: #074d31;\r\n  --success-950: #053321;\r\n\r\n  /* ------------------------------------------opacity color palette--------------------------------------  */\r\n  /* 0% opacity */\r\n  /* White */\r\n  --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n  /* Gray */\r\n  --gray25-opacity0: rgba(249, 250, 251, 0);\r\n  --gray900-opacity0: rgba(18, 25, 38, 0);\r\n  --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n  /* 20% opacity */\r\n  /* White */\r\n  --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n  /* Dark Blue */\r\n  --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n  --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n  /* Gray */\r\n  --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n  --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n  --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n  /* 30% opacity */\r\n  --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n  --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n  /* 40% opacity */\r\n  --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n  --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n  /* 50% opacity */\r\n  /* White */\r\n  --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n  /* Gray */\r\n  --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n  --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n  --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n  /* ------------------------------------------Secondary Color------------------------------------------- */\r\n  /* blueLight color palete */\r\n  --lightBlue-25: #f5fbff;\r\n  --lightBlue-50: #f0f9ff;\r\n  --lightBlue-100: #e0f2fe;\r\n  --lightBlue-200: #b9e6fe;\r\n  --lightBlue-300: #7cd4fd;\r\n  --lightBlue-400: #7cd4fd;\r\n  --lightBlue-500: #0ba5ec;\r\n  --lightBlue-600: #0086c9;\r\n  --lightBlue-700: #026aa2;\r\n  --lightBlue-800: #065986;\r\n  --lightBlue-900: #0b4a6f;\r\n  --lightBlue-950: #062c41;\r\n\r\n  /* blue color palette */\r\n  --blue-25: #ecf5fe;\r\n  --blue-50: #e4f0fc;\r\n  --blue-100: #c8e0f9;\r\n  --blue-200: #9ac7f4;\r\n  --blue-300: #6aa9e7;\r\n  --blue-400: #378fe6;\r\n  --blue-500: #075db2;\r\n  --blue-600: #064e94;\r\n  --blue-700: #053e77;\r\n  --blue-800: #042f59;\r\n  --blue-900: #022445;\r\n  --blue-950: #021d37;\r\n\r\n  /* Purple color palete */\r\n  --purple-25: #fafaff;\r\n  --purple-50: #f4f3ff;\r\n  --purple-100: #ebe9fe;\r\n  --purple-200: #d9d6fe;\r\n  --purple-300: #bdb4fe;\r\n  --purple-400: #9b8afb;\r\n  --purple-500: #7a5af8;\r\n  --purple-600: #6938ef;\r\n  --purple-700: #5925dc;\r\n  --purple-800: #4a1fb8;\r\n  --purple-900: #3e1c96;\r\n  --purple-950: #27115f;\r\n\r\n  /* pink color palette */\r\n  --pink-25: #fef6fb;\r\n  --pink-50: #fdf2fa;\r\n  --pink-100: #fce7f6;\r\n  --pink-200: #fcceee;\r\n  --pink-300: #faa7e0;\r\n  --pink-400: #f670c7;\r\n  --pink-500: #ee46bc;\r\n  --pink-600: #dd2590;\r\n  --pink-700: #c11574;\r\n  --pink-800: #9e165f;\r\n  --pink-900: #851651;\r\n  --pink-950: #4e0d30;\r\n\r\n  /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n  /* -----------Text Color----------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-text-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-subtle: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-subtle: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-disabled: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-disabled: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-inverse: var(--base-black);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-subtle: var(--brandRed-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-subtle: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-inverse: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning-subtle: var(--warning-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning-subtle: var(--warning-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success-subtle: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success-subtle: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery-subtle: var(--lightBlue-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery-subtle: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information-subtle: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information-subtle: var(--blue-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple-subtle: var(--purple-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple-subtle: var(--purple-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink: var(--pink-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink-subtle: var(--pink-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink-subtle: var(--pink-400);\r\n  }\r\n\r\n  /* --------------Link color--------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-link: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-link-pressed: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link-pressed: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-link-visited: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link-visited: var(--lightBlue-300);\r\n  }\r\n\r\n  /* --------------Icon color--------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-subtle: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-subtle: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-disabled: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-disabled: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-inverse: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger-inverse: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-discovery: var(--lightBlue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-pink: var(--pink-300);\r\n  }\r\n\r\n  /* ----------------Border Color --------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-border-bold: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-bold: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-subtle: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-subtle: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-subtler: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-subtler: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-disabled: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-disabled: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-inverse: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-input: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-input: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-focus: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-focus: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-subtle: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-subtle: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-subtler: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-subtler: var(--brandRed-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-subtle: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-subtle: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-subtler: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-subtler: var(--warning-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-subtle: var(--success-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-subtle: var(--success-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-subtler: var(--success-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-subtler: var(--success-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery: var(--lightBlue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-subtle: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-subtle: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-subtler: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-subtler: var(--lightBlue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-subtle: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-subtle: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-subtler: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-subtler: var(--blue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-subtle: var(--purple-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-subtle: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-subtler: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-subtler: var(--purple-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink: var(--pink-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-subtle: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-subtle: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-subtler: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-subtler: var(--pink-900);\r\n  }\r\n\r\n  /* Emmanuel Kadiri starts from background color */\r\n\r\n  /* ----------------Background Color --------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-background-card-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-card-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-card: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-card: var(--gray-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-input: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-input: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-disabled: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-disabled: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-btn-disabled: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-btn-disabled: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed-hover: var(--brandRed-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed-hover: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed-pressed: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed-pressed: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-bold: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-bold: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtle: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtle: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtler: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtler: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtlest: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtlest: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtle: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtle: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtler: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtler: var(--brandRed-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtlest: var(--brandRed-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtlest: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtle: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtle: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtler: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtler: var(--warning-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtlest: var(--warning-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtlest: var(--warning-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success: var(--success-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtle: var(--success-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtle: var(--success-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtler: var(--success-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtler: var(--success-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtlest: var(--success-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtlest: var(--success-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtle: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtle: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtler: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtler: var(--lightBlue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtlest: var(--lightBlue-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtlest: var(--lightBlue-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtle: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtle: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtler: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtler: var(--blue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtlest: var(--blue-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtlest: var(--blue-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtle: var(--purple-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtle: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtler: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtler: var(--purple-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtlest: var(--purple-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtlest: var(--purple-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtle: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtle: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtler: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtler: var(--pink-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtlest: var(--purple-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtlest: var(--pink-950);\r\n  }\r\n\r\n  /* ----------------Blanket Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-blanket: var(--darkBlue500-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket: var(--darkBlue200-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n  }\r\n\r\n  /* ----------------Skeleton Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-skeleton: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-skeleton: var(--gray-800);\r\n  }\r\n\r\n    [data-theme='light'] {\r\n    --color-skeleton-bold: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-skeleton-bold: var(--gray-700);\r\n  }\r\n\r\n  /* ----------------Surface Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-surface-bold: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface: var(--gray-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-hovered: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-hovered: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-pressed: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-pressed: var(--gray-700);\r\n  }\r\n\r\n  /* ----------------Transparent Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-surface-transparent50: var(--white-opacity50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent50: var(--gray900-opacity50);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-transparent20: var(--white-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent20: var(--gray900-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-transparent-full: var(--white-opacity0);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent-full: var(--gray900-opacity0);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n  }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n  --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n  --blur-sm: blur(4px);\r\n  --blur-md: blur(8px);\r\n  --blur-lg: blur(12px);\r\n  --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n  box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n  box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n  box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n  box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n  box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n  box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n  box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n  backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n  backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n  backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n  backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n  /* Gray Gradients */\r\n  /* --gray-gradient-600: linear-gradient(); */\r\n  --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n  --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n  --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n  --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n  --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n  --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n  /* Brand Dark Blue Gradients */\r\n  --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n  --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n  --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n  --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n  --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n  --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n  /* Brand Red Gradients */\r\n  --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n  --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n  --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n  --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n  --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n  --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n  /* Blue Gradients */\r\n  --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n  --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n  --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n  --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n  --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n  --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n  background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n  background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n  background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n  background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n  background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n  background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n  background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n  background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n  background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n  background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n  background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n  background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n  background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n  background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n  background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n  background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n  background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n  background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n  background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n  background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n  background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n  background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n  background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n  background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n  /* Positive spacing */\r\n  --spacing-none: 0rem;\r\n  --spacing-half: 0.125rem;\r\n  --spacing-1: 0.25rem;\r\n  --spacing-2: 0.5rem;\r\n  --spacing-3: 0.75rem;\r\n  --spacing-4: 1rem;\r\n  --spacing-5: 1.25rem;\r\n  --spacing-6: 1.5rem;\r\n  --spacing-7: 2rem;\r\n  --spacing-8: 2.5rem;\r\n  --spacing-12: 3rem;\r\n  --spacing-16: 4rem;\r\n  --spacing-20: 5rem;\r\n  --spacing-24: 6rem;\r\n  --spacing-32: 8rem;\r\n  --spacing-40: 10rem;\r\n  --spacing-48: 12rem;\r\n  --spacing-56: 14rem;\r\n  --spacing-64: 16rem;\r\n\r\n  /* Negative spacing */\r\n\r\n  --spacing-negative-half: -0.125rem;\r\n  --spacing-negative-1: -0.25rem;\r\n  --spacing-negative-2: -0.5rem;\r\n  --spacing-negative-3: -0.75rem;\r\n  --spacing-negative-4: -1rem;\r\n  --spacing-negative-5: -1.25rem;\r\n  --spacing-negative-6: -1.5rem;\r\n  --spacing-negative-7: -2rem;\r\n\r\n  /* Radius  */\r\n  --rounded-none: 0rem;\r\n  --rounded-xs: 0.25rem;\r\n  --rounded-sm: 0.5rem;\r\n  --rounded-md: 0.75rem;\r\n  --rounded-lg: 1rem;\r\n  --rounded-xl: 1.5rem;\r\n  --rounded-2xl: 2rem;\r\n  --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root {\r\n  /* Font Sizes */\r\n  --font-size-d-2xl: 4.5rem;\r\n  --font-size-d-xl: 3.75rem;\r\n  --font-size-d-lg: 3rem;\r\n  --font-size-d-md: 2.25rem;\r\n  --font-size-d-sm: 1.875rem;\r\n  --font-size-d-xs: 1.5rem;\r\n  --font-size-t-xl: 1.25rem;\r\n  --font-size-t-lg: 1.125rem;\r\n  --font-size-t-md: 1rem;\r\n  --font-size-t-sm: 0.875rem;\r\n  --font-size-t-xs: 0.75rem;\r\n  --font-size-t-xxs: 0.625rem;\r\n\r\n  /* Font Weights */\r\n  --font-weight-bold: 700;\r\n  --font-weight-semi-bold: 600;\r\n  --font-weight-medium: 500;\r\n  --font-weight-regular: 400;\r\n\r\n  /* Line Heights */\r\n  --font-line-height-d-2xl: 5rem;\r\n  --font-line-height-d-xl: 4.25rem;\r\n  --font-line-height-d-lg: 3.75rem;\r\n  --font-line-height-d-md: 2.75rem;\r\n  --font-line-height-d-sm: 2.375rem;\r\n  --font-line-height-d-xs: 2rem;\r\n  --font-line-height-t-xl: 2rem;\r\n  --font-line-height-t-lg: 1.875rem;\r\n  --font-line-height-t-md: 1.688rem;\r\n  --font-line-height-t-sm: 1.5rem;\r\n  --font-line-height-t-xs: 1.25rem;\r\n  --font-line-height-t-xxs: 1.125rem;\r\n\r\n  /* Letter Spacings */\r\n  --font-letter-spacing-d-2xl: -0.09rem;\r\n  --font-letter-spacing-d-xl: -0.075rem;\r\n  --font-letter-spacing-d-lg: -0.075rem;\r\n  --font-letter-spacing-d-md: -0.045rem;\r\n  --font-letter-spacing-d-sm: 0;\r\n  --font-letter-spacing-d-xs: 0;\r\n  --font-letter-spacing-d-xxs: 0;\r\n\r\n  /* Font Families */\r\n  --font-family-title: 'Sora';\r\n  --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n  :root {\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 3.75rem;\r\n    --font-size-d-xl: 3.5rem;\r\n    --font-size-d-lg: 2.75rem;\r\n    --font-size-d-md: 2.25rem;\r\n    --font-size-d-sm: 1.875rem;\r\n    --font-size-d-xs: 1.5rem;\r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 4.25rem;\r\n    --font-line-height-d-xl: 3.75rem;\r\n    --font-line-height-d-lg: 2.4375rem;\r\n    --font-line-height-d-md: 2.75rem;\r\n    --font-line-height-d-sm: 2.375rem;\r\n    --font-line-height-d-xs: 2rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-2xl: -0.075rem;\r\n    --font-letter-spacing-xl: -0.065rem;\r\n    --font-letter-spacing-lg: -0.045rem;\r\n    --font-letter-spacing-md: -0.045rem;\r\n    --font-letter-spacing-sm: 0rem;\r\n    --font-letter-spacing-xs: 0rem;\r\n  }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n  :root {\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 3rem;\r\n    --font-size-d-xl: 2.5rem;\r\n    --font-size-d-lg: 2rem;\r\n    --font-size-d-md: 1.75rem;\r\n    --font-size-d-sm: 1.5rem;\r\n    --font-size-d-xs: 1.25rem;\r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 3.375rem;\r\n    --font-line-height-d-xl: 2.875rem;\r\n    --font-line-height-d-lg: 2.5rem;\r\n    --font-line-height-d-md: 2.1375rem;\r\n    --font-line-height-d-sm: 2rem;\r\n    --font-line-height-d-xs: 1.75rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-2xl: -0.06rem;\r\n    --font-letter-spacing-xl: -0.05rem;\r\n    --font-letter-spacing-lg: -0.045rem;\r\n    --font-letter-spacing-md: 0rem;\r\n    --font-letter-spacing-sm: 0rem;\r\n    --font-letter-spacing-xs: 0rem;\r\n  }\r\n}\r\n\r\n.display-2xl-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-2xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-2xl);\r\n  letter-spacing: var(--font-letter-spacing-d-2xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n  margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n  margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-2xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-2xl);\r\n  letter-spacing: var(--font-letter-spacing-d-2xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n  margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n  margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-xl);\r\n  letter-spacing: var(--font-letter-spacing-d-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n  margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n  margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-xl);\r\n  letter-spacing: var(--font-letter-spacing-d-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n  margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n  margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-lg);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-lg);\r\n  letter-spacing: var(--font-letter-spacing-d-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n  margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n  margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-lg);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-lg);\r\n  letter-spacing: var(--font-letter-spacing-d-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n  margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n  margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-md);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-md);\r\n  letter-spacing: var(--font-letter-spacing-d-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-md);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-md);\r\n  letter-spacing: var(--font-letter-spacing-d-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-sm);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-sm);\r\n  letter-spacing: var(--font-letter-spacing-d-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-sm);\r\n  letter-spacing: var(--font-letter-spacing-d-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-xs);\r\n  letter-spacing: var(--font-letter-spacing-d-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n  margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n  margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-xs);\r\n  letter-spacing: var(--font-letter-spacing-d-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n  margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n  margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n  margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n  margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n  margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n  margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n  margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n  margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n  margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n  margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n\r\n.header_div {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 100%;\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.header_div.border {\r\n  border-bottom: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n\r\n.content {\r\n  display: flex;\r\n  height: 4.5rem;\r\n  padding: 0rem 2rem;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  align-self: stretch;\r\n}\r\n\r\n.logo {\r\n  display: block;\r\n}\r\n\r\n.icon_logo {\r\n  display: none;\r\n}\r\n\r\n.inner_content {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  gap: var(--spacing-4);\r\n  flex: 1 0 0;\r\n  position: relative;\r\n}\r\n\r\n.action {\r\n  display: flex;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.search {\r\n  width: 20rem;\r\n}\r\n\r\n.avatar_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 0;\r\n  z-index: 9999;\r\n}\r\n\r\n.notification_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 4rem;\r\n  z-index: 9999;\r\n}\r\n\r\n.help_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 6.5rem;\r\n  z-index: 9999;\r\n}\r\n\r\n@media (max-width: 440px) {\r\n  .content {\r\n    padding: var(--spacing-none) var(--spacing-5);\r\n  }\r\n}\r\n\r\n@media (max-width: 450px) {\r\n  .logo {\r\n    display: none;\r\n  }\r\n\r\n  .icon_logo {\r\n    display: block;\r\n  }\r\n}\r\n";const d=class{constructor(e){r(this,e);this.navBarItemClicked=n(this,"navBarItemClicked");this.menuClicked=n(this,"menuClicked");this.inputValueChanged=n(this,"inputValueChanged");this.helpItemClicked=n(this,"helpItemClicked");this.themeTabClicked=n(this,"themeTabClicked");this.avatarDropdownItemClicked=n(this,"avatarDropdownItemClicked");this.showIndicator=false;this.text=true;this.placeholder=false;this.color="blue";this.showBorder=true;this.showNotification=false;this.showHelp=false;this.showLogo=false;this.logo="";this.showSearch=false;this.inputPlaceholder="";this.inputIcon="";this.avatarDropdownType="simple";this.listGroupOne=[];this.listGroupTwo=[];this.showThemeTab=true;this.showProfile=true;this.showRoles=false;this.roles=[];this.showLogOut=false;this.showLogError=false;this.notifications=[];this.avatarDropdownShown=false;this.notificationDropdownShown=false;this.helpDropdownShown=false;this.initials=""}applyColorToInitials(){switch(this.color){case"gray":return"gray";case"blue":return"blue";case"cyan":return"cyan";case"pink":return"pink";case"purple":return"purple";case"green":return"green";case"yellow":return"yellow"}}onSearch(r){this.inputValueChanged.emit(r.detail)}componentDidLoad(){document.addEventListener("click",this.handleClickOutside);const r=this.el.querySelector("[slot='initials']");if(r){r.classList.add("text-md-semi-bold");r.classList.add(this.applyColorToInitials());console.log(r.textContent);this.initials=r.textContent}}helpDropdownItemClicked(r){this.helpItemClicked.emit(r.detail)}onThemeTabClicked(r){this.themeTabClicked.emit(r.detail)}onAvatarDropdownItemClicked(r){console.log(r.detail);this.avatarDropdownItemClicked.emit(r.detail)}onNotificationDropdownItemClicked(r){console.log(r.detail);this.avatarDropdownItemClicked.emit(r.detail)}handleClickOutside(r){if(this.avatarDropdownShown&&!this.el.contains(r.target)){this.avatarDropdownShown=false}if(this.helpDropdownShown&&!this.el.contains(r.target)){this.helpDropdownShown=false}if(this.notificationDropdownShown&&!this.el.contains(r.target)){this.notificationDropdownShown=false}}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside)}render(){const r=e(`assets/help-circle.svg`);const n=e(`assets/notification-03.svg`);return a("div",{key:"4e44ab88816b467ae32307636c74c6ec1111752a",class:`header_div ${this.showBorder?"border":""}`},a("div",{key:"880a1f5f3a16ace5f7f966b94a06392576dd374c",class:"content"},a("slot",{key:"a83952e6ae2936cb9c1344d51da690e9290a248a",name:"logo"}),a("div",{key:"35291ee9cac74648eefb3670debee7bb8ff82f28",class:"inner_content"},a("div",{key:"75dd13dd9231099bbbab491fe99843b086c544d4",class:`action`},this.showSearch&&a("div",{key:"c915bc4b67ee0b81fd2d73e7ca94baecb542a705",class:"search"},a("gb-input-field",{key:"4850451bc7ccf53123954713f4777d406a295203",size:"sm",state:"default",type:"icon_leading",placeholder:this.inputPlaceholder,"icon-swap":this.inputIcon,onInputValueChanged:this.onSearch.bind(this)})),this.showHelp&&a("gb-header-icon",{key:"bbcca812119be5aacb85649e574514a4153f993f",state:o.Default,icon:r,onClick:()=>this.helpDropdownShown=!this.helpDropdownShown}),this.showNotification&&a("gb-header-icon",{key:"646656d9ea893b08009780a94b4b676c974e23c7",state:this.state,icon:n,"show-indicator":this.showIndicator,onClick:()=>this.notificationDropdownShown=!this.notificationDropdownShown})),a("gb-avatar",{key:"4f86d8cc9cb2bc5b2bf753338b798cb1c45b3829",size:"md",text:this.text,placeholder:this.placeholder,color:this.color,"show-border":this.showBorder,onClick:()=>this.avatarDropdownShown=!this.avatarDropdownShown},this.text?a("slot",{slot:"initials",name:"initials"}):a("slot",{name:"image",slot:"image"})),this.avatarDropdownShown&&a("gb-avatar-dropdown",{key:"7d39db1c7063d4958d70518419f15cae87c82baf",ref:r=>this.avatarDropdown=r,class:"avatar_dropdown",type:this.avatarDropdownType,"show-theme-tab":this.showThemeTab,"show-profile":this.showProfile,"show-log-out":this.showLogOut,listGroupOne:this.listGroupOne,listGroupTwo:this.listGroupTwo,color:this.color,roles:this.roles,"show-roles":this.showRoles,"current-theme":"light",onThemeTabClicked:this.onThemeTabClicked.bind(this),onItemClicked:this.onAvatarDropdownItemClicked.bind(this)},a("slot",{key:"b6d70ca9ec47b64d730f98d0ed4edf35f91afba4",slot:"name",name:"name"}),a("slot",{key:"fd8c338bb2d46a74e7b1cd869df5c3a05283fec6",slot:"supporting_text",name:"supporting_text"}),a("h1",{key:"54542aba4679114e126183a2ad25953b350aa2a1",slot:"initials",class:`text-md-semi-bold`},this.initials)),this.notificationDropdownShown&&a("gb-notification-pane",{key:"319c26d50f6ed948e70fbdcd643ffb87aa3c2ad4",state:this.notificationState,class:"notification_dropdown",notifications:this.notifications},a("p",{key:"15c8e637a7ad22781f2b15429dc9c17144d2969e",slot:"label"},"No notification"),a("p",{key:"5472cd1112ac65fc0c0ca1761e3823627a67a1d8",slot:"supporting_text"},"Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events")),this.helpDropdownShown&&a("gb-help-dropdown",{key:"4cc5d3d85e78767c0fe07f6fd99a2692c2eea2fb",class:"help_dropdown","show-log-error":this.showLogError,onHelpItemClicked:this.helpDropdownItemClicked.bind(this)}))))}get el(){return t(this)}};d.style=i;export{d as gb_header};
-//# sourceMappingURL=p-6750940c.entry.js.map

package/dist/globuscomponents/p-6750940c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbHeaderCss","GbHeader","constructor","hostRef","this","showIndicator","text","placeholder","color","showBorder","showNotification","showHelp","showLogo","logo","showSearch","inputPlaceholder","inputIcon","avatarDropdownType","listGroupOne","listGroupTwo","showThemeTab","showProfile","showRoles","roles","showLogOut","showLogError","notifications","avatarDropdownShown","notificationDropdownShown","helpDropdownShown","initials","applyColorToInitials","onSearch","item","inputValueChanged","emit","detail","componentDidLoad","document","addEventListener","handleClickOutside","el","querySelector","classList","add","console","log","textContent","helpDropdownItemClicked","helpItemClicked","onThemeTabClicked","tab","themeTabClicked","onAvatarDropdownItemClicked","avatarDropdownItemClicked","onNotificationDropdownItemClicked","event","contains","target","disconnectedCallback","removeEventListener","render","helpIconSrc","getAssetPath","notificationIconSrc","h","key","class","name","size","state","type","onInputValueChanged","bind","StateEnum","Default","icon","onClick","slot","ref","avatarDropdown","onItemClicked","notificationState","onHelpItemClicked"],"sources":["src/components/gb-header/gb-header.css?tag=gb-header&encapsulation=shadow","src/components/gb-header/gb-header.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.header_div {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 100%;\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.header_div.border {\r\n  border-bottom: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n\r\n.content {\r\n  display: flex;\r\n  height: 4.5rem;\r\n  padding: 0rem 2rem;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  align-self: stretch;\r\n}\r\n\r\n.logo {\r\n  display: block;\r\n}\r\n\r\n.icon_logo {\r\n  display: none;\r\n}\r\n\r\n.inner_content {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  gap: var(--spacing-4);\r\n  flex: 1 0 0;\r\n  position: relative;\r\n}\r\n\r\n.action {\r\n  display: flex;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.search {\r\n  width: 20rem;\r\n}\r\n\r\n.avatar_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 0;\r\n  z-index: 9999;\r\n}\r\n\r\n.notification_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 4rem;\r\n  z-index: 9999;\r\n}\r\n\r\n.help_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 6.5rem;\r\n  z-index: 9999;\r\n}\r\n\r\n@media (max-width: 440px) {\r\n  .content {\r\n    padding: var(--spacing-none) var(--spacing-5);\r\n  }\r\n}\r\n\r\n@media (max-width: 450px) {\r\n  .logo {\r\n    display: none;\r\n  }\r\n\r\n  .icon_logo {\r\n    display: block;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, getAssetPath, h, Prop, State, Listen } from '@stencil/core';\r\nimport { ColorTypes, DropdownListGroup, DropdownRoles, Notification, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = true;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: ColorTypes = 'blue';\r\n  @Prop() showBorder: boolean = true;\r\n  @Prop() showNotification: boolean = false;\r\n  @Prop() showHelp: boolean = false;\r\n  @Prop() showLogo: boolean = false;\r\n  @Prop() logo: string = '';\r\n  @Prop() showSearch: boolean = false;\r\n  @Prop() inputPlaceholder: string = '';\r\n  @Prop() inputIcon: string = '';\r\n  @Prop() avatarDropdownType: 'simple' | 'complex' = 'simple';\r\n  @Prop() listGroupOne: DropdownListGroup[] = [\r\n    // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\r\n    // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\r\n    // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\r\n  ];\r\n  @Prop() listGroupTwo: DropdownListGroup[] = [\r\n    // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\r\n    // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\r\n    // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\r\n  ];\r\n  @Prop() showThemeTab: boolean = true;\r\n  @Prop() showProfile: boolean = true;\r\n  @Prop() showRoles: boolean = false;\r\n  @Prop() roles: DropdownRoles[] = [\r\n    // {\r\n    //   badgeLabel: 'Initiator',\r\n    //   badgeColor: 'information',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Authorizer',\r\n    //   badgeColor: 'success',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Viewer',\r\n    //   badgeColor: 'gray',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n  ];\r\n  @Prop() showLogOut: boolean = false;\r\n  @Prop() showLogError: boolean = false;\r\n  @Prop() notificationState: 'empty' | 'notification_dropdown';\r\n  @Prop({ mutable: true }) notifications: Notification[] = [\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n  ];\r\n  @State() avatarDropdownShown: boolean = false;\r\n  @State() notificationDropdownShown: boolean = false;\r\n  @State() helpDropdownShown: boolean = false;\r\n  @State() initials: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<string>;\r\n  @Event() menuClicked: EventEmitter<void>;\r\n  @Event() inputValueChanged: EventEmitter<string>;\r\n  @Event() helpItemClicked: EventEmitter<string>;\r\n  @Event() themeTabClicked: EventEmitter<string>;\r\n  @Event() avatarDropdownItemClicked: EventEmitter<string>;\r\n\r\n  avatarDropdown!: HTMLElement;\r\n  notificationDropdown!: HTMLElement;\r\n  helpDropdown!: HTMLElement;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  onSearch(item) {\r\n    this.inputValueChanged.emit(item.detail);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n      console.log(initials.textContent);\r\n      this.initials = initials.textContent;\r\n    }\r\n  }\r\n\r\n  helpDropdownItemClicked(item) {\r\n    this.helpItemClicked.emit(item.detail);\r\n  }\r\n\r\n  onThemeTabClicked(tab) {\r\n    this.themeTabClicked.emit(tab.detail);\r\n  }\r\n\r\n  onAvatarDropdownItemClicked(item) {\r\n    console.log(item.detail);\r\n    this.avatarDropdownItemClicked.emit(item.detail);\r\n  }\r\n\r\n  onNotificationDropdownItemClicked(item) {\r\n    console.log(item.detail);\r\n    this.avatarDropdownItemClicked.emit(item.detail);\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.avatarDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.avatarDropdownShown = false;\r\n    }\r\n\r\n    if (this.helpDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.helpDropdownShown = false;\r\n    }\r\n\r\n    if (this.notificationDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.notificationDropdownShown = false;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n\r\n    return (\r\n      <div class={`header_div ${this.showBorder ? 'border' : ''}`}>\r\n        <div class=\"content\">\r\n          {/* {this.showLogo && (\r\n          )} */}\r\n          <slot name=\"logo\"></slot>\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              {this.showSearch && (\r\n                <div class=\"search\">\r\n                  <gb-input-field\r\n                    size=\"sm\"\r\n                    state=\"default\"\r\n                    type=\"icon_leading\"\r\n                    placeholder={this.inputPlaceholder}\r\n                    icon-swap={this.inputIcon}\r\n                    onInputValueChanged={this.onSearch.bind(this)}\r\n                  ></gb-input-field>\r\n                </div>\r\n              )}\r\n              {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => (this.helpDropdownShown = !this.helpDropdownShown)}></gb-header-icon>}\r\n              {this.showNotification && (\r\n                <gb-header-icon\r\n                  state={this.state}\r\n                  icon={notificationIconSrc}\r\n                  show-indicator={this.showIndicator}\r\n                  onClick={() => (this.notificationDropdownShown = !this.notificationDropdownShown)}\r\n                ></gb-header-icon>\r\n              )}\r\n            </div>\r\n            <gb-avatar\r\n              size=\"md\"\r\n              text={this.text}\r\n              placeholder={this.placeholder}\r\n              color={this.color}\r\n              show-border={this.showBorder}\r\n              onClick={() => (this.avatarDropdownShown = !this.avatarDropdownShown)}\r\n            >\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n            {this.avatarDropdownShown && (\r\n              <gb-avatar-dropdown\r\n                ref={el => (this.avatarDropdown = el)}\r\n                class=\"avatar_dropdown\"\r\n                type={this.avatarDropdownType}\r\n                show-theme-tab={this.showThemeTab}\r\n                show-profile={this.showProfile}\r\n                show-log-out={this.showLogOut}\r\n                listGroupOne={this.listGroupOne}\r\n                listGroupTwo={this.listGroupTwo}\r\n                color={this.color}\r\n                roles={this.roles}\r\n                show-roles={this.showRoles}\r\n                current-theme=\"light\"\r\n                onThemeTabClicked={this.onThemeTabClicked.bind(this)}\r\n                onItemClicked={this.onAvatarDropdownItemClicked.bind(this)}\r\n              >\r\n                <slot slot=\"name\" name=\"name\"></slot>\r\n                <slot slot=\"supporting_text\" name=\"supporting_text\"></slot>\r\n                <h1 slot=\"initials\" class={`text-md-semi-bold`}>\r\n                  {this.initials}\r\n                </h1>\r\n              </gb-avatar-dropdown>\r\n            )}\r\n            {this.notificationDropdownShown && (\r\n              <gb-notification-pane state={this.notificationState} class=\"notification_dropdown\" notifications={this.notifications}>\r\n                <p slot=\"label\">No notification</p>\r\n                <p slot=\"supporting_text\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p>\r\n              </gb-notification-pane>\r\n            )}\r\n            {this.helpDropdownShown && (\r\n              <gb-help-dropdown class=\"help_dropdown\" show-log-error={this.showLogError} onHelpItemClicked={this.helpDropdownItemClicked.bind(this)}></gb-help-dropdown>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/globuscomponents/p-b4ec5fa4.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e}from"./p-Dlqa7tPI.js";const s="";const c=class{constructor(e){t(this,e);this.steps=[{status:"complete",state:"default"},{status:"complete",state:"default"},{status:"complete",state:"default"},{status:"current",state:"default"}]}render(){return e("div",{key:"c71d1b4cc3647b44f21c088f4beafc00ea9198b3",class:"icons_centered_container"},e("div",{key:"2458a8bdad414e99348755cc2be25e91a19d7ed3",class:"icons_centered_div"}))}};c.style=s;export{c as gb_stepper_horizontal_icons_connected};
-//# sourceMappingURL=p-b4ec5fa4.entry.js.map

package/dist/globuscomponents/p-b4ec5fa4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbStepperHorizontalIconsConnectedCss","GbStepperHorizontalIconsCentered","constructor","hostRef","this","steps","status","state","render","h","key","class"],"sources":["src/components/gb-stepper-horizontal-icons-connected/gb-stepper-horizontal-icons-connected.css?tag=gb-stepper-horizontal-icons-connected&encapsulation=shadow","src/components/gb-stepper-horizontal-icons-connected/gb-stepper-horizontal-icons-connected.tsx"],"sourcesContent":[null,"import { Component, Prop, h } from \"@stencil/core\";\r\nimport { GeneralSizes, StepperType } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-stepper-horizontal-icons-connected',\r\n  styleUrl: 'gb-stepper-horizontal-icons-connected.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepperHorizontalIconsCentered {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() steps: StepperType[] = [\r\n    {\r\n      status: 'complete',\r\n      state: 'default',\r\n    },\r\n    {\r\n      status: 'complete',\r\n      state: 'default',\r\n    },\r\n    {\r\n      status: 'complete',\r\n      state: 'default',\r\n    },\r\n    {\r\n      status: 'current',\r\n      state: 'default',\r\n    },\r\n  ];\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"icons_centered_container\">\r\n        <div class=\"icons_centered_div\"></div>\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"2CAAA,MAAMA,EAAuC,G,MCQhCC,EAAgC,MAL7C,WAAAC,CAAAC,G,UAOUC,KAAAC,MAAuB,CAC7B,CACEC,OAAQ,WACRC,MAAO,WAET,CACED,OAAQ,WACRC,MAAO,WAET,CACED,OAAQ,WACRC,MAAO,WAET,CACED,OAAQ,UACRC,MAAO,WAWZ,CAPC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uB","ignoreList":[]}