greenole-design-system 1.1.112 → 1.1.113

package/dist/base-components/StatusBadge/StatusBadge.types.d.ts

@@ -1,3 +1,4 @@
+import { TooltipPositionTypes } from '../Tooltip/Tooltip.types';
 export type StatusBadgeStatus = "success" | "error" | "critical" | "warning" | "neutral" | "info";
 export type StatusBadgeSize = "sm" | "lg";
 export interface StatusBadgeProps {
@@ -6,5 +7,6 @@ export interface StatusBadgeProps {
     size?: StatusBadgeSize;
     onClick?: () => void;
     tooltip?: string;
+    tooltipPosition?: TooltipPositionTypes;
     className?: string;
 }

package/dist/greenole-design-system.cjs.js

@@ -881,16 +881,16 @@ See https://s-c.sh/2BAXzed for more info.`),window[On]+=1);const qu=Rt`
     `}
 
   ${({$disabled:e})=>e&&$`
-      background-color: #f9fafb;
-      border-color: #eaecf0;
-      color: #98a2b3;
+      background-color: var(--color-neutral-soft);
+      border-color: var(--color-neutral-lightest);
+      color: var(--color-neutral-medium);
       cursor: not-allowed;
     `}
 
   ${({$readOnly:e,$disabled:t})=>e&&!t&&$`
-      background-color: #fafafa;
-      border-color: #d0d5dd;
-      color: #344054;
+      background-color: var(--color-neutral-soft);
+      border-color: var(--color-neutral-lightest);
+      color: var(--color-neutral-medium);
       cursor: default;
     `}
 `,Is=v.span`
@@ -915,17 +915,17 @@ See https://s-c.sh/2BAXzed for more info.`),window[On]+=1);const qu=Rt`
     opacity: 0.7;
   }
 
-  &:disabled {
-    color: #98a2b3;
-    cursor: not-allowed;
-  }
-
   &:read-only {
-    color: #667085;
+    color: var(--color-neutral-medium);
     background: transparent;
     cursor: default;
   }
 
+  &:disabled {
+    color: var(--color-neutral-medium);
+    cursor: not-allowed;
+  }
+
   &:focus {
     outline: none;
     box-shadow: none;
@@ -1580,7 +1580,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[On]+=1);const qu=Rt`
   align-items: center;
   flex-shrink: 0;
   color: var(--neutral-medium);
-`,Qi=l.forwardRef(({status:e,label:t,size:n="sm",onClick:r,tooltip:a,className:i},o)=>{const s=!!r,c=!!a,d=p=>{r&&(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),r())},f=u.jsxs(V9,{ref:o,className:i,$size:n,$clickable:s,$hasTooltip:c,onClick:r,onKeyDown:d,role:s?"button":void 0,tabIndex:s?0:void 0,children:[u.jsx(O9,{$status:e,$size:n}),u.jsx(ot,{variant:n==="sm"?"body-sm-regular":"body-md-medium",style:{color:"var(--neutral-dark)",fontSize:n==="sm"?"13px":void 0},children:t}),s&&u.jsx(D9,{children:u.jsx(Yi,{size:n==="sm"?12:14,weight:"bold"})})]});return a?u.jsx("span",{style:{display:"inline-block"},children:u.jsx(Wi,{position:"top",text:a,children:f})}):f});Qi.displayName="StatusBadge";const $9=(e,t,n)=>n?"var(--neutral-lightest)":e?t:"var(--neutral-lighter)",z9=e=>e?"var(--neutral-light)":"var(--color-surface)",R9=(e,t)=>e?t:"var(--neutral-lighter)",G9=v.label`
+`,Qi=l.forwardRef(({status:e,label:t,size:n="sm",onClick:r,tooltip:a,tooltipPosition:i="top",className:o},s)=>{const c=!!r,d=!!a,f=m=>{r&&(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),r())},p=u.jsxs(V9,{ref:s,className:o,$size:n,$clickable:c,$hasTooltip:d,onClick:r,onKeyDown:f,role:c?"button":void 0,tabIndex:c?0:void 0,children:[u.jsx(O9,{$status:e,$size:n}),u.jsx(ot,{variant:n==="sm"?"body-sm-regular":"body-md-medium",style:{color:"var(--neutral-dark)",fontSize:n==="sm"?"13px":void 0},children:t}),c&&u.jsx(D9,{children:u.jsx(Yi,{size:n==="sm"?12:14,weight:"bold"})})]});return a?u.jsx("span",{style:{display:"inline-block"},children:u.jsx(Wi,{position:i,text:a,darkMode:!0,children:p})}):p});Qi.displayName="StatusBadge";const $9=(e,t,n)=>n?"var(--neutral-lightest)":e?t:"var(--neutral-lighter)",z9=e=>e?"var(--neutral-light)":"var(--color-surface)",R9=(e,t)=>e?t:"var(--neutral-lighter)",G9=v.label`
   position: relative;
   display: inline-block;
   width: 32px;
@@ -2153,6 +2153,16 @@ See https://s-c.sh/2BAXzed for more info.`),window[On]+=1);const qu=Rt`
 `,Kf=v.div`
   overflow-x: ${({$isMobile:e})=>e?"visible":"auto"};
   width: 100%;
+
+  &:last-child {
+    border-bottom-left-radius: calc(var(--radius-16) - 1px);
+    border-bottom-right-radius: calc(var(--radius-16) - 1px);
+
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+  }
+
   ${({$isMobile:e})=>e&&$`
       padding: var(--spacing-4);
     `}
@@ -3628,7 +3638,9 @@ PERFORMANCE OF THIS SOFTWARE.
   gap: 4px;
 `,dM=v.div`
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   gap: var(--spacing-3);
 `,fM=v.div`
   display: flex;
@@ -4279,8 +4291,11 @@ PERFORMANCE OF THIS SOFTWARE.
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 24px;
-  padding: 0 10px;
+  min-height: 24px;
+  max-width: 100%;
+  min-width: 0;
+  padding: 2px 10px;
+  box-sizing: border-box;
   border-radius: 4px;
   background: var(--neutral-lightest);
   color: var(--neutral-dark);
@@ -4294,6 +4309,7 @@ PERFORMANCE OF THIS SOFTWARE.
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   width: 16px;
   height: 16px;
   padding: 0;
@@ -4345,7 +4361,7 @@ PERFORMANCE OF THIS SOFTWARE.
   flex-direction: column;
   gap: 16px;
   min-width: 320px;
-`,pE=({items:e,onChange:t,variant:n="value",keyLabel:r,valueLabel:a,keyPlaceholder:i,valuePlaceholder:o,addButtonLabel:s,modalTitle:c,validateDuplicates:d=!1,duplicateErrorMessage:f,keepModalOpenOnAdd:p=!0,maxTags:m=50,disabled:g=!1,className:C,t:y})=>{const{t:M}=Ke(),w=y||M,b=n==="key-value",k=r||w("COMMON_TEXTS.TAG_KEY",{defaultValue:"Key"}),A=a||(b?w("COMMON_TEXTS.TAG_VALUE",{defaultValue:"Value"}):w("COMMON_TEXTS.TAG_NAME",{defaultValue:"Name"})),L=s||w("COMMON_TEXTS.ADD_TAG",{defaultValue:"Add tag"}),x=c||L,E=w("COMMON_TEXTS.ADD",{defaultValue:"Add"}),S=f||w("COMMON_TEXTS.TAG_DUPLICATE_ERROR",{defaultValue:"This tag already exists."}),T=w("COMMON_TEXTS.FIELD_REQUIRED",{defaultValue:"This field is required."}),[D,j]=l.useState(!1),[H,B]=l.useState(""),[z,V]=l.useState(""),[Z,O]=l.useState(""),[G,I]=l.useState(""),F=e.length>=m,U=()=>{B(""),V(""),O(""),I("")},Y=()=>{U(),j(!0)},q=()=>{j(!1),U()},ce=Q=>b?e.some(N=>(N.key||"").trim().toLowerCase()===(Q.key||"").trim().toLowerCase()):e.some(N=>N.value.trim().toLowerCase()===Q.value.trim().toLowerCase()),R=()=>{const Q=H.trim(),N=z.trim();let fe=!1;if(b&&!Q?(O(T),fe=!0):O(""),N?I(""):(I(T),fe=!0),fe)return;const ge=b?{key:Q,value:N}:{value:N};if(d&&ce(ge)){b?O(S):I(S);return}t([...e,ge]),p?U():q()},W=Q=>{t(e.filter((N,fe)=>fe!==Q))},se=!z.trim()||b&&!H.trim()||F,re=Q=>{Q.key==="Enter"?(Q.preventDefault(),se||R()):Q.key==="Escape"&&(Q.preventDefault(),q())};return u.jsxs(sE,{className:C,children:[u.jsxs(lE,{children:[e.map((Q,N)=>u.jsxs(cE,{$disabled:g,children:[u.jsx(ot,{variant:"body-sm-regular",style:{fontSize:"13px",color:"var(--neutral-dark)"},children:Q.key?u.jsxs(u.Fragment,{children:[u.jsxs(uE,{children:[Q.key,":"]})," ",Q.value]}):Q.value}),!g&&u.jsx(dE,{type:"button",onClick:()=>W(N),"aria-label":w("COMMON_TEXTS.REMOVE",{defaultValue:"Remove"}),children:u.jsx(s0,{size:12,weight:"bold"})})]},`${Q.key||""}-${Q.value}-${N}`)),u.jsxs(fE,{type:"button",onClick:Y,disabled:g||F,children:[u.jsx(f3,{size:12}),L]})]}),D&&u.jsx(Nr,{title:x,onClose:q,onCancel:q,onConfirm:R,confirmButton:u.jsx(kt,{type:"button",variant:"primary",disabled:se,onClick:R,children:E}),content:u.jsxs(hE,{onKeyDown:re,children:[b&&u.jsx(an,{label:k,placeholder:i,value:H,onChange:Q=>B(Q.target.value),error:Z,fullWidth:!0,autoFocus:!0},e.length),u.jsx(an,{label:A,placeholder:o,value:z,onChange:Q=>V(Q.target.value),error:G,fullWidth:!0,autoFocus:!b},b?void 0:e.length)]})})]})},mE=v.div`
+`,pE=({items:e,onChange:t,variant:n="value",keyLabel:r,valueLabel:a,keyPlaceholder:i,valuePlaceholder:o,addButtonLabel:s,modalTitle:c,validateDuplicates:d=!1,duplicateErrorMessage:f,keepModalOpenOnAdd:p=!0,maxTags:m=50,disabled:g=!1,className:C,t:y})=>{const{t:M}=Ke(),w=y||M,b=n==="key-value",k=r||w("COMMON_TEXTS.TAG_KEY",{defaultValue:"Key"}),A=a||(b?w("COMMON_TEXTS.TAG_VALUE",{defaultValue:"Value"}):w("COMMON_TEXTS.TAG_NAME",{defaultValue:"Name"})),L=s||w("COMMON_TEXTS.ADD_TAG",{defaultValue:"Add tag"}),x=c||L,E=w("COMMON_TEXTS.ADD",{defaultValue:"Add"}),S=f||w("COMMON_TEXTS.TAG_DUPLICATE_ERROR",{defaultValue:"This tag already exists."}),T=w("COMMON_TEXTS.FIELD_REQUIRED",{defaultValue:"This field is required."}),[D,j]=l.useState(!1),[H,B]=l.useState(""),[z,V]=l.useState(""),[Z,O]=l.useState(""),[G,I]=l.useState(""),F=e.length>=m,U=()=>{B(""),V(""),O(""),I("")},Y=()=>{U(),j(!0)},q=()=>{j(!1),U()},ce=Q=>b?e.some(N=>(N.key||"").trim().toLowerCase()===(Q.key||"").trim().toLowerCase()):e.some(N=>N.value.trim().toLowerCase()===Q.value.trim().toLowerCase()),R=()=>{const Q=H.trim(),N=z.trim();let fe=!1;if(b&&!Q?(O(T),fe=!0):O(""),N?I(""):(I(T),fe=!0),fe)return;const ge=b?{key:Q,value:N}:{value:N};if(d&&ce(ge)){b?O(S):I(S);return}t([...e,ge]),p?U():q()},W=Q=>{t(e.filter((N,fe)=>fe!==Q))},se=!z.trim()||b&&!H.trim()||F,re=Q=>{Q.key==="Enter"?(Q.preventDefault(),se||R()):Q.key==="Escape"&&(Q.preventDefault(),q())};return u.jsxs(sE,{className:C,children:[u.jsxs(lE,{children:[e.map((Q,N)=>u.jsxs(cE,{$disabled:g,children:[u.jsx(ot,{variant:"body-sm-regular",style:{fontSize:"13px",color:"var(--neutral-dark)",minWidth:0,overflowWrap:"anywhere"},children:Q.key?u.jsxs(u.Fragment,{children:[u.jsxs(uE,{children:[Q.key,":"]})," ",Q.value]}):Q.value}),!g&&u.jsx(dE,{type:"button",onClick:()=>W(N),"aria-label":w("COMMON_TEXTS.REMOVE",{defaultValue:"Remove"}),children:u.jsx(s0,{size:12,weight:"bold"})})]},`${Q.key||""}-${Q.value}-${N}`)),u.jsxs(fE,{type:"button",onClick:Y,disabled:g||F,children:[u.jsx(f3,{size:12}),L]})]}),D&&u.jsx(Nr,{title:x,onClose:q,onCancel:q,onConfirm:R,confirmButton:u.jsx(kt,{type:"button",variant:"primary",disabled:se,onClick:R,children:E}),content:u.jsxs(hE,{onKeyDown:re,children:[b&&u.jsx(an,{label:k,placeholder:i,value:H,onChange:Q=>B(Q.target.value),error:Z,fullWidth:!0,autoFocus:!0},e.length),u.jsx(an,{label:A,placeholder:o,value:z,onChange:Q=>V(Q.target.value),error:G,fullWidth:!0,autoFocus:!b},b?void 0:e.length)]})})]})},mE=v.div`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
@@ -4573,7 +4589,7 @@ PERFORMANCE OF THIS SOFTWARE.
   grid-area: arrow;
   display: inline-flex;
   color: var(--neutral-light);
-`,Ii=e=>{if(e===""||e===null||e===void 0)return"";const t=Number(e);return Number.isNaN(t)?e:t.toFixed(1).replace(".0","")},a5=e=>{var a,i;let t=e.message??"";(a=e.entity)!=null&&a.name&&(t=t.replace("$DEVICE NAME$",e.entity.name)),(i=e.node)!=null&&i.name&&(t=t.replace("$SITE NAME$",e.node.name));const n=Ii(e.triggeredValue),r=Ii(e.currentValue);return n&&(t=t.replace("$TRIGGER VALUE$",n)),r&&(t=t.replace("$CURRENT VALUE$",r)),e.unit&&(t=t.replace("$UNIT$",e.unit)),t.replace(" %","%")},yu={critical:{status:"critical",color:"var(--red-800)",icon:C2,label:"Critical"},high:{status:"error",color:"var(--danger)",icon:C2,label:"High"},medium:{status:"warning",color:"var(--warning)",icon:Fr,label:"Medium"},low:{status:"success",color:"var(--success-dark)",icon:qi,label:"Low"},incident:{status:"neutral",color:"var(--neutral-grey)",icon:h3,label:"Incident"}},IE=({alert:e,onClick:t,locale:n="en",className:r,t:a})=>{var M,w,b;const{t:i}=Ke(),o=a||i,s=!!t,c=yu[e.severity]??yu.critical,d=c.icon,f=[(M=e.node)==null?void 0:M.name,(w=e.entity)==null?void 0:w.name].filter(Boolean).join(": "),p=a5(e),m=o(`COMMON_TEXTS.${(b=e.severity)==null?void 0:b.toUpperCase()}`,{defaultValue:c.label}),g=O4(e.openedAt,n),C=()=>t==null?void 0:t(e),y=k=>{t&&(k.key==="Enter"||k.key===" ")&&(k.preventDefault(),t(e))};return u.jsx(D0,{className:r,options:{shadow:!1,interactive:s},onClick:s?C:void 0,onKeyDown:y,role:s?"button":void 0,tabIndex:s?0:void 0,style:{padding:16},children:u.jsx(jE,{children:u.jsxs(PE,{children:[u.jsx(VE,{$color:c.color,children:u.jsx(d,{size:18,weight:"fill"})}),u.jsxs(OE,{children:[f&&u.jsx(DE,{children:u.jsx(ot,{variant:"body-md-bold",style:{color:"var(--neutral-darkest)"},children:f})}),p&&u.jsx($E,{children:u.jsx(ot,{variant:"body-sm-regular",style:{color:"var(--neutral-medium)"},children:p})})]}),u.jsx(zE,{children:u.jsx(Qi,{status:c.status,label:m})}),u.jsx(RE,{children:u.jsx(ot,{variant:"body-sm-regular",style:{color:"var(--neutral-light)"},children:g})}),s&&u.jsx(GE,{children:u.jsx(Yi,{size:16})})]})})})},HE=v.div`
+`,Ii=e=>{if(e===""||e===null||e===void 0)return"";const t=Number(e);return Number.isNaN(t)?e:t.toFixed(1).replace(".0","")},a5=e=>{var a,i;let t=e.message??"";(a=e.entity)!=null&&a.name&&(t=t.replace("$DEVICE NAME$",e.entity.name)),(i=e.node)!=null&&i.name&&(t=t.replace("$SITE NAME$",e.node.name));const n=Ii(e.triggeredValue),r=Ii(e.currentValue);return n&&(t=t.replace("$TRIGGER VALUE$",n)),r&&(t=t.replace("$CURRENT VALUE$",r)),e.unit&&(t=t.replace("$UNIT$",e.unit)),t.replace(" %","%")},yu={critical:{status:"critical",color:"var(--danger)",icon:C2,label:"Critical"},high:{status:"error",color:"var(--danger)",icon:C2,label:"High"},medium:{status:"warning",color:"var(--warning)",icon:Fr,label:"Medium"},low:{status:"success",color:"var(--success-dark)",icon:qi,label:"Low"},incident:{status:"neutral",color:"var(--neutral-grey)",icon:h3,label:"Incident"}},IE=({alert:e,onClick:t,locale:n="en",className:r,t:a})=>{var M,w,b;const{t:i}=Ke(),o=a||i,s=!!t,c=yu[e.severity]??yu.critical,d=c.icon,f=[(M=e.node)==null?void 0:M.name,(w=e.entity)==null?void 0:w.name].filter(Boolean).join(": "),p=a5(e),m=o(`COMMON_TEXTS.${(b=e.severity)==null?void 0:b.toUpperCase()}`,{defaultValue:c.label}),g=O4(e.openedAt,n),C=()=>t==null?void 0:t(e),y=k=>{t&&(k.key==="Enter"||k.key===" ")&&(k.preventDefault(),t(e))};return u.jsx(D0,{className:r,options:{shadow:!1,interactive:s},onClick:s?C:void 0,onKeyDown:y,role:s?"button":void 0,tabIndex:s?0:void 0,style:{padding:16},children:u.jsx(jE,{children:u.jsxs(PE,{children:[u.jsx(VE,{$color:c.color,children:u.jsx(d,{size:20})}),u.jsxs(OE,{children:[f&&u.jsx(DE,{children:u.jsx(ot,{variant:"body-md-bold",style:{color:"var(--neutral-darkest)"},children:f})}),p&&u.jsx($E,{children:u.jsx(ot,{variant:"body-sm-regular",style:{color:"var(--neutral-medium)"},children:p})})]}),u.jsx(zE,{children:u.jsx(Qi,{status:c.status,label:m})}),u.jsx(RE,{children:u.jsx(ot,{variant:"body-sm-regular",style:{color:"var(--neutral-light)"},children:g})}),s&&u.jsx(GE,{children:u.jsx(Yi,{size:16})})]})})})},HE=v.div`
   display: flex;
   align-items: center;
 

package/dist/greenole-design-system.js

@@ -4371,16 +4371,16 @@ const R7 = g.div`
     `}
 
   ${({ $disabled: e }) => e && z`
-      background-color: #f9fafb;
-      border-color: #eaecf0;
-      color: #98a2b3;
+      background-color: var(--color-neutral-soft);
+      border-color: var(--color-neutral-lightest);
+      color: var(--color-neutral-medium);
       cursor: not-allowed;
     `}
 
   ${({ $readOnly: e, $disabled: t }) => e && !t && z`
-      background-color: #fafafa;
-      border-color: #d0d5dd;
-      color: #344054;
+      background-color: var(--color-neutral-soft);
+      border-color: var(--color-neutral-lightest);
+      color: var(--color-neutral-medium);
       cursor: default;
     `}
 `, Ys = g.span`
@@ -4405,17 +4405,17 @@ const R7 = g.div`
     opacity: 0.7;
   }
 
-  &:disabled {
-    color: #98a2b3;
-    cursor: not-allowed;
-  }
-
   &:read-only {
-    color: #667085;
+    color: var(--color-neutral-medium);
     background: transparent;
     cursor: default;
   }
 
+  &:disabled {
+    color: var(--color-neutral-medium);
+    cursor: not-allowed;
+  }
+
   &:focus {
     outline: none;
     box-shadow: none;
@@ -5802,21 +5802,21 @@ const R7 = g.div`
   flex-shrink: 0;
   color: var(--neutral-medium);
 `, Iu = Wi(
-  ({ status: e, label: t, size: n = "sm", onClick: r, tooltip: a, className: i }, o) => {
-    const s = !!r, l = !!a, u = (p) => {
-      r && (p.key === "Enter" || p.key === " ") && (p.preventDefault(), r());
-    }, d = /* @__PURE__ */ c.jsxs(
+  ({ status: e, label: t, size: n = "sm", onClick: r, tooltip: a, tooltipPosition: i = "top", className: o }, s) => {
+    const l = !!r, u = !!a, d = (f) => {
+      r && (f.key === "Enter" || f.key === " ") && (f.preventDefault(), r());
+    }, p = /* @__PURE__ */ c.jsxs(
       V9,
       {
-        ref: o,
-        className: i,
+        ref: s,
+        className: o,
         $size: n,
-        $clickable: s,
-        $hasTooltip: l,
+        $clickable: l,
+        $hasTooltip: u,
         onClick: r,
-        onKeyDown: u,
-        role: s ? "button" : void 0,
-        tabIndex: s ? 0 : void 0,
+        onKeyDown: d,
+        role: l ? "button" : void 0,
+        tabIndex: l ? 0 : void 0,
         children: [
           /* @__PURE__ */ c.jsx(O9, { $status: e, $size: n }),
           /* @__PURE__ */ c.jsx(
@@ -5830,18 +5830,19 @@ const R7 = g.div`
               children: t
             }
           ),
-          s && /* @__PURE__ */ c.jsx(D9, { children: /* @__PURE__ */ c.jsx(io, { size: n === "sm" ? 12 : 14, weight: "bold" }) })
+          l && /* @__PURE__ */ c.jsx(D9, { children: /* @__PURE__ */ c.jsx(io, { size: n === "sm" ? 12 : 14, weight: "bold" }) })
         ]
       }
     );
     return a ? /* @__PURE__ */ c.jsx("span", { style: { display: "inline-block" }, children: /* @__PURE__ */ c.jsx(
       fu,
       {
-        position: "top",
+        position: i,
         text: a,
-        children: d
+        darkMode: !0,
+        children: p
       }
-    ) }) : d;
+    ) }) : p;
   }
 );
 Iu.displayName = "StatusBadge";
@@ -6807,6 +6808,16 @@ const $9 = (e, t, n) => n ? "var(--neutral-lightest)" : e ? t : "var(--neutral-l
 `, _h = g.div`
   overflow-x: ${({ $isMobile: e }) => e ? "visible" : "auto"};
   width: 100%;
+
+  &:last-child {
+    border-bottom-left-radius: calc(var(--radius-16) - 1px);
+    border-bottom-right-radius: calc(var(--radius-16) - 1px);
+
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+  }
+
   ${({ $isMobile: e }) => e && z`
       padding: var(--spacing-4);
     `}
@@ -20146,7 +20157,9 @@ const Wo = (e) => {
   gap: 4px;
 `, fM = g.div`
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   gap: var(--spacing-3);
 `, mM = g.div`
   display: flex;
@@ -25377,8 +25390,11 @@ const Xw = ({
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 24px;
-  padding: 0 10px;
+  min-height: 24px;
+  max-width: 100%;
+  min-width: 0;
+  padding: 2px 10px;
+  box-sizing: border-box;
   border-radius: 4px;
   background: var(--neutral-lightest);
   color: var(--neutral-dark);
@@ -25392,6 +25408,7 @@ const Xw = ({
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   width: 16px;
   height: 16px;
   padding: 0;
@@ -25501,7 +25518,12 @@ const Xw = ({
               ft,
               {
                 variant: "body-sm-regular",
-                style: { fontSize: "13px", color: "var(--neutral-dark)" },
+                style: {
+                  fontSize: "13px",
+                  color: "var(--neutral-dark)",
+                  minWidth: 0,
+                  overflowWrap: "anywhere"
+                },
                 children: ee.key ? /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
                   /* @__PURE__ */ c.jsxs(pA, { children: [
                     ee.key,
@@ -26168,7 +26190,7 @@ const Xw = ({
 }, V3 = {
   critical: {
     status: "critical",
-    color: "var(--red-800)",
+    color: "var(--danger)",
     icon: k2,
     label: "Critical"
   },
@@ -26220,7 +26242,7 @@ const Xw = ({
       tabIndex: s ? 0 : void 0,
       style: { padding: 16 },
       children: /* @__PURE__ */ c.jsx(jA, { children: /* @__PURE__ */ c.jsxs(PA, { children: [
-        /* @__PURE__ */ c.jsx(VA, { $color: l.color, children: /* @__PURE__ */ c.jsx(u, { size: 18, weight: "fill" }) }),
+        /* @__PURE__ */ c.jsx(VA, { $color: l.color, children: /* @__PURE__ */ c.jsx(u, { size: 20 }) }),
         /* @__PURE__ */ c.jsxs(OA, { children: [
           d && /* @__PURE__ */ c.jsx(DA, { children: /* @__PURE__ */ c.jsx(
             ft,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "greenole-design-system",
-  "version": "1.1.112",
+  "version": "1.1.113",
   "type": "module",
   "main": "dist/greenole-design-system.cjs.js",
   "module": "dist/greenole-design-system.js",
@@ -32,7 +32,7 @@
     "storybook": "npm run generate:tokens && storybook dev -p 6006",
     "build-storybook": "npm run generate:tokens && storybook build",
     "deploy-storybook": "storybook-to-ghpages",
-    "release": "npm run build && npm publish && npm run build-storybook && npm run deploy-storybook",
+    "release": "npm run build && npm publish --tag latest && npm run build-storybook && npm run deploy-storybook",
     "create-component": "node scripts/create-component.js",
     "commit": "node scripts/commit.js"
   },