@chromatic-com/tetra 3.2.12 → 3.2.13--canary.145.5138e7d.0

package/dist/index.js

@@ -291,7 +291,6 @@
   bottom: ${e=>e.type==="user"?-2:-4}px;
   height: ${e=>e.type==="user"?100:70}%;
   width: ${e=>e.type==="user"?100:70}%;
-  vertical-align: top;
 
   path {
     fill: ${h.slate300};
@@ -319,7 +318,7 @@
       font-size: ${B[16]};
       line-height: ${ge.large}px;
     `}
-`,Ba=({isLoading:e=false,username:t="loading",src:o,size:r="medium",type:n="user",...s})=>{let a=i__namespace.default.createElement(Jp,{name:n==="user"?"useralt":"repository",type:n}),l={};return e?(l["aria-busy"]=true,l["aria-label"]="Loading avatar ..."):o?a=i__namespace.default.createElement("img",{src:o,alt:t}):(l["aria-label"]=t,a=i__namespace.default.createElement(ed,{size:r,"aria-hidden":"true"},t.substring(0,1))),i__namespace.default.createElement(Qp,{size:r,isLoading:e,src:o,type:n,...l,...s},a)};var wn=react.css`
+`,Ba=({isLoading:e=false,username:t="loading",src:o,size:r="medium",type:n="user",...s})=>{let a=i__namespace.default.createElement(Jp,{"aria-hidden":"true",name:n==="user"?"useralt":"repository",type:n}),l={};return e?(l["aria-busy"]=true,l["aria-label"]="Loading avatar ...",l.role="img"):o?a=i__namespace.default.createElement("img",{src:o,alt:t}):(l["aria-label"]=t,l.role="img",a=i__namespace.default.createElement(ed,{size:r,"aria-hidden":"true"},t.substring(0,1))),i__namespace.default.createElement(Qp,{size:r,isLoading:e,src:o,type:n,...l,...s},a)};var wn=react.css`
   box-sizing: border-box;
 
   > * {
@@ -486,8 +485,8 @@
   }
 
   &[data-state='open'] {
-    background-color: ${({variant:e})=>e==="light"?`hsl(from ${h.blue600} h s l / 0.07)`:`hsl(from ${h.blue400} h s l / 0.07)`};
-    color: ${({variant:e})=>e==="light"?h.blue600:h.blue400};
+    background-color: ${({variant:e})=>e==="light"?`hsl(from ${h.blue700} h s l / 0.07)`:h.slate800};
+    color: ${({variant:e})=>e==="light"?h.blue700:h.blue400};
   }
 `,fl=({children:e,variant:t="light"})=>i__namespace.default.createElement(i__namespace.default.Fragment,null,i__namespace.default.createElement(vd,{variant:t},e));var xd=Xe__default.default(Kt__namespace.Content)`
   margin: 0;
@@ -882,11 +881,11 @@
 `,D2=({title:e,description:t,image:o,linkWrapper:r,href:n})=>i__namespace.default.createElement(Bo,{asChild:true},i__namespace.default.createElement(H2,{href:n,LinkWrapper:r},i__namespace.default.createElement(Jt,{paddingX:3,paddingY:3,gap:5},i__namespace.default.createElement(Jt,{gap:.5},i__namespace.default.createElement(je,{as:"div",lineHeightAuto:true,variant:"body14",fontWeight:"bold"},e),i__namespace.default.createElement(je,{as:"div",variant:"body14",color:"slate600"},t)),i__namespace.default.createElement(Z2,{src:o,alt:""})))),Jl=({item:e})=>{var t;return i__namespace.default.createElement(k2,null,(t=e.menu)==null?void 0:t.map((o,r)=>i__namespace.default.createElement(L2,{key:r,bg:(o==null?void 0:o.backgroundColor)||"white",index:r},o.content.map(n=>i__namespace.default.createElement(i.Fragment,{key:n.title},n.type==="separator"&&i__namespace.default.createElement(E2,{index:r},i__namespace.default.createElement(je,{variant:"subheading",color:"slate600"},n.title)),n.type==="link"&&i__namespace.default.createElement(fs,{content:n}),n.type==="card"&&i__namespace.default.createElement(D2,{...n}))))))};var F2=Xe__default.default(Xl,{shouldForwardProp:e=>e!=="theTheme"&&e!=="isActive"})`
   ${Ln}
   background-color: ${({isActive:e})=>e&&"rgba(30, 167, 253, 0.07)"};
-  color: ${({isActive:e,theTheme:t})=>e?t==="light"?h.blue700:h.blue500:t==="light"?h.slate800:h.white};
+  color: ${({isActive:e,theTheme:t})=>e?t==="light"?h.blue700:h.blue400:t==="light"?h.slate800:h.white};
 
   &[data-state='open'] {
-    background-color: rgba(30, 167, 253, 0.14);
-    color: ${({theTheme:e})=>e==="light"?h.blue700:h.blue500};
+    background-color: rgba(30, 167, 253, 0.07);
+    color: ${({theTheme:e})=>e==="light"?h.blue700:h.blue400};
   }
 
   &[data-state='open'] > .CaretDown {
@@ -1328,8 +1327,8 @@
   }
 
   &[data-state='open'] {
-    background-color: ${({variant:e})=>e==="light"?`hsl(from ${h.blue600} h s l / 0.07)`:`hsl(from ${h.blue400} h s l / 0.07)`};
-    color: ${({variant:e})=>e==="light"?h.blue600:h.blue400};
+    background-color: ${({variant:e})=>e==="light"?`hsl(from ${h.blue700} h s l / 0.07)`:h.slate800};
+    color: ${({variant:e})=>e==="light"?h.blue700:h.blue400};
   }
 
   &[data-state='open'] > .CaretDown {
@@ -1391,13 +1390,13 @@
     `};
 
   ${e=>e.variant==="positive"&&react.css`
-      color: ${h.green500};
+      color: ${h.green600};
     `};
   ${e=>e.variant==="negative"&&react.css`
       color: ${h.orange500};
     `};
   ${e=>e.variant==="warning"&&react.css`
-      color: ${h.yellow500};
+      color: hsl(from ${h.yellow500} h s calc(l * 0.75) / 1);
     `};
   ${e=>e.variant==="neutral"&&react.css`
       color: ${h.slate600};
@@ -1577,7 +1576,7 @@
       font-size: ${B[12]};
       line-height: 14px;
     `}
-  color: ${h.slate400};
+  color: ${e=>e.inverse?h.slate400:h.slate600};
 `,Eg=Xe__default.default.div`
   display: flex;
   align-items: center;
@@ -1613,7 +1612,7 @@
   ${e=>e.variant==="left-aligned"&&react.css`
       display: none;
     `}
-`,Ju=({variant:e="default",theme:t="light",balanced:o,text:r,avatarUrl:n,name:s,jobTitle:a,logo:l,companyName:c,...f})=>{let u=t==="dark";return i__namespace.default.createElement("div",{...f},i__namespace.default.createElement(Mg,{variant:e,inverse:u},i__namespace.default.createElement(Pg,{variant:e,inverse:u,balanced:o},r),i__namespace.default.createElement(Ag,null,i__namespace.default.createElement(Sg,null,i__namespace.default.createElement(Tg,{variant:e,size:e==="compact"?"medium":"large",username:s,src:n}),i__namespace.default.createElement(Vg,{variant:e},i__namespace.default.createElement(kg,{variant:e,inverse:u},s),i__namespace.default.createElement(Lg,{variant:e},a))),i__namespace.default.createElement(Eg,{variant:e,inverse:u},i__namespace.default.createElement("img",{src:l,alt:c,loading:"lazy"})))))};var Hg=Xe__default.default.label`
+`,Ju=({variant:e="default",theme:t="light",balanced:o,text:r,avatarUrl:n,name:s,jobTitle:a,logo:l,companyName:c,...f})=>{let u=t==="dark";return i__namespace.default.createElement("div",{...f},i__namespace.default.createElement(Mg,{variant:e,inverse:u},i__namespace.default.createElement(Pg,{variant:e,inverse:u,balanced:o},r),i__namespace.default.createElement(Ag,null,i__namespace.default.createElement(Sg,null,i__namespace.default.createElement(Tg,{variant:e,size:e==="compact"?"medium":"large",username:s,src:n}),i__namespace.default.createElement(Vg,{variant:e},i__namespace.default.createElement(kg,{variant:e,inverse:u},s),i__namespace.default.createElement(Lg,{variant:e,inverse:u},a))),i__namespace.default.createElement(Eg,{variant:e,inverse:u},i__namespace.default.createElement("img",{src:l,alt:c,loading:"lazy"})))))};var Hg=Xe__default.default.label`
   display: inline-block;
   ${k.body14}
   font-weight: ${L.semibold};