@rocket.chat/fuselage 0.32.0-dev.206 → 0.32.0-dev.208

package/dist/fuselage.development.js

@@ -3047,7 +3047,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".rcx-banner {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex: 0 1 auto;\n  box-sizing: border-box;\n  padding-top: 14px;\n  padding-bottom: 14px;\n  padding-block: 14px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-inline: 16px;\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif;\n  font-family: var(--rcx-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.rcx-banner--inline {\n  padding-top: 12px;\n  padding-bottom: 12px;\n  padding-block: 12px;\n}\n.rcx-banner--actionable {\n  cursor: pointer;\n}\n.rcx-banner--neutral {\n  color: #2f343d;\n  color: var(--rcx-banner-colors-neutral-color, var(--rcx-color-font-default, var(--rcx-color-neutral-800, #2f343d)));\n  background-color: #e4e7ea;\n  background-color: var(--rcx-banner-colors-neutral-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n}\n.rcx-banner--info {\n  color: #095AD2;\n  color: var(--rcx-banner-colors-info-color, var(--rcx-color-status-font-on-info, var(--rcx-color-primary-600, #095AD2)));\n  background-color: #D1EBFE;\n  background-color: var(--rcx-banner-colors-info-background-color, var(--rcx-color-status-background-info, var(--rcx-color-primary-200, #D1EBFE)));\n}\n.rcx-banner--success {\n  color: #148660;\n  color: var(--rcx-banner-colors-success-color, var(--rcx-color-status-font-on-success, var(--rcx-color-success-800, #148660)));\n  background-color: #C0F6E4;\n  background-color: var(--rcx-banner-colors-success-background-color, var(--rcx-color-status-background-success, var(--rcx-color-success-200, #C0F6E4)));\n}\n.rcx-banner--warning {\n  color: #8E6300;\n  color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, var(--rcx-color-warning-900, #8E6300)));\n  background-color: #FFECAD;\n  background-color: var(--rcx-banner-colors-warning-background-color, var(--rcx-color-status-background-warning, var(--rcx-color-warning-200, #FFECAD)));\n}\n.rcx-banner--danger {\n  color: #9B1325;\n  color: var(--rcx-banner-colors-danger-color, var(--rcx-color-status-font-on-danger, var(--rcx-color-danger-800, #9B1325)));\n  background-color: #FFC1C9;\n  background-color: var(--rcx-banner-colors-danger-background-color, var(--rcx-color-status-background-danger, var(--rcx-color-danger-200, #FFC1C9)));\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__icon {\n  padding-right: 12px;\n}\n[dir=\"rtl\"] .rcx-banner__icon {\n  padding-left: 12px;\n}\n.rcx-banner__icon {\n  padding-top: 8px;\n  padding-bottom: 8px;\n  padding-block: 8px;\n  -webkit-padding-end: 12px;\n          padding-inline-end: 12px;\n}\n.rcx-banner__icon--inline {\n  margin-top: -2px;\n  margin-bottom: -2px;\n  margin-block: -2px;\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-block: 0;\n}\n.rcx-banner__content {\n  flex-grow: 1;\n  align-self: center;\n  letter-spacing: 0rem;\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n.rcx-banner__content--inline {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.rcx-banner__title {\n  margin: 0;\n  padding: 0;\n  letter-spacing: 0rem;\n  font-size: 0.875rem;\n  font-weight: 700;\n  line-height: 1.25rem;\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__title--inline {\n  padding-right: 8px;\n}\n[dir=\"rtl\"] .rcx-banner__title--inline {\n  padding-left: 8px;\n}\n.rcx-banner__title--inline {\n  display: inline;\n  -webkit-padding-end: 8px;\n          padding-inline-end: 8px;\n}\n.rcx-banner__close-button {\n  padding-top: 6px;\n  padding-bottom: 6px;\n  padding-block: 6px;\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-inline: 8px;\n}\n.rcx-banner__close-button--inline {\n  margin-top: -4px;\n  margin-bottom: -4px;\n  margin-block: -4px;\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-block: 0;\n}\n.rcx-banner__link {\n  padding-left: 10px;\n  text-decoration: underline;\n  color: inherit;\n}", "",{"version":3,"sources":["webpack://./src/components/Banner/Banner.styles.scss","webpack://./src/styles/typography.scss"],"names":[],"mappings":"AAmDA;EACE,aAAA;EACA,qBAAA;EACA,8BAAA;EACA,uBAAA;EACA,cAAA;EAEA,sBAAA;EAEA,iBAAA;EAAA,oBAAA;EAAA,mBAAA;EACA,kBAAA;EAAA,mBAAA;EAAA,oBAAA;EAEA,gNAAA;EAAA,6OAAA;EACA,mCAAA;EACA,kCAAA;AArDF;AAuDE;EACE,iBAAA;EAAA,oBAAA;EAAA,mBAAA;AArDJ;AAwDE;EACE,eAAA;AAtDJ;AAyDE;EACE,cAtE0B;EAsE1B,mHAtE0B;EAuE1B,yBAnEqC;EAmErC,4IAnEqC;AAYzC;AA0DE;EACE,cAlEuB;EAkEvB,uHAlEuB;EAmEvB,yBA/DkC;EA+DlC,gJA/DkC;AAOtC;AA2DE;EACE,cA9D0B;EA8D1B,6HA9D0B;EA+D1B,yBA3DqC;EA2DrC,sJA3DqC;AAEzC;AA4DE;EACE,cA1D0B;EA0D1B,6HA1D0B;EA2D1B,yBAvDqC;EAuDrC,sJAvDqC;AAHzC;AA6DE;EACE,cAtDyB;EAsDzB,0HAtDyB;EAuDzB,yBAnDoC;EAmDpC,mJAnDoC;AARxC;AA8DE;EAEE;AA5DJ;AA0DE;EAEE;AA5DJ;AA0DE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,yBAAA;UAAA,wBAAA;AA5DJ;AA8DI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AA5DN;AAgEE;EACE,YAAA;EACA,kBAAA;ECzFF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;AD2BF;AA8DI;EC/CF,gBAAA;EAEA,uBAAA;EAKA,mBAAA;ADjBF;AA8DE;EACE,SAAA;EACA,UAAA;ECpGF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;ADwCF;AA2DI;EAGE;AA1DN;AAuDI;EAGE;AA1DN;AAuDI;EACE,eAAA;EAEA,wBAAA;UAAA,uBAAA;AA1DN;AA8DE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,iBAAA;EAAA,kBAAA;EAAA,mBAAA;AA5DJ;AA8DI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AA5DN;AAgEE;EACE,kBAAA;EAEA,0BAAA;EAEA,cAAA;AAhEJ","sourcesContent":["@use 'sass:map';\n@use '../../styles/functions';\n@use '../../styles/colors.scss';\n@use '../../styles/typography.scss';\n\n// neutral\n$banner-colors-neutral-color: functions.theme(\n  'banner-colors-neutral-color',\n  colors.font(default)\n);\n$banner-colors-neutral-background-color: functions.theme(\n  'banner-colors-neutral-background-color',\n  colors.surface(neutral)\n);\n// info\n$banner-colors-info-color: functions.theme(\n  'banner-colors-info-color',\n  colors.status-font(on-info)\n);\n$banner-colors-info-background-color: functions.theme(\n  'banner-colors-info-background-color',\n  colors.status-background(info)\n);\n// success\n$banner-colors-success-color: functions.theme(\n  'banner-colors-success-color',\n  colors.status-font(on-success)\n);\n$banner-colors-success-background-color: functions.theme(\n  'banner-colors-success-background-color',\n  colors.status-background(success)\n);\n// warning\n$banner-colors-warning-color: functions.theme(\n  'banner-colors-warning-color',\n  colors.status-font(on-warning)\n);\n$banner-colors-warning-background-color: functions.theme(\n  'banner-colors-warning-background-color',\n  colors.status-background(warning)\n);\n// danger\n$banner-colors-danger-color: functions.theme(\n  'banner-colors-danger-color',\n  colors.status-font(on-danger)\n);\n$banner-colors-danger-background-color: functions.theme(\n  'banner-colors-danger-background-color',\n  colors.status-background(danger)\n);\n\n.rcx-banner {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex: 0 1 auto;\n\n  box-sizing: border-box;\n\n  padding-block: 14px;\n  padding-inline: 16px;\n\n  font-family: typography.font-family('sans');\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  &--inline {\n    padding-block: 12px;\n  }\n\n  &--actionable {\n    cursor: pointer;\n  }\n\n  &--neutral {\n    color: $banner-colors-neutral-color;\n    background-color: $banner-colors-neutral-background-color;\n  }\n\n  &--info {\n    color: $banner-colors-info-color;\n    background-color: $banner-colors-info-background-color;\n  }\n\n  &--success {\n    color: $banner-colors-success-color;\n    background-color: $banner-colors-success-background-color;\n  }\n\n  &--warning {\n    color: $banner-colors-warning-color;\n    background-color: $banner-colors-warning-background-color;\n  }\n\n  &--danger {\n    color: $banner-colors-danger-color;\n    background-color: $banner-colors-danger-background-color;\n  }\n\n  &__icon {\n    padding-block: 8px;\n    padding-inline-end: 12px;\n\n    &--inline {\n      margin-block: -2px;\n      padding-block: 0;\n    }\n  }\n\n  &__content {\n    flex-grow: 1;\n    align-self: center;\n\n    @include typography.use-font-scale(p2);\n\n    &--inline {\n      @include typography.use-with-truncated-text;\n    }\n  }\n\n  &__title {\n    margin: 0;\n    padding: 0;\n    @include typography.use-font-scale(h5);\n\n    &--inline {\n      display: inline;\n\n      padding-inline-end: 8px;\n    }\n  }\n\n  &__close-button {\n    padding-block: 6px;\n    padding-inline: 8px;\n\n    &--inline {\n      margin-block: -4px;\n      padding-block: 0;\n    }\n  }\n\n  &__link {\n    padding-left: 10px;\n\n    text-decoration: underline;\n\n    color: inherit;\n  }\n}\n","@use 'sass:map';\n@use '~@rocket.chat/fuselage-tokens/dist/typography.scss';\n@use './functions.scss';\n\n@function font-family($name) {\n  @if not map.has-key(typography.$font-families, $name) {\n    @error 'invalid font family name';\n  }\n\n  @return var(\n    --rcx-font-family-#{$name},\n    map.get(typography.$font-families, $name)\n  );\n}\n\n$font-scales: map.keys(typography.$font-scales);\n\n@mixin use-font-scale($name) {\n  @if not map.has-key(typography.$font-scales, $name) {\n    @error 'invalid font scale name';\n  }\n\n  $-font-scale: map.get(typography.$font-scales, $name);\n  letter-spacing: functions.to-rem(map.get($-font-scale, letter-spacing));\n\n  font-size: functions.to-rem(map.get($-font-scale, font-size));\n  font-weight: map.get($-font-scale, font-weight);\n  line-height: functions.to-rem(map.get($-font-scale, line-height));\n}\n\n@function letter-spacing($name) {\n  @if not map.has-key(typography.$font-scales, $name) {\n    @error 'invalid font scale name';\n  }\n\n  @return functions.to-rem(\n    map.get(map.get(typography.$font-scales, $name), letter-spacing)\n  );\n}\n\n@function font-size($name) {\n  @if not map.has-key(typography.$font-scales, $name) {\n    @error 'invalid font scale name';\n  }\n\n  @return functions.to-rem(\n    map.get(map.get(typography.$font-scales, $name), font-size)\n  );\n}\n\n@function font-weight($name) {\n  @if not map.has-key(typography.$font-scales, $name) {\n    @error 'invalid font scale name';\n  }\n\n  @return map.get(map.get(typography.$font-scales, $name), font-weight);\n}\n\n@function line-height($name) {\n  @if not map.has-key(typography.$font-scales, $name) {\n    @error 'invalid font scale name';\n  }\n\n  @return functions.to-rem(\n    map.get(map.get(typography.$font-scales, $name), line-height)\n  );\n}\n\n@mixin use-text-ellipsis {\n  overflow: hidden;\n\n  text-overflow: ellipsis;\n}\n\n@mixin use-with-truncated-text {\n  @include use-text-ellipsis();\n  white-space: nowrap;\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".rcx-banner {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex: 0 1 auto;\n  box-sizing: border-box;\n  padding-top: 14px;\n  padding-bottom: 14px;\n  padding-block: 14px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-inline: 16px;\n  border-top-width: 0.25rem;\n  border-top-style: solid;\n  background-color: #f7f8fa;\n  background-color: var(--rcx-banner-colors-neutral-background-color, var(--rcx-color-surface-tint, var(--rcx-color-neutral-100, #f7f8fa)));\n  font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif;\n  font-family: var(--rcx-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.rcx-banner--inline {\n  padding-top: 12px;\n  padding-bottom: 12px;\n  padding-block: 12px;\n}\n.rcx-banner--actionable {\n  cursor: pointer;\n}\n.rcx-banner--neutral {\n  border-top-color: transparent;\n}\n.rcx-banner--info {\n  border-top-color: #095AD2;\n  border-top-color: var(--rcx-banner-colors-info-color, var(--rcx-color-status-font-on-info, var(--rcx-color-primary-600, #095AD2)));\n}\n.rcx-banner--warning {\n  border-top-color: #8E6300;\n  border-top-color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, var(--rcx-color-warning-900, #8E6300)));\n}\n.rcx-banner--danger {\n  border-top-color: #9B1325;\n  border-top-color: var(--rcx-banner-colors-danger-color, var(--rcx-color-status-font-on-danger, var(--rcx-color-danger-800, #9B1325)));\n}\n.rcx-banner--success {\n  border-top-color: #148660;\n  border-top-color: var(--rcx-banner-colors-success-color, var(--rcx-color-status-font-on-success, var(--rcx-color-success-800, #148660)));\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__icon {\n  padding-right: 12px;\n}\n[dir=\"rtl\"] .rcx-banner__icon {\n  padding-left: 12px;\n}\n.rcx-banner__icon {\n  padding-top: 8px;\n  padding-bottom: 8px;\n  padding-block: 8px;\n  -webkit-padding-end: 12px;\n          padding-inline-end: 12px;\n}\n.rcx-banner__icon--info {\n  color: #095AD2;\n  color: var(--rcx-banner-colors-info-color, var(--rcx-color-status-font-on-info, var(--rcx-color-primary-600, #095AD2)));\n}\n.rcx-banner__icon--warning {\n  color: #8E6300;\n  color: var(--rcx-banner-colors-warning-color, var(--rcx-color-status-font-on-warning, var(--rcx-color-warning-900, #8E6300)));\n}\n.rcx-banner__icon--danger {\n  color: #9B1325;\n  color: var(--rcx-banner-colors-danger-color, var(--rcx-color-status-font-on-danger, var(--rcx-color-danger-800, #9B1325)));\n}\n.rcx-banner__icon--success {\n  color: #148660;\n  color: var(--rcx-banner-colors-success-color, var(--rcx-color-status-font-on-success, var(--rcx-color-success-800, #148660)));\n}\n.rcx-banner__icon--inline {\n  margin-top: -2px;\n  margin-bottom: -2px;\n  margin-block: -2px;\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-block: 0;\n}\n.rcx-banner__content {\n  flex-grow: 1;\n  align-self: center;\n  letter-spacing: 0rem;\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.25rem;\n}\n.rcx-banner__content--inline {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.rcx-banner__title {\n  margin: 0;\n  padding: 0;\n  letter-spacing: 0rem;\n  font-size: 0.875rem;\n  font-weight: 700;\n  line-height: 1.25rem;\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__title--inline {\n  padding-right: 8px;\n}\n[dir=\"rtl\"] .rcx-banner__title--inline {\n  padding-left: 8px;\n}\n.rcx-banner__title--inline {\n  display: inline;\n  -webkit-padding-end: 8px;\n          padding-inline-end: 8px;\n}\n.rcx-banner__close-button {\n  padding-top: 6px;\n  padding-bottom: 6px;\n  padding-block: 6px;\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-inline: 8px;\n}\n.rcx-banner__close-button--inline {\n  margin-top: -4px;\n  margin-bottom: -4px;\n  margin-block: -4px;\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-block: 0;\n}\n.rcx-banner__link {\n  padding-left: 10px;\n  text-decoration: underline;\n  color: inherit;\n}", "",{"version":3,"sources":["webpack://./src/components/Banner/Banner.styles.scss","webpack://./src/styles/typography.scss"],"names":[],"mappings":"AAwCA;EACE,aAAA;EACA,qBAAA;EACA,8BAAA;EACA,uBAAA;EACA,cAAA;EAEA,sBAAA;EAEA,iBAAA;EAAA,oBAAA;EAAA,mBAAA;EACA,kBAAA;EAAA,mBAAA;EAAA,oBAAA;EAEA,yBAAA;EACA,uBAAA;EAEA,yBA5CuC;EA4CvC,yIA5CuC;EA8CvC,gNAAA;EAAA,6OAAA;EACA,mCAAA;EACA,kCAAA;AA5CF;AA8CE;EACE,iBAAA;EAAA,oBAAA;EAAA,mBAAA;AA5CJ;AA+CE;EACE,eAAA;AA7CJ;AAgDE;EACE,6BAAA;AA9CJ;AAiDE;EACE,yBAzDuB;EAyDvB,kIAzDuB;AAU3B;AAkDE;EACE,yBAjD0B;EAiD1B,wIAjD0B;AAC9B;AAmDE;EACE,yBA/CyB;EA+CzB,qIA/CyB;AAF7B;AAoDE;EACE,yBA/D0B;EA+D1B,wIA/D0B;AAa9B;AAqDE;EAEE;AAnDJ;AAiDE;EAEE;AAnDJ;AAiDE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,yBAAA;UAAA,wBAAA;AAnDJ;AAqDI;EACE,cA7EqB;EA6ErB,uHA7EqB;AA0B3B;AAsDI;EACE,cArEwB;EAqExB,6HArEwB;AAiB9B;AAuDI;EACE,cAnEuB;EAmEvB,0HAnEuB;AAc7B;AAwDI;EACE,cAnFwB;EAmFxB,6HAnFwB;AA6B9B;AAyDI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AAvDN;AA2DE;EACE,YAAA;EACA,kBAAA;EC9FF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;ADqCF;AAyDI;ECpDF,gBAAA;EAEA,uBAAA;EAKA,mBAAA;ADPF;AAyDE;EACE,SAAA;EACA,UAAA;ECzGF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;ADkDF;AAsDI;EAGE;AArDN;AAkDI;EAGE;AArDN;AAkDI;EACE,eAAA;EAEA,wBAAA;UAAA,uBAAA;AArDN;AAyDE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,iBAAA;EAAA,kBAAA;EAAA,mBAAA;AAvDJ;AAyDI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AAvDN;AA2DE;EACE,kBAAA;EAEA,0BAAA;EAEA,cAAA;AA3DJ","sourcesContent":["@use 'sass:map';\n@use '../../styles/functions';\n@use '../../styles/colors.scss';\n@use '../../styles/lengths.scss';\n@use '../../styles/typography.scss';\n\n// neutral\n$banner-colors-neutral-color: functions.theme(\n  'banner-colors-neutral-color',\n  colors.font(default)\n);\n$banner-colors-neutral-background-color: functions.theme(\n  'banner-colors-neutral-background-color',\n  colors.surface(tint)\n);\n\n// info\n$banner-colors-info-color: functions.theme(\n  'banner-colors-info-color',\n  colors.status-font(on-info)\n);\n\n// success\n$banner-colors-success-color: functions.theme(\n  'banner-colors-success-color',\n  colors.status-font(on-success)\n);\n\n// warning\n$banner-colors-warning-color: functions.theme(\n  'banner-colors-warning-color',\n  colors.status-font(on-warning)\n);\n\n// danger\n$banner-colors-danger-color: functions.theme(\n  'banner-colors-danger-color',\n  colors.status-font(on-danger)\n);\n\n.rcx-banner {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex: 0 1 auto;\n\n  box-sizing: border-box;\n\n  padding-block: 14px;\n  padding-inline: 16px;\n\n  border-top-width: lengths.border-width(4);\n  border-top-style: solid;\n\n  background-color: $banner-colors-neutral-background-color;\n\n  font-family: typography.font-family('sans');\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  &--inline {\n    padding-block: 12px;\n  }\n\n  &--actionable {\n    cursor: pointer;\n  }\n\n  &--neutral {\n    border-top-color: transparent;\n  }\n\n  &--info {\n    border-top-color: $banner-colors-info-color;\n  }\n\n  &--warning {\n    border-top-color: $banner-colors-warning-color;\n  }\n\n  &--danger {\n    border-top-color: $banner-colors-danger-color;\n  }\n\n  &--success {\n    border-top-color: $banner-colors-success-color;\n  }\n\n  &__icon {\n    padding-block: 8px;\n    padding-inline-end: 12px;\n\n    &--info {\n      color: $banner-colors-info-color;\n    }\n\n    &--warning {\n      color: $banner-colors-warning-color;\n    }\n\n    &--danger {\n      color: $banner-colors-danger-color;\n    }\n\n    &--success {\n      color: $banner-colors-success-color;\n    }\n\n    &--inline {\n      margin-block: -2px;\n      padding-block: 0;\n    }\n  }\n\n  &__content {\n    flex-grow: 1;\n    align-self: center;\n\n    @include typography.use-font-scale(p2);\n\n    &--inline {\n      @include typography.use-with-truncated-text;\n    }\n  }\n\n  &__title {\n    margin: 0;\n    padding: 0;\n    @include typography.use-font-scale(h5);\n\n    &--inline {\n      display: inline;\n\n      padding-inline-end: 8px;\n    }\n  }\n\n  &__close-button {\n    padding-block: 6px;\n    padding-inline: 8px;\n\n    &--inline {\n      margin-block: -4px;\n      padding-block: 0;\n    }\n  }\n\n  &__link {\n    padding-left: 10px;\n\n    text-decoration: underline;\n\n    color: inherit;\n  }\n}\n","@use 'sass:map';\n@use '~@rocket.chat/fuselage-tokens/dist/typography.scss';\n@use './functions.scss';\n\n@function font-family($name) {\n  @if not map.has-key(typography.$font-families, $name) {\n    @error 'invalid font family name';\n  }\n\n  @return var(\n    --rcx-font-family-#{$name},\n    map.get(typography.$font-families, $name)\n  );\n}\n\n$font-scales: map.keys(typography.$font-scales);\n\n@mixin use-font-scale($name) {\n  @if not map.has-key(typography.$font-scales, $name) {\n    @error 'invalid font scale name';\n  }\n\n  $-font-scale: map.get(typography.$font-scales, $name);\n  letter-spacing: functions.to-rem(map.get($-font-scale, letter-spacing));\n\n  font-size: functions.to-rem(map.get($-font-scale, font-size));\n  font-weight: map.get($-font-scale, font-weight);\n  line-height: functions.to-rem(map.get($-font-scale, line-height));\n}\n\n@function letter-spacing($name) {\n  @if not map.has-key(typography.$font-scales, $name) {\n    @error 'invalid font scale name';\n  }\n\n  @return functions.to-rem(\n    map.get(map.get(typography.$font-scales, $name), letter-spacing)\n  );\n}\n\n@function font-size($name) {\n  @if not map.has-key(typography.$font-scales, $name) {\n    @error 'invalid font scale name';\n  }\n\n  @return functions.to-rem(\n    map.get(map.get(typography.$font-scales, $name), font-size)\n  );\n}\n\n@function font-weight($name) {\n  @if not map.has-key(typography.$font-scales, $name) {\n    @error 'invalid font scale name';\n  }\n\n  @return map.get(map.get(typography.$font-scales, $name), font-weight);\n}\n\n@function line-height($name) {\n  @if not map.has-key(typography.$font-scales, $name) {\n    @error 'invalid font scale name';\n  }\n\n  @return functions.to-rem(\n    map.get(map.get(typography.$font-scales, $name), line-height)\n  );\n}\n\n@mixin use-text-ellipsis {\n  overflow: hidden;\n\n  text-overflow: ellipsis;\n}\n\n@mixin use-with-truncated-text {\n  @include use-text-ellipsis();\n  white-space: nowrap;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -4764,12 +4764,6 @@ var Banner = function (_a) {
     }).inlineSize;
     var isIconVisible = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return inlineSize > 375; }, [inlineSize]);
     variant = variants.includes(variant) ? variant : variants[0];
-    var closeButtonProps = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return ({
-        info: variant === 'info',
-        success: variant === 'success',
-        warning: variant === 'warning',
-        danger: variant === 'danger',
-    }); }, [variant]);
     var handleBannerClick = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
         if (onAction) {
             onAction();
@@ -4782,13 +4776,15 @@ var Banner = function (_a) {
         }
     }, [onClose]);
     return (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("section", __assign({ className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner')((_b = {}, _b[variant] = true, _b.inline = inline, _b.actionable = actionable, _b), className), ref: ref, role: 'banner', onClick: handleBannerClick }, props),
-        icon && isIconVisible && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__icon')({ inline: inline }) }, icon)),
+        icon && isIconVisible && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)("rcx-banner__icon rcx-banner__icon--" + variant)({
+                inline: inline,
+            }) }, icon)),
         react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__content')({ inline: inline }) },
             title && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("h6", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__title')({ inline: inline }) }, title)),
             children,
             link && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("a", { href: link, target: '_blank', className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__link')((_c = {}, _c[variant] = true, _c)) }, linkText))),
         closeable && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__close-button')({ inline: inline }) },
-            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_4__.IconButton, __assign({ small: true }, closeButtonProps, { onClick: handleCloseButtonClick, icon: 'cross' }))))));
+            react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_4__.IconButton, { small: true, onClick: handleCloseButtonClick, icon: 'cross' })))));
 };
 /* harmony default export */ __webpack_exports__["default"] = (Banner);