@rolster/react-components 18.20.5 → 18.20.6

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.
@@ -124,9 +124,11 @@
124
124
  }
125
125
  .rls-breadcrumb__label__a {
126
126
  display: inline-block;
127
- cursor: pointer;
128
127
  color: var(--pvt-link-font-color);
129
128
  }
129
+ .rls-breadcrumb__label__a--actionable {
130
+ cursor: pointer;
131
+ }
130
132
  .rls-breadcrumb__label__a--actionable:hover {
131
133
  color: var(--rls-theme-color-500);
132
134
  text-decoration: underline;
@@ -906,6 +908,36 @@
906
908
  border-radius: var(--rlc-switch-bar-radius);
907
909
  }
908
910
 
911
+ .rls-alert {
912
+ position: relative;
913
+ display: flex;
914
+ align-items: center;
915
+ column-gap: var(--rls-sizing-x6);
916
+ border-radius: var(--rls-sizing-x6);
917
+ box-sizing: border-box;
918
+ background: var(--rls-theme-color-100);
919
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
920
+ }
921
+ .rls-alert--bordered {
922
+ border: var(--rls-theme-border-1-500);
923
+ }
924
+ .rls-alert__icon {
925
+ --rlc-icon-color: var(--rls-theme-color-100);
926
+ display: flex;
927
+ align-items: center;
928
+ justify-content: center;
929
+ width: var(--rls-sizing-x16);
930
+ height: var(--rls-sizing-x16);
931
+ border-radius: 50%;
932
+ background: var(--rls-theme-color-500);
933
+ }
934
+ .rls-alert__icon + .rls-alert__content {
935
+ max-width: calc(100% - 22rem);
936
+ }
937
+ .rls-alert__content {
938
+ width: auto;
939
+ }
940
+
909
941
  .rls-ballot {
910
942
  --rlc-avatar-width: var(--rls-sizing-x20);
911
943
  --rlc-avatar-height: var(--rls-sizing-x20);
package/dist/cjs/index.js CHANGED
@@ -1678,6 +1678,10 @@ function RlsSwitchControl({ formControl, disabled, identifier, rlsTheme }) {
1678
1678
  }, rlsTheme: rlsTheme }));
1679
1679
  }
1680
1680
 
1681
+ function RlsAlert({ bordered, children, icon, identifier, rlsTheme }) {
1682
+ return (jsxRuntimeExports.jsxs("div", { id: identifier, className: useRenderClassStatus('rls-alert', { bordered }), "rls-theme": rlsTheme, children: [icon && (jsxRuntimeExports.jsx("div", { className: "rls-alert__icon", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })), jsxRuntimeExports.jsx("div", { className: "rls-alert__content", children: children })] }));
1683
+ }
1684
+
1681
1685
  function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
1682
1686
  return (jsxRuntimeExports.jsxs("div", { className: useRenderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("label", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: jsxRuntimeExports.jsx("span", { children: subtitle }) }) }))] })] }));
1683
1687
  }
@@ -2676,6 +2680,7 @@ function RlsApplication({ children }) {
2676
2680
  }
2677
2681
 
2678
2682
  exports.ConfirmationResult = ConfirmationResult;
2683
+ exports.RlsAlert = RlsAlert;
2679
2684
  exports.RlsAmount = RlsAmount;
2680
2685
  exports.RlsApplication = RlsApplication;
2681
2686
  exports.RlsAvatar = RlsAvatar;