@procore/core-react 11.16.2 → 11.18.0

package/coverage/lcov-report/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">82.91% </span>
+                <span class="strong">82.92% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>12727/15350</span>
+                <span class='fraction'>12740/15363</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">65.27% </span>
+                <span class="strong">65.29% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>5787/8865</span>
+                <span class='fraction'>5792/8871</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">71.68% </span>
+                <span class="strong">71.71% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>2058/2871</span>
+                <span class='fraction'>2061/2874</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">82.4% </span>
+                <span class="strong">82.41% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>10667/12945</span>
+                <span class='fraction'>10676/12954</span>
             </div>
         
             
@@ -170,17 +170,17 @@
 
 <tr>
 	<td class="file high" data-value="src/Banner"><a href="src/Banner/index.html">src/Banner</a></td>
-	<td data-value="90.94" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 90%"></div><div class="cover-empty" style="width: 10%"></div></div>
+	<td data-value="91.3" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 91%"></div><div class="cover-empty" style="width: 9%"></div></div>
 	</td>
-	<td data-value="90.94" class="pct high">90.94%</td>
-	<td data-value="287" class="abs high">261/287</td>
-	<td data-value="78.37" class="pct medium">78.37%</td>
-	<td data-value="74" class="abs medium">58/74</td>
-	<td data-value="65.85" class="pct medium">65.85%</td>
-	<td data-value="82" class="abs medium">54/82</td>
-	<td data-value="90.14" class="pct high">90.14%</td>
-	<td data-value="213" class="abs high">192/213</td>
+	<td data-value="91.3" class="pct high">91.3%</td>
+	<td data-value="299" class="abs high">273/299</td>
+	<td data-value="78.75" class="pct medium">78.75%</td>
+	<td data-value="80" class="abs medium">63/80</td>
+	<td data-value="67.05" class="pct medium">67.05%</td>
+	<td data-value="85" class="abs medium">57/85</td>
+	<td data-value="90.54" class="pct high">90.54%</td>
+	<td data-value="222" class="abs high">201/222</td>
 	</tr>
 
 <tr>
@@ -1359,7 +1359,7 @@
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="13" class="abs high">13/13</td>
+	<td data-value="14" class="abs high">14/14</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="2" class="abs high">2/2</td>
 	<td data-value="100" class="pct high">100%</td>
@@ -1736,7 +1736,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Avatar/Avatar.coverage.stories.tsx.html

@@ -655,7 +655,7 @@ export const Variations = () => {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Avatar/Avatar.demo.stories.tsx.html

@@ -361,7 +361,7 @@ Demo.parameters = {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Avatar/Avatar.styles.ts.html

@@ -502,7 +502,7 @@ export const StyledAvatarContainer = styled.div<StyledAvatarProps>`
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Avatar/Avatar.tsx.html

@@ -646,7 +646,7 @@ export const Avatar = addSubcomponents(
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Avatar/index.html

@@ -161,7 +161,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Avatar/index.ts.html

@@ -88,7 +88,7 @@ export {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/AvatarStack/AvatarStack.constants.ts.html

@@ -97,7 +97,7 @@ export const colorsOrder: Color[] = ['blue40', 'purple40', 'orange40', 'gray40']
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/AvatarStack/AvatarStack.styles.ts.html

@@ -229,7 +229,7 @@ export const StyledContactItem = styled(ContactItem)`
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/AvatarStack/AvatarStack.tsx.html

@@ -1495,7 +1495,7 @@ AvatarStack.displayName = 'AvatarStack'
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/AvatarStack/index.html

@@ -146,7 +146,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/AvatarStack/index.ts.html

@@ -76,7 +76,7 @@ export { AvatarStackItem, AvatarStackProps } from './AvatarStack.types'
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/AvatarStack/mocks/getAvatarMocks.tsx.html

@@ -1123,7 +1123,7 @@ export const getAvatarMocks = (slice = 23) => {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/AvatarStack/mocks/images.ts.html

@@ -115,7 +115,7 @@ export const logos = [logo1, logo2, logo3, logo4, logo5]
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/AvatarStack/mocks/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Badge/Badge.styles.ts.html

@@ -112,7 +112,7 @@ export const StyledBadgeLabel = styled.span<BadgeLabelProps>`
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Badge/Badge.tsx.html

@@ -145,7 +145,7 @@ export const Badge = addSubcomponents(
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Badge/index.html

@@ -131,7 +131,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Badge/index.ts.html

@@ -76,7 +76,7 @@ export { BadgeLabelProps, BadgeProps } from './Badge.types'
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Banner/Banner.coverage.stories.tsx.html

@@ -1162,7 +1162,7 @@ export const OnlyBody = () => (
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Banner/Banner.demo.stories.tsx.html

@@ -261,7 +261,27 @@
 <a name='L196'></a><a href='#L196'>196</a>
 <a name='L197'></a><a href='#L197'>197</a>
 <a name='L198'></a><a href='#L198'>198</a>
-<a name='L199'></a><a href='#L199'>199</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -280,6 +300,12 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -348,6 +374,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -458,14 +492,26 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { Upload, Wifi, WifiOff, Wrench } from '@procore/core-icons/dist'
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { Info, Upload, Wifi, WifiOff, Wrench } from '@procore/core-icons/dist'
 import React from 'react'
 import { Button } from '../Button/Button'
 import { FlexList } from '../FlexList/FlexList'
 import { UL } from '../Semantic/Semantic'
 import { exampleText, Ipsum } from '../_storyHelpers_/constants'
-import { ActionBanner, Banner, ErrorBanner, InfoBanner } from './Banner'
+import {
+  ActionBanner,
+  Banner,
+  ErrorBanner,
+  InfoBanner,
+  UNSAFE_MiniBanner,
+} from './Banner'
 import { BannerIconProps, BannerVariant } from './Banner.types'
 &nbsp;
 interface BannerDemoProps {
@@ -542,6 +588,14 @@ export const DemoPresets = ({
           &lt;/BannerComponent&gt;
         )
       })}
+      &lt;UNSAFE_MiniBanner style={{ width: '633px' }}&gt;
+        &lt;Banner.Icon icon={&lt;Info size="sm" /&gt;} /&gt;
+        &lt;Banner.Content&gt;
+          FPO &lt;b&gt;Drawing Log Subscribers&lt;/b&gt; will be notified any time changes
+          are made to the Drawings, including Revisions and published Markup.
+          Read our support page to &lt;a href="#"&gt;learn more.&lt;/a&gt;
+        &lt;/Banner.Content&gt;
+      &lt;/UNSAFE_MiniBanner&gt;
     &lt;/FlexList&gt;
   )
 }
@@ -598,7 +652,13 @@ Demo.argTypes = {
     defaultValue: 'action',
     control: {
       type: 'select',
-      options: ['action', 'error', 'info', 'success'],
+      options: [
+        'action',
+        'error',
+        'info',
+        'success',
+        'UNSAFE_attention_emphasized',
+      ],
     },
   },
   bodyContent: {
@@ -664,7 +724,7 @@ DemoExpandableContent.argTypes = { ...Demo.argTypes }
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Banner/Banner.styles.ts.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>35/35</span>
+                <span class='fraction'>39/39</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">96.66% </span>
+                <span class="strong">97.05% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>29/30</span>
+                <span class='fraction'>33/34</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/5</span>
+                <span class='fraction'>6/6</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>31/31</span>
+                <span class='fraction'>35/35</span>
             </div>
         
             
@@ -236,7 +236,46 @@
 <a name='L171'></a><a href='#L171'>171</a>
 <a name='L172'></a><a href='#L172'>172</a>
 <a name='L173'></a><a href='#L173'>173</a>
-<a name='L174'></a><a href='#L174'>174</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">11x</span>
+<a name='L174'></a><a href='#L174'>174</a>
+<a name='L175'></a><a href='#L175'>175</a>
+<a name='L176'></a><a href='#L176'>176</a>
+<a name='L177'></a><a href='#L177'>177</a>
+<a name='L178'></a><a href='#L178'>178</a>
+<a name='L179'></a><a href='#L179'>179</a>
+<a name='L180'></a><a href='#L180'>180</a>
+<a name='L181'></a><a href='#L181'>181</a>
+<a name='L182'></a><a href='#L182'>182</a>
+<a name='L183'></a><a href='#L183'>183</a>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</a>
+<a name='L187'></a><a href='#L187'>187</a>
+<a name='L188'></a><a href='#L188'>188</a>
+<a name='L189'></a><a href='#L189'>189</a>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</a>
+<a name='L193'></a><a href='#L193'>193</a>
+<a name='L194'></a><a href='#L194'>194</a>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-yes">11x</span>
@@ -252,6 +291,7 @@
 <span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">11x</span>
@@ -273,6 +313,18 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">11x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">34x</span>
@@ -409,6 +461,32 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">11x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import styled, { css, keyframes } from 'styled-components'
 import { StyledButton } from '../Button/Button.styles'
 import { DropdownButton } from '../Dropdown/Dropdown'
@@ -423,7 +501,8 @@ import { colors } from '../_styles/colors'
 import { focusable } from '../_styles/mixins'
 import { getShadow } from '../_styles/shadows'
 import { spacing } from '../_styles/spacing'
-import { BannerProps } from './Banner.types'
+import { BannerProps, BannerVariant } from './Banner.types'
+import { variant } from '../Link/Link.coverage.stories'
 &nbsp;
 const bannerLeft = 8
 &nbsp;
@@ -444,8 +523,20 @@ const bannerVariantColors = {
     primary: colors.green30,
     secondary: colors.green96,
   },
+  UNSAFE_attention_emphasized: {
+    primary: colors.orange50,
+    secondary: colors.orange98,
+  },
 } as const
 &nbsp;
+const miniBannerVariantColors = {
+  action: colors.yellow50,
+  error: colors.red50,
+  info: colors.blue50,
+  success: colors.green50,
+  UNSAFE_attention_emphasized: colors.green50,
+}
+&nbsp;
 const bannerShadow = getShadow(1, 'bottom')
 &nbsp;
 const expandContent = (maxHeight: number) =&gt; keyframes`
@@ -582,6 +673,32 @@ export const StyledAction = styled.div`
     }
   }
 `
+&nbsp;
+function getMiniBannerIconColor({ variant }: { variant: BannerVariant }) {
+  return css`
+    &amp; ${StyledIconContainer} {
+      color: ${miniBannerVariantColors[variant]};
+    }
+  `
+}
+&nbsp;
+export const StyledMiniBannerContainer = styled.div&lt;{
+  variant: BannerVariant
+}&gt;`
+  align-items: center;
+  background-color: ${colors.gray96};
+  display: flex;
+  justify-content: space-between;
+  padding: 0 ${spacing.md}px;
+&nbsp;
+  ${getTypographyIntent('small')}
+&nbsp;
+  ${getMiniBannerIconColor}
+&nbsp;
+  &amp; ${StyledContent} {
+    margin: ${spacing.sm}px;
+  }
+`
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -589,7 +706,7 @@ export const StyledAction = styled.div`
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-06-09T19:54:52.181Z
+                at 2023-06-16T19:35:42.099Z
             </div>
         <script src="../../prettify.js"></script>
         <script>