freemium-ui 2.0.0-beta.52 → 2.0.0-beta.53

package/index.cjs.js

@@ -983,7 +983,11 @@ variant:n,weight:r,ref:o,...a},t))),ma=on.div`
   display: flex;
   align-items: center;
   gap: 4px;
-  justify-content: center;
+  justify-content: ${({align:e})=>e};
+  & .alert-icon {
+    margin-right: 4px;
+    min-width: 18px;
+  }
 `,ga={error:Sr,success:_r,info:Hr,warning:Er},ya={large:{height:"45px",
 size:"16px"},mini:{height:"24px",size:"12px"},normal:{height:"32px",size:"14px"}
 },ba=on.button`
@@ -16229,17 +16233,18 @@ onValueChange:c,...u},i.map((i=>e.createElement(Tr,{key:i?.[t],
 className:"AccordionItem",value:i?.[t],disabled:i?.disabled
 },e.createElement(Or,{hideIcon:a
 },o?o(i):i?.[n]),e.createElement(Nr,null,r?r(i):null))))),
-exports.Alert=({canDismiss:t=!0,onClose:n,children:r,level:a,onDisappear:o,data:i,icon:l,timeout:c=0,overideClassName:s,...u})=>{
-const d=qt(),h=ga[a],[p,f]=e.useState(!0);return e.useEffect((()=>{
-c>0&&(p||f(!0),setTimeout((()=>{f(!1),o?.()}),c))}),[c]),e.useEffect((()=>{
-"string"==typeof r||"string"==typeof i?.message||u["aria-describedby"]||console.warn("The `aria-describedby` prop is required when the children of the Alert are not a string. This is to ensure that assistive technologies can announce the content of the alert. Please provide a valid `aria-describedby` prop to the Alert component.")
-}),[]),p?e.createElement(ma,{level:a,role:"alert",
-"aria-describedby":"string"==typeof i?.message?i.message:void 0,...u
-},e.createElement(va,null,l??e.createElement(h,{fill:d.colors.text.semantic[a]
-}),i?.message?e.createElement(fa,null,i.message):r,i?.linkText&&e.createElement(Ur,{
-target:"_blank",rel:"noreferrer",href:i?.href??"#"
-},i.linkText)),t&&e.createElement($r,{onClick:()=>{f(!1),n?.()}
-},e.createElement(Mr,{fill:d.colors.text.primary}))):null
+exports.Alert=({onClose:t,children:n,level:r,onDisappear:a,data:o,icon:i,overideClassName:l,timeout:c=0,canDismiss:s=!0,alignContent:u="center",...d})=>{
+const h=qt(),p=ga[r],[f,m]=e.useState(!0);return e.useEffect((()=>{
+c>0&&(f||m(!0),setTimeout((()=>{m(!1),a?.()}),c))}),[c]),e.useEffect((()=>{
+"string"==typeof n||"string"==typeof o?.message||d["aria-describedby"]||console.warn("The `aria-describedby` prop is required when the children of the Alert are not a string. This is to ensure that assistive technologies can announce the content of the alert. Please provide a valid `aria-describedby` prop to the Alert component.")
+}),[]),f?e.createElement(ma,{level:r,role:"alert",
+"aria-describedby":"string"==typeof o?.message?o.message:void 0,...d
+},e.createElement(va,{align:u},i??e.createElement(p,{className:"alert-icon",
+fill:h.colors.text.semantic[r]
+}),o?.message?e.createElement(fa,null,o.message):n,o?.linkText&&e.createElement(Ur,{
+target:"_blank",rel:"noreferrer",href:o?.href??"#"
+},o.linkText)),s&&e.createElement($r,{onClick:()=>{m(!1),t?.()}
+},e.createElement(Mr,{fill:h.colors.text.primary}))):null
 },exports.BoxedRadio=({options:t,defaultValue:n,idAccessor:r="id",onChange:a,isErrored:o,errorText:i,disabled:l=!1,getTextContent:c,className:s,id:u,isRequired:d,readOnly:h,itemComponent:p,label:f,value:m,customIndicator:v,...g})=>e.createElement(us,{
 className:"StyledBoxedRadio"},f&&e.createElement(Fr,{htmlFor:u,
 className:"input-label"},f,d&&e.createElement(jr,null,"*")),e.createElement(ds,{

package/index.d.ts

@@ -121,12 +121,16 @@ interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default getAlertIcon(level)
      **/
     icon?: React.ReactNode;
+    /**
+     * Alignment of the content in the alert
+     */
+    alignContent?: 'flex-start' | 'center' | 'flex-end';
 }
 
 /**
  * Alert displays an alert on the user interface and enables displaying additional information to the context of the page.
  */
-declare const Alert: ({ canDismiss, onClose, children, level, onDisappear, data, icon, timeout, overideClassName, ...props }: AlertProps) => react__default.JSX.Element | null;
+declare const Alert: ({ onClose, children, level, onDisappear, data, icon, overideClassName, timeout, canDismiss, alignContent, ...props }: AlertProps) => react__default.JSX.Element | null;
 
 type ButtonSizeKey = 'mini' | 'normal' | 'large';
 type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'link';

package/index.js

@@ -979,19 +979,24 @@ variant:n,weight:r,ref:o,...a},e))),Pa=En.div`
   display: flex;
   align-items: center;
   gap: 4px;
-  justify-content: center;
+  justify-content: ${({align:e})=>e};
+  & .alert-icon {
+    margin-right: 4px;
+    min-width: 18px;
+  }
 `,Oa={error:Wr,success:Gr,info:Kr,warning:Yr
-},Na=({canDismiss:e=!0,onClose:n,children:r,level:a,onDisappear:o,data:i,icon:l,timeout:c=0,overideClassName:s,...u})=>{
-const d=vn(),h=Oa[a],[p,f]=t.useState(!0);return t.useEffect((()=>{
-c>0&&(p||f(!0),setTimeout((()=>{f(!1),o?.()}),c))}),[c]),t.useEffect((()=>{
-"string"==typeof r||"string"==typeof i?.message||u["aria-describedby"]||console.warn("The `aria-describedby` prop is required when the children of the Alert are not a string. This is to ensure that assistive technologies can announce the content of the alert. Please provide a valid `aria-describedby` prop to the Alert component.")
-}),[]),p?t.createElement(Pa,{level:a,role:"alert",
-"aria-describedby":"string"==typeof i?.message?i.message:void 0,...u
-},t.createElement(Ra,null,l??t.createElement(h,{fill:d.colors.text.semantic[a]
-}),i?.message?t.createElement(Ia,null,i.message):r,i?.linkText&&t.createElement(da,{
-target:"_blank",rel:"noreferrer",href:i?.href??"#"
-},i.linkText)),e&&t.createElement(ua,{onClick:()=>{f(!1),n?.()}
-},t.createElement($r,{fill:d.colors.text.primary}))):null},Fa={large:{
+},Na=({onClose:e,children:n,level:r,onDisappear:a,data:o,icon:i,overideClassName:l,timeout:c=0,canDismiss:s=!0,alignContent:u="center",...d})=>{
+const h=vn(),p=Oa[r],[f,m]=t.useState(!0);return t.useEffect((()=>{
+c>0&&(f||m(!0),setTimeout((()=>{m(!1),a?.()}),c))}),[c]),t.useEffect((()=>{
+"string"==typeof n||"string"==typeof o?.message||d["aria-describedby"]||console.warn("The `aria-describedby` prop is required when the children of the Alert are not a string. This is to ensure that assistive technologies can announce the content of the alert. Please provide a valid `aria-describedby` prop to the Alert component.")
+}),[]),f?t.createElement(Pa,{level:r,role:"alert",
+"aria-describedby":"string"==typeof o?.message?o.message:void 0,...d
+},t.createElement(Ra,{align:u},i??t.createElement(p,{className:"alert-icon",
+fill:h.colors.text.semantic[r]
+}),o?.message?t.createElement(Ia,null,o.message):n,o?.linkText&&t.createElement(da,{
+target:"_blank",rel:"noreferrer",href:o?.href??"#"
+},o.linkText)),s&&t.createElement(ua,{onClick:()=>{m(!1),e?.()}
+},t.createElement($r,{fill:h.colors.text.primary}))):null},Fa={large:{
 height:"45px",size:"16px"},mini:{height:"24px",size:"12px"},normal:{
 height:"32px",size:"14px"}},Ba=En.button`
   font-weight: ${({theme:e})=>e.typography.fontWeight["semi-bold"]};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "2.0.0-beta.52",
+  "version": "2.0.0-beta.53",
   "description": "React Ui Components for Freemium Apps",
   "main": "./index.js",
   "module": "./index.js",