@rocket.chat/fuselage 0.32.0-dev.206 → 0.32.0-dev.207
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ1D,aAAK,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAUzE,aAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM,8HAcT,WAAW,
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ1D,aAAK,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAUzE,aAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM,8HAcT,WAAW,gBAwEb,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -3047,7 +3047,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
3047
3047
|
|
|
3048
3048
|
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()));
|
|
3049
3049
|
// Module
|
|
3050
|
-
___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":""}]);
|
|
3050
|
+
___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":""}]);
|
|
3051
3051
|
// Exports
|
|
3052
3052
|
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
|
|
3053
3053
|
|
|
@@ -4764,12 +4764,6 @@ var Banner = function (_a) {
|
|
|
4764
4764
|
}).inlineSize;
|
|
4765
4765
|
var isIconVisible = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return inlineSize > 375; }, [inlineSize]);
|
|
4766
4766
|
variant = variants.includes(variant) ? variant : variants[0];
|
|
4767
|
-
var closeButtonProps = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () { return ({
|
|
4768
|
-
info: variant === 'info',
|
|
4769
|
-
success: variant === 'success',
|
|
4770
|
-
warning: variant === 'warning',
|
|
4771
|
-
danger: variant === 'danger',
|
|
4772
|
-
}); }, [variant]);
|
|
4773
4767
|
var handleBannerClick = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function () {
|
|
4774
4768
|
if (onAction) {
|
|
4775
4769
|
onAction();
|
|
@@ -4782,13 +4776,15 @@ var Banner = function (_a) {
|
|
|
4782
4776
|
}
|
|
4783
4777
|
}, [onClose]);
|
|
4784
4778
|
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),
|
|
4785
|
-
icon && isIconVisible && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)(
|
|
4779
|
+
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)({
|
|
4780
|
+
inline: inline,
|
|
4781
|
+
}) }, icon)),
|
|
4786
4782
|
react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__content')({ inline: inline }) },
|
|
4787
4783
|
title && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("h6", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__title')({ inline: inline }) }, title)),
|
|
4788
4784
|
children,
|
|
4789
4785
|
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))),
|
|
4790
4786
|
closeable && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__close-button')({ inline: inline }) },
|
|
4791
|
-
react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_4__.IconButton,
|
|
4787
|
+
react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_4__.IconButton, { small: true, onClick: handleCloseButtonClick, icon: 'cross' })))));
|
|
4792
4788
|
};
|
|
4793
4789
|
/* harmony default export */ __webpack_exports__["default"] = (Banner);
|
|
4794
4790
|
|