polaris_view_components 0.8.1 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4d4484aea870437d2c04e9962e86b40d7ebfcfd78119900fd9e5fde4cf225301
-  data.tar.gz: 8afb88abb96c45259eebbf58af6229faa543afae16c38f96858eaa92e9944795
+  metadata.gz: c25ff3636898168d8b63d341155e80003d847ee4e3888150382c59275d9df5d0
+  data.tar.gz: b865d3b96a3e46b09a76d16699935314403a5efe407ef5f1dd759457f057c4f0
 SHA512:
-  metadata.gz: 763b2fef888918919bf55c8e3fad976d60727b79b432683d72b4227a178ee6c3ec3f048bc27c6b8b29107b6f8fec5720f07136b16c21202e9e0a427c4bce6955
-  data.tar.gz: 0b5fdf681d13bab109bf60231bcf9b1fdbd79d86d87859d8df41bd426b1daaf2f779ef38d445806598c3ab974139edda3486514d917d8280eabff654507a021e
+  metadata.gz: 459107009e35c2eef5ccfca95eb3708b90e9ea5f45eecb23e9e68b17566a16ba95341e646339515129e20ee5b18bfcb3cf3a3195afc18b5a6ce79946398226de
+  data.tar.gz: 3992aad996e4a9f2c38f2d915bd11af2106e6ee54cb5421a9a463f18820c0877eadf9e4b7823a02cf1c6e2995ef09f1019730a3986b4136eb50615e67a1c0b41

data/app/assets/icons/polaris/AnalyticsMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 11a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0v-5zm4-5a1 1 0 1 1 2 0v10a1 1 0 1 1-2 0V6zm4-2a1 1 0 1 1 2 0v12a1 1 0 1 1-2 0V4zM3 8a1 1 0 0 1 2 0v8a1 1 0 1 1-2 0V8z"/></svg>

data/app/assets/icons/polaris/AppsMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 17a2 2 0 0 1-2-2v-4h6v6H5zm6 0v-6h6v4a2 2 0 0 1-2 2h-4zM3 5v4h6V3H5a2 2 0 0 0-2 2zm8 1a1 1 0 0 1 1-1h1V4a1 1 0 1 1 2 0v1h1a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0V7h-1a1 1 0 0 1-1-1z"/></svg>

data/app/assets/icons/polaris/BlockMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3.6A1.6 1.6 0 0 1 3.6 2H7a1 1 0 0 1 0 2H4v3a1 1 0 0 1-2 0V3.6zM16.4 2A1.6 1.6 0 0 1 18 3.6V7a1 1 0 1 1-2 0V4h-3a1 1 0 1 1 0-2h3.4zm0 16H13a1 1 0 1 1 0-2h3v-3a1 1 0 1 1 2 0v3.4a1.6 1.6 0 0 1-1.6 1.6zM3.6 18A1.6 1.6 0 0 1 2 16.4V13a1 1 0 1 1 2 0v3h3a1 1 0 1 1 0 2H3.6z"/></svg>

data/app/assets/icons/polaris/ButtonMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5.5A1.5 1.5 0 0 1 3.5 4h13A1.5 1.5 0 0 1 18 5.5v4.95l-4.014-2.59c-1.71-1.104-3.953.19-3.853 2.224L10.278 13H3.5A1.5 1.5 0 0 1 2 11.5v-6z"/><path d="M12.131 9.999a.5.5 0 0 1 .77-.445l4.869 3.142a.5.5 0 0 1-.021.853l-1.425.823 1.229 2.128a1 1 0 1 1-1.732 1l-1.23-2.128-1.424.822a.5.5 0 0 1-.75-.408L12.131 10z"/></svg>

data/app/assets/icons/polaris/CaretDownMinor.svg

@@ -1 +1 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m5 8 5 5 5-5H5z"/></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13.098 8H6.902c-.751 0-1.172.754-.708 1.268L9.292 12.7c.36.399 1.055.399 1.416 0l3.098-3.433C14.27 8.754 13.849 8 13.098 8z"/></svg>

data/app/assets/icons/polaris/CaretUpMinor.svg

@@ -1 +1 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m15 12-5-5-5 5h10z"/></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6.902 12h6.196c.751 0 1.172-.754.708-1.268L10.708 7.3c-.36-.399-1.055-.399-1.416 0l-3.098 3.433C5.73 11.246 6.151 12 6.902 12z"/></svg>

data/app/assets/icons/polaris/CircleTickMinor.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2 10a8 8 0 1 0 16 0 8 8 0 0 0-16 0zm12.16-1.44a.8.8 0 0 0-1.12-1.12L9.2 11.28 7.36 9.44a.8.8 0 0 0-1.12 1.12l2.4 2.4c.32.32.8.32 1.12 0l4.4-4.4z"/></svg>

data/app/assets/icons/polaris/Columns3Minor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16 2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12zm-2.667 2H16v12h-2.667V4zM8.667 4h2.666v12H8.667V4zm-2 0H4v12h2.667V4z"/></svg>

data/app/assets/icons/polaris/CustomersMinor.svg

@@ -1 +1 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.11 2.24a3.44 3.44 0 0 0-3.44 3.43 3.44 3.44 0 0 0 6.88 0 3.44 3.44 0 0 0-3.44-3.43zm0 15.46c2.8 0 5.27-1.36 6.84-3.43-1.57-2.08-4.04-3.44-6.84-3.44s-5.26 1.36-6.83 3.44a8.55 8.55 0 0 0 6.83 3.43z"/></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-3.5 8a2.5 2.5 0 0 1-1.768-4.268C5.322 12.155 7.2 11 10 11s4.678 1.155 5.268 1.732A2.5 2.5 0 0 1 13.5 17h-7z"/></svg>

data/app/assets/icons/polaris/DiscountsMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 3.072a2 2 0 0 0-.99 1.939 2 2 0 0 0-1.826 3.163 2 2 0 0 0 0 3.652A2 2 0 0 0 5.01 14.99a2 2 0 0 0 3.164 1.828 2 2 0 0 0 3.652 0 2 2 0 0 0 3.164-1.827 2 2 0 0 0 1.826-3.164 2 2 0 0 0 0-3.652A2 2 0 0 0 14.99 5.01a2 2 0 0 0-3.163-1.826 2 2 0 0 0-3.654 0A2 2 0 0 0 6 3.072zm6.832 4.483a1 1 0 1 0-1.664-1.11l-4 6a1 1 0 0 0 1.664 1.11l4-6zM7 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm7 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>

data/app/assets/icons/polaris/DropdownMinor.svg

@@ -1 +1 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m5 8 5 5 5-5H5z"/></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13.098 8H6.902c-.751 0-1.172.754-.708 1.268L9.292 12.7c.36.399 1.055.399 1.416 0l3.098-3.433C14.27 8.754 13.849 8 13.098 8z"/></svg>

data/app/assets/icons/polaris/FinancesMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H5zm7 6.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/><path fill-rule="evenodd" d="M16 15v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1v7a1 1 0 0 0 1 1h13z"/></svg>

data/app/assets/icons/polaris/FinancesMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 3a3 3 0 0 0-3 3v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H6a1 1 0 0 1 0-2h9a1 1 0 1 0 0-2H6zm8 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>

data/app/assets/icons/polaris/HomeMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.555 3.168a1 1 0 0 0-1.11 0L3.891 6.87A2 2 0 0 0 3 8.535V15a2 2 0 0 0 2 2h2a1 1 0 0 0 1-1v-4h4v4a1 1 0 0 0 1 1h2a2 2 0 0 0 2-2V8.535a2 2 0 0 0-.89-1.664l-5.555-3.703z"/></svg>

data/app/assets/icons/polaris/MarketingMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 4a5 5 0 0 0-.163 9.997l.662 1.986a7 7 0 1 1 6.484-6.484l-1.986-.662A5 5 0 0 0 9 4z"/><path d="M9 8a1 1 0 0 0 0 2v2a3 3 0 1 1 3-3h-2a1 1 0 0 0-1-1z"/><path d="M11.316 10.051a1 1 0 0 0-1.265 1.265l2 6a1 1 0 0 0 1.898 0l.842-2.525 2.525-.842a1 1 0 0 0 0-1.898l-6-2z"/></svg>

data/app/assets/icons/polaris/OnlineStoreMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2a1 1 0 1 1 0 2H6a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-1a1 1 0 1 1 0-2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5zm1.986 3.836a1 1 0 0 0-1.972.329C5.237 8.504 6.579 11 10 11c3.42 0 4.763-2.496 4.986-3.835a1 1 0 1 0-1.972-.33C12.904 7.497 12.179 9 10 9 7.82 9 7.097 7.496 6.986 6.836z"/></svg>

data/app/assets/icons/polaris/OrdersMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.735 5.507A3 3 0 0 1 6.695 3h6.61a3 3 0 0 1 2.96 2.507L17 10v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5l.735-4.493zM6.695 5a1 1 0 0 0-.987.836L5 10v1h1.394a3 3 0 0 1 1.665.504l.832.555a2 2 0 0 0 2.218 0l.832-.555A3 3 0 0 1 13.607 11H15v-1l-.708-4.164A1 1 0 0 0 13.306 5H6.694z"/></svg>

data/app/assets/icons/polaris/ProductsMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.408 3H16a1 1 0 0 1 1 1v5.592a2 2 0 0 1-.57 1.399l-5.162 5.277a2.5 2.5 0 0 1-3.536 0l-4-4a2.5 2.5 0 0 1 0-3.536l.008-.008L9.01 3.57A2 2 0 0 1 10.407 3zM13.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>

data/app/assets/icons/polaris/QuestionMarkInverseMajor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-7.071.929A10 10 0 1 1 17.07 17.07 10 10 0 0 1 2.93 2.93z"/><path d="M11.126 13.002H8.99V11.86c.01-1.966.492-2.254 1.374-2.782.093-.056.19-.114.293-.178.73-.459 1.292-1.038 1.292-1.883 0-.948-.743-1.564-1.666-1.564-.852 0-1.657.398-1.712 1.533H6.305c.06-2.294 1.877-3.487 3.99-3.487 2.306 0 3.894 1.447 3.894 3.488 0 1.382-.695 2.288-1.806 2.952l-.237.144c-.79.475-1.009.607-1.02 1.777v1.142zm.17 2.012a1.344 1.344 0 0 1-1.327 1.328 1.32 1.32 0 0 1-1.227-1.834 1.318 1.318 0 0 1 1.227-.81c.712 0 1.322.592 1.328 1.316h-.001z"/></svg>

data/app/assets/icons/polaris/QuestionMarkInverseMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 12H9v-.148c0-.876.306-1.499 1-1.852.385-.195 1-.568 1-1a1.001 1.001 0 0 0-2 0H7c0-1.654 1.346-3 3-3s3 1 3 3-2 2.165-2 3zm-2 3h2v-2H9v2z"/><path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-8 6a8 8 0 1 1 16 0 8 8 0 0 1-16 0z"/></svg>

data/app/assets/icons/polaris/SelectMinor.svg

@@ -1 +1 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"/></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7.676 9h4.648c.563 0 .879-.603.53-1.014L10.531 5.24a.708.708 0 0 0-1.062 0L7.145 7.986C6.798 8.397 7.113 9 7.676 9zm4.648 2H7.676c-.563 0-.878.603-.53 1.014l2.323 2.746c.27.32.792.32 1.062 0l2.323-2.746c.349-.411.033-1.014-.53-1.014z"/></svg>

data/app/assets/icons/polaris/TitleMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 2a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0 2 2 0 0 1 2-2h2v10.999A1 1 0 0 1 7 16h-.001A1 1 0 0 0 7 18h6a1 1 0 1 0 0-2 1 1 0 0 1-1-1V4h2a2 2 0 0 1 2 2 1 1 0 1 0 2 0V3a1 1 0 0 0-1-1H3z"/></svg>

data/app/assets/icons/polaris/WandMinor.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.44 15.56a1.5 1.5 0 0 1 0-2.12l6.792-6.793 3.121 3.12-6.792 6.794a1.5 1.5 0 0 1-2.122 0l-1-1zm11.328-7.206L16.56 6.56a1.5 1.5 0 0 0 0-2.122l-1-1a1.5 1.5 0 0 0-2.122 0l-1.793 1.793 3.122 3.122zM13 12c1 0 2-1 2-2 0 1 1 2 2 2-1 0-2 1-2 2 0-1-1-2-2-2zM6 5c1 0 2-1 2-2 0 1 1 2 2 2-1 0-2 1-2 2 0-1-1-2-2-2z"/></svg>

data/app/assets/javascripts/polaris_view_components/collapsible_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  toggle() {
+    if (this.isClosed) {
+      this.element.style.maxHeight = "none"
+      this.element.style.overflow = "visible"
+      this.element.classList.remove("Polaris-Collapsible--isFullyClosed")
+    } else {
+      this.element.style.maxHeight = "0px"
+      this.element.style.overflow = "hidden"
+      this.element.classList.add("Polaris-Collapsible--isFullyClosed")
+    }
+  }
+
+  get isClosed() {
+    return this.element.classList.contains("Polaris-Collapsible--isFullyClosed")
+  }
+}

data/app/assets/javascripts/polaris_view_components/index.js

@@ -1,5 +1,6 @@
 import Autocomplete from './autocomplete_controller'
 import Button from './button_controller'
+import Collapsible from './collapsible_controller'
 import Dropzone from './dropzone_controller'
 import Frame from './frame_controller'
 import Modal from './modal_controller'
@@ -17,6 +18,7 @@ export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextF
 export function registerPolarisControllers(application) {
   application.register('polaris-autocomplete', Autocomplete)
   application.register('polaris-button', Button)
+  application.register('polaris-collapsible', Collapsible)
   application.register('polaris-dropzone', Dropzone)
   application.register('polaris-frame', Frame)
   application.register('polaris-modal', Modal)

data/app/assets/javascripts/polaris_view_components/polaris_controller.js

@@ -17,6 +17,10 @@ export default class extends Controller {
     this.findElement("toast").show()
   }
 
+  toggleCollapsible() {
+    this.findElement("collapsible").toggle()
+  }
+
   // Private
 
   findElement(type) {

data/app/assets/javascripts/polaris_view_components/toast_controller.js

@@ -37,8 +37,10 @@ export default class extends Controller {
   }
 
   getStyle(position) {
-    const translateIn = -80 * position
-    const translateOut = 150 - (80 * position)
+    const height = this.element.offsetHeight + this.heightOffset
+    const translateIn = height * -1
+    const translateOut = 150 - height
+
     return `--toast-translate-y-in: ${translateIn}px; --toast-translate-y-out: ${translateOut}px;`
   }
 
@@ -65,4 +67,13 @@ export default class extends Controller {
   get position() {
     return this.visibleToasts.filter(el => !this.element.isEqualNode(el)).length + 1
   }
+
+  get heightOffset() {
+    return this.visibleToasts
+      .filter(el => {
+        return !this.element.isEqualNode(el) && this.element.dataset.position > el.dataset.position
+      })
+      .map(el => el.offsetHeight)
+      .reduce((a, b) => a + b, 0)
+  }
 }

data/app/assets/javascripts/polaris_view_components.js

@@ -165,6 +165,23 @@ class Button extends Controller {
   }
 }
 
+class Collapsible extends Controller {
+  toggle() {
+    if (this.isClosed) {
+      this.element.style.maxHeight = "none";
+      this.element.style.overflow = "visible";
+      this.element.classList.remove("Polaris-Collapsible--isFullyClosed");
+    } else {
+      this.element.style.maxHeight = "0px";
+      this.element.style.overflow = "hidden";
+      this.element.classList.add("Polaris-Collapsible--isFullyClosed");
+    }
+  }
+  get isClosed() {
+    return this.element.classList.contains("Polaris-Collapsible--isFullyClosed");
+  }
+}
+
 const dragEvents = [ "dragover", "dragenter", "drop" ];
 
 const SIZES = {
@@ -803,6 +820,9 @@ class Polaris extends Controller {
   showToast() {
     this.findElement("toast").show();
   }
+  toggleCollapsible() {
+    this.findElement("collapsible").toggle();
+  }
   findElement(type) {
     const targetId = this.element.dataset.target.replace("#", "");
     const target = document.getElementById(targetId);
@@ -2465,8 +2485,9 @@ class Toast extends Controller {
     this.element.removeEventListener("transitionend", this.updatePositions, false);
   };
   getStyle(position) {
-    const translateIn = -80 * position;
-    const translateOut = 150 - 80 * position;
+    const height = this.element.offsetHeight + this.heightOffset;
+    const translateIn = height * -1;
+    const translateOut = 150 - height;
     return `--toast-translate-y-in: ${translateIn}px; --toast-translate-y-out: ${translateOut}px;`;
   }
   get timeoutDuration() {
@@ -2487,11 +2508,15 @@ class Toast extends Controller {
   get position() {
     return this.visibleToasts.filter((el => !this.element.isEqualNode(el))).length + 1;
   }
+  get heightOffset() {
+    return this.visibleToasts.filter((el => !this.element.isEqualNode(el) && this.element.dataset.position > el.dataset.position)).map((el => el.offsetHeight)).reduce(((a, b) => a + b), 0);
+  }
 }
 
 function registerPolarisControllers(application) {
   application.register("polaris-autocomplete", Autocomplete);
   application.register("polaris-button", Button);
+  application.register("polaris-collapsible", Collapsible);
   application.register("polaris-dropzone", Dropzone);
   application.register("polaris-frame", Frame);
   application.register("polaris-modal", Modal);

data/app/assets/stylesheets/polaris_view_components.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-:root { --polaris-version-number: '7.5.0'; --polaris-animation-skeleton-shimmer: polaris-SkeletonShimmerAnimation; }
+:root { --polaris-version-number: '7.6.0'; --polaris-animation-skeleton-shimmer: polaris-SkeletonShimmerAnimation; }
 html, body { font-size: 1.5rem; font-weight: 400; line-height: 2rem; text-transform: initial; letter-spacing: initial; font-weight: 400; color: var(--p-text); }
 @media (min-width: 40em) { html, body { font-size: 1.4rem; } }
 html, body, button { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; }
@@ -92,7 +92,7 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 .Polaris-Badge--sizeSmall { font-size: 1.2rem; }
 .Polaris-Badge--statusSuccess { --p-component-badge-pip-color: var(--p-icon-success); background-color: var(--p-surface-success); color: var(--p-text); }
 .Polaris-Badge--statusInfo { --p-component-badge-pip-color: var(--p-icon-highlight); background-color: var(--p-surface-highlight); color: var(--p-text); }
-.Polaris-Badge--statusAttention { --p-component-badge-pip-color: var(--p-text-warning); background-color: var(--p-surface-warning); color: var(--p-text); }
+.Polaris-Badge--statusAttention { --p-component-badge-pip-color: rgb(138, 97, 22); background-color: #ffea8a; color: var(--p-text); }
 .Polaris-Badge--statusWarning { --p-component-badge-pip-color: var(--p-icon-warning); background-color: var(--p-surface-warning); color: var(--p-text); }
 .Polaris-Badge--statusCritical { --p-component-badge-pip-color: var(--p-icon-critical); background-color: var(--p-surface-critical); color: var(--p-text); }
 .Polaris-Badge--statusNew { background-color: var(--p-surface-neutral); color: var(--p-text); font-weight: 500; border: none; }
@@ -105,14 +105,15 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 .Polaris-Badge--withinFilter { border-radius: var(--p-border-radius-base); }
 .Polaris-TextStyle--variationPositive { color: var(--p-text-success); }
 .Polaris-TextStyle--variationNegative { color: var(--p-text-critical); }
+.Polaris-TextStyle--variationWarning { color: var(--p-text-warning); }
 .Polaris-TextStyle--variationCode { position: relative; padding: 0 0.4rem; border-radius: 0.3rem; background-color: var(--p-surface-subdued); display: inline-block; font-size: 1.15em; box-shadow: inset 0 0 0 0.1rem var(--p-border-subdued); }
 .Polaris-TextStyle--variationCode::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0.1rem solid transparent; pointer-events: none; }
 .Polaris-TextStyle--variationStrong { font-weight: 600; }
 .Polaris-TextStyle--variationSubdued { color: var(--p-text-subdued); }
 @media print { .Polaris-TextStyle--variationSubdued { color: var(--p-text-subdued); } }
-.Polaris-ActionList { list-style: none; margin: 0; padding: 0; }
+.Polaris-ActionList { outline: none; list-style: none; margin: 0; padding: 0; }
 .Polaris-ActionList__Section--withoutTitle:not(:first-child) { border-top: 0.1rem solid var(--p-divider); }
-.Polaris-ActionList__Actions { list-style: none; margin: 0; border-top: 0.1rem solid var(--p-divider); padding: 0.8rem; }
+.Polaris-ActionList__Actions { outline: none; list-style: none; margin: 0; border-top: 0.1rem solid var(--p-divider); padding: 0.8rem; }
 .Polaris-ActionList > .Polaris-ActionList__Section--withoutTitle .Polaris-ActionList__Actions, .Polaris-ActionList__Section:first-child > .Polaris-ActionList__Section--withoutTitle .Polaris-ActionList__Actions { border-top: none; }
 .Polaris-ActionList__Title { font-size: 1.3rem; font-weight: 600; line-height: 1.6rem; text-transform: uppercase; padding: 0.4rem 1.6rem 1.2rem 1.6rem; }
 @media (min-width: 40em) { .Polaris-ActionList__Title { font-size: 1.2rem; } }
@@ -481,6 +482,7 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 .Polaris-TextField__ClearButton:focus { outline: none; }
 .Polaris-TextField__ClearButton:focus:enabled::after { box-shadow: 0 0 0 0.2rem var(--p-focused); outline: 0.1rem solid transparent; }
 .Polaris-TextField__ClearButton:disabled { cursor: default; }
+.Polaris-TextField__Hidden { visibility: hidden; }
 .Polaris-TextField__Spinner { --p-text-field-spinner-offset-large: calc(var(--p-text-field-spinner-offset) + 0.1rem); z-index: 20; margin: var(--p-text-field-spinner-offset-large); color: var(--p-icon); display: flex; align-self: stretch; flex-direction: column; width: 2.2rem; cursor: pointer; }
 .Polaris-TextField__SpinnerIcon { height: 1.2rem; width: 1.2rem; }
 .Polaris-TextField__Resizer { position: absolute; bottom: 0; left: 0; right: 0; height: 0; visibility: hidden; overflow: hidden; }
@@ -538,16 +540,18 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 .Polaris-Listbox-TextOption { margin: 0.4rem 0.8rem 0; flex: 1 1; border-radius: var(--p-border-radius-base); padding: 0.8rem 0.8rem; cursor: pointer; display: flex; position: relative; }
 .Polaris-Listbox-TextOption::after { content: ''; position: absolute; z-index: 1; top: -0.1rem; right: -0.1rem; bottom: -0.1rem; left: -0.1rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.1rem var(--p-focused); transition: box-shadow 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.1rem); }
 .Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--allowMultiple { margin: 0.4rem 0.8rem 0; padding: 0.4rem 0.8rem; }
-.Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--isAction { padding: 0; margin-top: 0; }
+.Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--isAction { margin-top: 0; padding: 0.8rem 0.8rem; }
 .Polaris-Listbox-TextOption:hover { background-color: var(--p-surface-hovered); }
 .Polaris-Listbox-TextOption:focus { outline: none; }
 .Polaris-Listbox-TextOption:active { background-color: var(--p-surface-pressed); }
 .Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--disabled { background-color: var(--p-surface-disabled); color: var(--p-text-disabled); cursor: default; }
 .Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--selected { background-color: var(--p-surface-selected); }
 .Polaris-Listbox-TextOption.Polaris-Listbox-TextOption--selected::before { content: ''; position: absolute; top: 0; bottom: 0; left: -0.4rem; height: 100%; width: var(--p-border-radius-base); background-color: var(--p-interactive); border-top-right-radius: var(--p-border-radius-base); border-bottom-right-radius: var(--p-border-radius-base); transform: translateX(-100%); }
+li:first-of-type > .Polaris-Listbox-TextOption { margin-top: 0; }
 [data-focused] .Polaris-Listbox-TextOption { outline: none; background-color: var(--p-surface-selected); }
 [data-focused]:not(:focus) .Polaris-Listbox-TextOption::after { box-shadow: 0 0 0 0.2rem var(--p-focused); outline: 0.1rem solid transparent; }
 .Polaris-Listbox-TextOption__Content { flex: 1 1 auto; display: flex; }
+.Polaris-Listbox-TextOption__Checkbox { pointer-events: none; }
 .Polaris-Listbox-Option { display: flex; margin: 0; padding: 0; }
 .Polaris-Listbox-Option:focus { outline: none; }
 .Polaris-Listbox-Option--divider { border-bottom: 0.1rem solid var(--p-divider); }
@@ -556,6 +560,7 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 .Polaris-Listbox-Header { font-size: 1.3rem; font-weight: 600; line-height: 1.6rem; text-transform: uppercase; padding: 0.8rem 1.6rem; color: var(--p-text-subdued); }
 @media (min-width: 40em) { .Polaris-Listbox-Header { font-size: 1.2rem; } }
 .Polaris-Listbox-Action { display: flex; flex: 1 1; }
+.Polaris-Listbox-Action__ActionDivider { margin-bottom: 0.4rem; }
 .Polaris-Listbox-Action__Icon { padding-right: 0.8rem; }
 .Polaris-Listbox { padding: 0; margin: 0; list-style: none; max-width: 100%; }
 .Polaris-Listbox:focus { outline: none; }
@@ -567,7 +572,7 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 .Polaris-Autocomplete-MappedAction__ActionContainer { margin-bottom: 1.2rem; }
 [data-focused] .Polaris-Autocomplete-MappedAction__Action svg { fill: var(--p-interactive); }
 [data-focused] .Polaris-Autocomplete-MappedAction__Action.Polaris-Autocomplete-MappedAction--destructive { background-color: var(--p-surface-critical-subdued-pressed); }
-.Polaris-Autocomplete-MappedAction__Action { position: relative; display: block; width: 100%; min-height: 4rem; text-align: left; cursor: pointer; padding: 1rem 0.8rem; border-radius: var(--p-border-radius-base); border-top: 0.1rem solid var(--p-surface); }
+.Polaris-Autocomplete-MappedAction__Action { position: relative; display: block; width: 100%; min-height: 4rem; text-align: left; cursor: pointer; }
 .Polaris-Autocomplete-MappedAction__Action::after { content: ''; position: absolute; z-index: 1; top: -0.1rem; right: -0.1rem; bottom: -0.1rem; left: -0.1rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.1rem var(--p-focused); transition: box-shadow 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.1rem); }
 .Polaris-Autocomplete-MappedAction__Action:hover { background-color: var(--p-surface-hovered); text-decoration: none; }
 @media (-ms-high-contrast: active) { .Polaris-Autocomplete-MappedAction__Action:hover { outline: 0.1rem solid windowText; } }
@@ -894,24 +899,11 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 .Polaris-DropZone-FileUpload--large { padding: 3.2rem; }
 .Polaris-DropZone-FileUpload--small { padding: 1.25rem; }
 .Polaris-DropZone-FileUpload img { vertical-align: bottom; }
-.Polaris-DropZone-FileUpload__Button { position: relative; position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 3.6rem; min-width: 3.6rem; margin: 0; padding: 0.7rem 1.6rem; background: var(--p-surface); box-shadow: var(--p-button-drop-shadow); border-radius: var(--p-border-radius-base); color: var(--p-text); border: 0.1rem solid var(--p-border-neutral-subdued); border-top-color: var(--p-border-subdued); border-bottom-color: var(--p-border-shadow-subdued); line-height: 1; text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; }
-.Polaris-DropZone-FileUpload__Button svg { fill: var(--p-icon); }
-.Polaris-DropZone-FileUpload__Button::after { content: ''; position: absolute; z-index: 1; top: -0.2rem; right: -0.2rem; bottom: -0.2rem; left: -0.2rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.2rem var(--p-focused); transition: box-shadow 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.1rem); }
-.Polaris-DropZone-FileUpload__Button:hover { background: var(--p-action-secondary-hovered); outline: 0.1rem solid transparent; }
-.Polaris-DropZone-FileUpload__Button:focus { box-shadow: var(--p-button-drop-shadow); outline: 0; }
-.Polaris-DropZone-FileUpload__Button:focus::after { box-shadow: 0 0 0 0.2rem var(--p-focused); outline: 0.1rem solid transparent; }
-.Polaris-DropZone-FileUpload__Button:active { background: var(--p-action-secondary-pressed); box-shadow: var(--p-button-drop-shadow); }
-.Polaris-DropZone-FileUpload__Button:active::after { border: none; box-shadow: none; }
-.Polaris-DropZone-FileUpload__Button.Polaris-DropZone-FileUpload--pressed { background: var(--p-action-secondary-depressed); box-shadow: var(--p-button-pressed-inner-shadow); color: var(--p-text-on-primary); border-color: var(--p-border-depressed); }
-.Polaris-DropZone-FileUpload__Button.Polaris-DropZone-FileUpload--pressed svg { fill: currentColor; }
-@media (-ms-high-contrast: active) { .Polaris-DropZone-FileUpload__Button { border: 0.1rem solid windowText; } }
-.Polaris-DropZone-FileUpload__Button::after { content: ''; position: absolute; z-index: 1; top: -0.1rem; right: -0.1rem; bottom: -0.1rem; left: -0.1rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.1rem var(--p-focused); transition: box-shadow 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.1rem); }
-.Polaris-DropZone-FileUpload__Button.Polaris-DropZone-FileUpload--disabled { transition: none; box-shadow: none; border-color: var(--p-border-disabled); background: var(--p-surface-disabled); color: var(--p-text-disabled); cursor: not-allowed; box-shadow: none; }
-.Polaris-DropZone-FileUpload__Button.Polaris-DropZone-FileUpload--disabled svg { fill: var(--p-icon-disabled); }
-.Polaris-DropZone-FileUpload__Button.Polaris-DropZone-FileUpload--focused { outline: 0; box-shadow: none; }
-.Polaris-DropZone-FileUpload__Button.Polaris-DropZone-FileUpload--focused::after { box-shadow: 0 0 0 0.2rem var(--p-focused); outline: 0.1rem solid transparent; }
-@media (-ms-high-contrast: active) { .Polaris-DropZone-FileUpload__Button.Polaris-DropZone-FileUpload--focused { outline: 0.2rem dotted; } }
-.Polaris-DropZone-FileUpload__Button .Polaris-DropZone-FileUpload--sizeSlim { min-height: 3rem; padding: 0.4rem 1.2rem; }
+.Polaris-DropZone-FileUpload__Action { position: relative; display: inline-flex; flex: 0 0 auto; border: none; border-radius: var(--p-border-radius-base); padding: 0.4rem 0.6rem; margin: 0; text-decoration: none; color: var(--p-interactive-hovered); background: var(--p-surface-selected-pressed); font-size: 1.2rem; font-weight: 600; line-height: 1; cursor: pointer; text-align: center; -webkit-appearance: none; appearance: none; }
+.Polaris-DropZone-FileUpload__Action::after { content: ''; position: absolute; z-index: 1; top: -0.1rem; right: -0.1rem; bottom: -0.1rem; left: -0.1rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.1rem var(--p-focused); transition: box-shadow 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.1rem); }
+.Polaris-DropZone-FileUpload__Action:hover { color: var(--p-interactive-pressed); }
+.Polaris-DropZone-FileUpload__Action.Polaris-DropZone-FileUpload--disabled { transition: none; box-shadow: none; border-color: var(--p-border-disabled); background: var(--p-surface-disabled); color: var(--p-text-disabled); cursor: not-allowed; box-shadow: none; }
+.Polaris-DropZone-FileUpload__Action.Polaris-DropZone-FileUpload--disabled svg { fill: var(--p-icon-disabled); }
 .Polaris-DropZone-FileUpload__ActionTitle { color: var(--p-interactive); text-decoration: none; }
 .Polaris-DropZone-FileUpload__ActionTitle:not(.Polaris-DropZone-FileUpload__ActionTitle--disabled) { cursor: pointer; }
 .Polaris-DropZone-FileUpload__ActionTitle:not(.Polaris-DropZone-FileUpload__ActionTitle--disabled):hover, .Polaris-DropZone-FileUpload__ActionTitle:not(.Polaris-DropZone-FileUpload__ActionTitle--disabled):active { color: var(--p-interactive-pressed); text-decoration: underline; }
@@ -922,14 +914,14 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 .Polaris-DropZone:not(.Polaris-DropZone--focused)::after { top: 0; left: 0; right: 0; bottom: 0; opacity: 1; transform: scale(1); border: 0.1rem dashed transparent; }
 .Polaris-DropZone:hover { outline: 0.1rem solid transparent; }
 .Polaris-DropZone--hasOutline { padding: 0.1rem; }
-.Polaris-DropZone--hasOutline::after { border-color: var(--p-border); }
-.Polaris-DropZone--hasOutline:not(.Polaris-DropZone--isDisabled):hover { cursor: pointer; background-color: var(--p-surface-selected-hovered); }
+.Polaris-DropZone--hasOutline::after { border-color: var(--p-border-neutral-subdued); }
+.Polaris-DropZone--hasOutline:not(.Polaris-DropZone--isDisabled):hover { cursor: pointer; background-color: var(--p-surface-subdued); }
 .Polaris-DropZone--hasOutline:not(.Polaris-DropZone--isDisabled):hover::after { border-color: var(--p-interactive-hovered); }
-.Polaris-DropZone--hasOutline:not(.Polaris-DropZone--focused)::after { top: 0; left: 0; right: 0; bottom: 0; opacity: 1; transform: scale(1); border: 0.1rem dashed transparent; border-radius: calc(var(--p-border-radius-base) + 0.2rem); border-color: var(--p-border); }
+.Polaris-DropZone--hasOutline:not(.Polaris-DropZone--focused)::after { top: 0; left: 0; right: 0; bottom: 0; opacity: 1; transform: scale(1); border: 0.1rem dashed transparent; border-radius: calc(var(--p-border-radius-base) + 0.2rem); border-color: var(--p-border-neutral-subdued); }
 .Polaris-DropZone--isDragging:not(.Polaris-DropZone--isDisabled) { background-color: var(--p-surface-hovered); }
 .Polaris-DropZone--isDisabled { cursor: not-allowed; }
 .Polaris-DropZone--isDisabled::after { border-color: var(--p-border-disabled); }
-.Polaris-DropZone--sizeLarge { min-height: 10rem; }
+.Polaris-DropZone--sizeLarge { min-height: 12rem; }
 .Polaris-DropZone--sizeMedium { min-height: 10rem; align-items: center; }
 .Polaris-DropZone--sizeSmall { padding: 0; align-items: center; min-height: 5rem; }
 .Polaris-DropZone--measuring { visibility: hidden; min-height: 0; }
@@ -985,25 +977,35 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 .Polaris-Tag { display: inline-flex; max-width: 100%; align-items: center; min-height: 2.8rem; padding: 0 0.8rem; background-color: var(--p-surface-neutral); border-radius: var(--p-border-radius-base); color: var(--p-text); outline: 0.1rem solid transparent; }
 .Polaris-Tag.Polaris-Tag--disabled { transition: none; background: var(--p-surface-neutral-disabled); color: var(--p-text-disabled); }
 .Polaris-Tag.Polaris-Tag--disabled svg { fill: var(--p-icon-disabled); }
-.Polaris-Tag.Polaris-Tag--removable { padding-right: 0; }
 .Polaris-Tag.Polaris-Tag--clickable { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; background: none; border: none; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; cursor: pointer; padding: 0 0.8rem; background-color: var(--p-surface-neutral); position: relative; }
 .Polaris-Tag.Polaris-Tag--clickable:focus { outline: none; }
 .Polaris-Tag.Polaris-Tag--clickable:hover { background: var(--p-surface-neutral-hovered); }
 .Polaris-Tag.Polaris-Tag--clickable::after { content: ''; position: absolute; z-index: 1; top: -0.1rem; right: -0.1rem; bottom: -0.1rem; left: -0.1rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.1rem var(--p-focused); transition: box-shadow 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.1rem); }
 .Polaris-Tag.Polaris-Tag--clickable:focus:not(:active)::after { box-shadow: 0 0 0 0.2rem var(--p-focused); outline: 0.1rem solid transparent; }
 .Polaris-Tag.Polaris-Tag--clickable:active { background: var(--p-surface-neutral-pressed); }
-.Polaris-Tag.Polaris-Tag--clickable:disabled { background: var(--p-surface-neutral-disabled); cursor: default; pointer-events: none; }
+.Polaris-Tag.Polaris-Tag--clickable:disabled { background: var(--p-surface-neutral-disabled); cursor: default; pointer-events: none; color: var(--p-text-disabled); }
+.Polaris-Tag.Polaris-Tag--removable { padding-right: 0; }
+.Polaris-Tag.Polaris-Tag--linkable { padding: 0; }
 .Polaris-Tag__TagText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
-.Polaris-Tag__Button { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; background: none; border: none; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; display: block; height: 2.8rem; width: 2.8rem; margin-left: 0.4rem; border-radius: 0 0.3rem 0.3rem 0; position: relative; }
+.Polaris-Tag__Button { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; background: none; border: none; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; display: block; flex-shrink: 0; height: 2.8rem; width: 2.8rem; margin-left: 0.4rem; border-radius: 0 0.3rem 0.3rem 0; position: relative; }
 .Polaris-Tag__Button svg { fill: var(--p-icon); }
 .Polaris-Tag__Button:focus { outline: none; }
 .Polaris-Tag__Button:hover { background: var(--p-surface-neutral-hovered); outline: 0.1rem solid transparent; }
-.Polaris-Tag__Button:focus { background-color: transparent; }
 .Polaris-Tag__Button::after { content: ''; position: absolute; z-index: 1; top: -0.1rem; right: -0.1rem; bottom: -0.1rem; left: -0.1rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.1rem var(--p-focused); transition: box-shadow 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.1rem); }
 .Polaris-Tag__Button:focus:not(:active)::after { box-shadow: 0 0 0 0.2rem var(--p-focused); outline: 0.1rem solid transparent; }
 .Polaris-Tag__Button:active { background: var(--p-surface-neutral-pressed); }
 .Polaris-Tag__Button:disabled { cursor: default; pointer-events: none; }
 .Polaris-Tag__Button:disabled svg { fill: var(--p-icon-disabled); }
+.Polaris-Tag__Button.Polaris-Tag--segmented { margin-left: -0.4rem; }
+.Polaris-Tag__Button.Polaris-Tag--segmented::after { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.Polaris-Tag__Link { display: inline-grid; color: var(--p-text); outline: none; border-radius: var(--p-border-radius-base); text-decoration: none; padding: 0.4rem 0.8rem; position: relative; }
+.Polaris-Tag__Link .Polaris-Tag__LinkText { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.Polaris-Tag__Link::after { content: ''; position: absolute; z-index: 1; top: -0.1rem; right: -0.1rem; bottom: -0.1rem; left: -0.1rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.1rem var(--p-focused); transition: box-shadow 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.1rem); }
+.Polaris-Tag__Link:focus:not(:active) { text-decoration: underline; }
+.Polaris-Tag__Link:focus:not(:active)::after { box-shadow: 0 0 0 0.2rem var(--p-focused); outline: 0.1rem solid transparent; }
+.Polaris-Tag__Link:hover { background: var(--p-surface-neutral-hovered); text-decoration: underline; }
+.Polaris-Tag__Link.Polaris-Tag--segmented { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.Polaris-Tag__Link.Polaris-Tag--segmented::after { margin-right: 0.4rem; border-top-right-radius: 0; border-bottom-right-radius: 0; }
 .Polaris-Sheet { position: fixed; bottom: 0; width: 100%; height: 100%; background-color: var(--p-surface); box-shadow: var(--p-modal-shadow); }
 @media screen and (-ms-high-contrast: active) { .Polaris-Sheet { border-left: 0.1rem solid var(--p-border-subdued); } }
 @media (min-width: 48.0625em) { .Polaris-Sheet { right: 0; width: 38rem; } }
@@ -1537,6 +1539,9 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 .Polaris-OptionList-Option--disabled .Polaris-OptionList-Option__Media svg { fill: var(--p-icon-disabled); }
 .Polaris-OptionList-Option__Media { padding: 0 0.8rem; }
 .Polaris-OptionList-Option__Media svg { fill: var(--p-icon); }
+.Polaris-OptionList-Option--verticalAlignTop { align-items: flex-start; }
+.Polaris-OptionList-Option--verticalAlignCenter { align-items: center; }
+.Polaris-OptionList-Option--verticalAlignBottom { align-items: flex-end; }
 .Polaris-OptionList { margin: 0; padding: 0; list-style: none; padding: 0.8rem; }
 .Polaris-OptionList__Options { margin: 0; padding: 0; list-style: none; }
 .Polaris-OptionList__Title { font-size: 1.3rem; font-weight: 600; line-height: 1.6rem; text-transform: uppercase; padding: 0.8rem; color: var(--p-text-subdued); }
@@ -1592,7 +1597,7 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
 @media (min-width: 30.625em) { .Polaris-Page-Header--mobileView .Polaris-Page-Header__ActionMenuWrapper { right: -0.8rem; } }
 .Polaris-Page-Header--mobileView.Polaris-Page-Header--hasNavigation .Polaris-Page-Header__ActionMenuWrapper { top: 1.8rem; }
 @media print { .Polaris-Page-Header__ActionMenuWrapper { display: none !important; } }
-.Polaris-Page-Header__Row { display: flex; justify-content: space-between; }
+.Polaris-Page-Header__Row { display: flex; justify-content: space-between; min-height: 3.6rem; }
 .Polaris-Page-Header__Row + .Polaris-Page-Header__Row { margin-top: 0.4rem; }
 .Polaris-Page-Header--mobileView .Polaris-Page-Header__Row + .Polaris-Page-Header__Row { margin-top: 0.8rem; }
 .Polaris-Page-Header__Row + .Polaris-Page-Header__Row .Polaris-Page-Header__RightAlign { margin-left: 0; }

data/app/components/polaris/collapsible_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Polaris
+  class CollapsibleComponent < Polaris::Component
+    def initialize(
+      expand_on_print: false,
+      open: false,
+      **system_arguments
+    )
+      @expand_on_print = expand_on_print
+      @open = open
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        prepend_option(opts[:data], :controller, "polaris-collapsible")
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Collapsible",
+          "Polaris-Collapsible--isFullyClosed": !@open,
+          "Polaris-Collapsible--expandOnPrint": @expand_on_print
+        )
+        opts[:style] = class_names(
+          @open ? "max-height: none;" : "max-height: 0px;",
+          @open ? "overflow: visible;" : "overflow: hidden;"
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**system_arguments)) { content }
+    end
+  end
+end

data/app/components/polaris/keyboard_key_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Polaris
+  class KeyboardKeyComponent < Polaris::Component
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(opts[:classes], "Polaris-KeyboardKey")
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**system_arguments)) { content }
+    end
+  end
+end

data/app/components/polaris/resource_item_component.rb

@@ -29,6 +29,7 @@ module Polaris
     def initialize(
       url: nil,
       vertical_alignment: ALIGNMENT_DEFAULT,
+      cursor: CURSOR_DEFAULT,
       selectable: false,
       offset: false,
       wrapper_arguments: {},
@@ -37,6 +38,7 @@ module Polaris
     )
       @url = url
       @vertical_alignment = vertical_alignment
+      @cursor = fetch_or_fallback(CURSOR_OPTIONS, cursor, CURSOR_DEFAULT)
       @selectable = selectable
       @offset = offset
       @wrapper_arguments = wrapper_arguments
@@ -79,7 +81,7 @@ module Polaris
           "Polaris-ResourceItem",
           "Polaris-ResourceItem--selectable": @selectable
         )
-        prepend_option(args, :style, "cursor: #{cursor};")
+        prepend_option(args, :style, "cursor: #{@cursor};")
         prepend_option(args[:data], :action, "click->polaris-resource-item#open")
       end
     end

data/app/components/polaris/skeleton_display_text_component.rb

@@ -0,0 +1,32 @@
+module Polaris
+  class SkeletonDisplayTextComponent < Polaris::Component
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      small: "Polaris-SkeletonDisplayText--sizeSmall",
+      medium: "Polaris-SkeletonDisplayText--sizeMedium",
+      large: "Polaris-SkeletonDisplayText--sizeLarge",
+      extra_large: "Polaris-SkeletonDisplayText--sizeExtraLarge"
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(size: SIZE_DEFAULT, **system_arguments)
+      @size = size
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-SkeletonDisplayText__DisplayText",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, SIZE_DEFAULT)]
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**system_arguments))
+    end
+  end
+end

data/app/components/polaris/skeleton_thumbnail_component.rb

@@ -0,0 +1,31 @@
+module Polaris
+  class SkeletonThumbnailComponent < Polaris::Component
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      small: "Polaris-SkeletonThumbnail--sizeSmall",
+      medium: "Polaris-SkeletonThumbnail--sizeMedium",
+      large: "Polaris-SkeletonThumbnail--sizeLarge"
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(size: SIZE_DEFAULT, **system_arguments)
+      @size = size
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-SkeletonThumbnail",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, SIZE_DEFAULT)]
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**system_arguments))
+    end
+  end
+end

data/app/helpers/polaris/form_builder.rb

@@ -16,7 +16,7 @@ module Polaris
         model: object.class.model_name.human.downcase
       )
 
-      render Polaris::BannerComponent.new(title: title, status: :critical) do
+      render Polaris::BannerComponent.new(title: title, status: :critical, within: :container) do
         render(Polaris::ListComponent.new) do |list|
           object.errors.full_messages.each do |error|
             list.item { error.html_safe }

data/app/helpers/polaris/view_helper.rb

@@ -19,6 +19,7 @@ module Polaris
       checkbox:                 "Polaris::CheckboxComponent",
       check_box:                "Polaris::CheckboxComponent",
       choice_list:              "Polaris::ChoiceListComponent",
+      collapsible:              "Polaris::CollapsibleComponent",
       data_table:               "Polaris::DataTableComponent",
       description_list:         "Polaris::DescriptionListComponent",
       display_text:             "Polaris::DisplayTextComponent",
@@ -33,6 +34,7 @@ module Polaris
       icon:                     "Polaris::IconComponent",
       index_table:              "Polaris::IndexTableComponent",
       inline_error:             "Polaris::InlineErrorComponent",
+      keyboard_key:             "Polaris::KeyboardKeyComponent",
       layout:                   "Polaris::LayoutComponent",
       link:                     "Polaris::LinkComponent",
       list:                     "Polaris::ListComponent",
@@ -56,6 +58,8 @@ module Polaris
       scrollable:               "Polaris::ScrollableComponent",
       spinner:                  "Polaris::SpinnerComponent",
       skeleton_body_text:       "Polaris::SkeletonBodyTextComponent",
+      skeleton_display_text:    "Polaris::SkeletonDisplayTextComponent",
+      skeleton_thumbnail:       "Polaris::SkeletonThumbnailComponent",
       spacer:                   "Polaris::SpacerComponent",
       tabs:                     "Polaris::TabsComponent",
       tag:                      "Polaris::TagComponent",

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.8.1"
+    VERSION = "0.9.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.9.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-01-26 00:00:00.000000000 Z
+date: 2022-03-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -18,9 +18,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.0.0
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 8.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -28,9 +25,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.0.0
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 8.0.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -38,9 +32,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 2.0.0
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '3.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -48,9 +39,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 2.0.0
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: '3.0'
 description:
 email:
 - dan@dangamble.co.uk
@@ -71,8 +59,10 @@ files:
 - app/assets/icons/polaris/AffiliateMajor.svg
 - app/assets/icons/polaris/AlertMinor.svg
 - app/assets/icons/polaris/AnalyticsMajor.svg
+- app/assets/icons/polaris/AnalyticsMinor.svg
 - app/assets/icons/polaris/AppExtensionMinor.svg
 - app/assets/icons/polaris/AppsMajor.svg
+- app/assets/icons/polaris/AppsMinor.svg
 - app/assets/icons/polaris/ArchiveMajor.svg
 - app/assets/icons/polaris/ArchiveMinor.svg
 - app/assets/icons/polaris/ArrowDownMinor.svg
@@ -91,12 +81,14 @@ files:
 - app/assets/icons/polaris/BillingStatementPoundMajor.svg
 - app/assets/icons/polaris/BillingStatementRupeeMajor.svg
 - app/assets/icons/polaris/BillingStatementYenMajor.svg
+- app/assets/icons/polaris/BlockMinor.svg
 - app/assets/icons/polaris/BlockquoteMajor.svg
 - app/assets/icons/polaris/BlogMajor.svg
 - app/assets/icons/polaris/BugMajor.svg
 - app/assets/icons/polaris/ButtonCornerPillMajor.svg
 - app/assets/icons/polaris/ButtonCornerRoundedMajor.svg
 - app/assets/icons/polaris/ButtonCornerSquareMajor.svg
+- app/assets/icons/polaris/ButtonMinor.svg
 - app/assets/icons/polaris/BuyButtonButtonLayoutMajor.svg
 - app/assets/icons/polaris/BuyButtonHorizontalLayoutMajor.svg
 - app/assets/icons/polaris/BuyButtonMajor.svg
@@ -152,6 +144,7 @@ files:
 - app/assets/icons/polaris/CirclePlusOutlineMinor.svg
 - app/assets/icons/polaris/CircleRightMajor.svg
 - app/assets/icons/polaris/CircleTickMajor.svg
+- app/assets/icons/polaris/CircleTickMinor.svg
 - app/assets/icons/polaris/CircleTickOutlineMinor.svg
 - app/assets/icons/polaris/CircleUpMajor.svg
 - app/assets/icons/polaris/ClipboardMinor.svg
@@ -165,6 +158,7 @@ files:
 - app/assets/icons/polaris/ColumnWithTextMajor.svg
 - app/assets/icons/polaris/Columns2Major.svg
 - app/assets/icons/polaris/Columns3Major.svg
+- app/assets/icons/polaris/Columns3Minor.svg
 - app/assets/icons/polaris/ComposeMajor.svg
 - app/assets/icons/polaris/ConfettiMajor.svg
 - app/assets/icons/polaris/ConnectMinor.svg
@@ -187,6 +181,7 @@ files:
 - app/assets/icons/polaris/DiscountAutomaticMajor.svg
 - app/assets/icons/polaris/DiscountCodeMajor.svg
 - app/assets/icons/polaris/DiscountsMajor.svg
+- app/assets/icons/polaris/DiscountsMinor.svg
 - app/assets/icons/polaris/DisputeMinor.svg
 - app/assets/icons/polaris/DnsSettingsMajor.svg
 - app/assets/icons/polaris/DomainNewMajor.svg
@@ -214,6 +209,8 @@ files:
 - app/assets/icons/polaris/FeaturedCollectionMajor.svg
 - app/assets/icons/polaris/FeaturedContentMajor.svg
 - app/assets/icons/polaris/FilterMajor.svg
+- app/assets/icons/polaris/FinancesMajor.svg
+- app/assets/icons/polaris/FinancesMinor.svg
 - app/assets/icons/polaris/FirstOrderMajor.svg
 - app/assets/icons/polaris/FirstVisitMajor.svg
 - app/assets/icons/polaris/FlagMajor.svg
@@ -246,6 +243,7 @@ files:
 - app/assets/icons/polaris/HideMinor.svg
 - app/assets/icons/polaris/HintMajor.svg
 - app/assets/icons/polaris/HomeMajor.svg
+- app/assets/icons/polaris/HomeMinor.svg
 - app/assets/icons/polaris/HorizontalDotsMinor.svg
 - app/assets/icons/polaris/IconsMajor.svg
 - app/assets/icons/polaris/IllustrationMajor.svg
@@ -282,6 +280,7 @@ files:
 - app/assets/icons/polaris/MarkFulfilledMinor.svg
 - app/assets/icons/polaris/MarkPaidMinor.svg
 - app/assets/icons/polaris/MarketingMajor.svg
+- app/assets/icons/polaris/MarketingMinor.svg
 - app/assets/icons/polaris/MaximizeMajor.svg
 - app/assets/icons/polaris/MaximizeMinor.svg
 - app/assets/icons/polaris/MentionMajor.svg
@@ -305,8 +304,10 @@ files:
 - app/assets/icons/polaris/NoteMinor.svg
 - app/assets/icons/polaris/NotificationMajor.svg
 - app/assets/icons/polaris/OnlineStoreMajor.svg
+- app/assets/icons/polaris/OnlineStoreMinor.svg
 - app/assets/icons/polaris/OrderStatusMinor.svg
 - app/assets/icons/polaris/OrdersMajor.svg
+- app/assets/icons/polaris/OrdersMinor.svg
 - app/assets/icons/polaris/OutgoingMajor.svg
 - app/assets/icons/polaris/PackageMajor.svg
 - app/assets/icons/polaris/PageDownMajor.svg
@@ -337,9 +338,12 @@ files:
 - app/assets/icons/polaris/PrintMinor.svg
 - app/assets/icons/polaris/ProductReturnsMinor.svg
 - app/assets/icons/polaris/ProductsMajor.svg
+- app/assets/icons/polaris/ProductsMinor.svg
 - app/assets/icons/polaris/ProfileMajor.svg
 - app/assets/icons/polaris/ProfileMinor.svg
 - app/assets/icons/polaris/PromoteMinor.svg
+- app/assets/icons/polaris/QuestionMarkInverseMajor.svg
+- app/assets/icons/polaris/QuestionMarkInverseMinor.svg
 - app/assets/icons/polaris/QuestionMarkMajor.svg
 - app/assets/icons/polaris/QuestionMarkMinor.svg
 - app/assets/icons/polaris/QuickSaleMajor.svg
@@ -418,6 +422,7 @@ files:
 - app/assets/icons/polaris/TickSmallMinor.svg
 - app/assets/icons/polaris/TimelineAttachmentMajor.svg
 - app/assets/icons/polaris/TipsMajor.svg
+- app/assets/icons/polaris/TitleMinor.svg
 - app/assets/icons/polaris/ToolsMajor.svg
 - app/assets/icons/polaris/TransactionFeeDollarMajor.svg
 - app/assets/icons/polaris/TransactionFeeEuroMajor.svg
@@ -444,12 +449,14 @@ files:
 - app/assets/icons/polaris/ViewportWideMajor.svg
 - app/assets/icons/polaris/VocabularyMajor.svg
 - app/assets/icons/polaris/WandMajor.svg
+- app/assets/icons/polaris/WandMinor.svg
 - app/assets/icons/polaris/WearableMajor.svg
 - app/assets/icons/polaris/WholesaleMajor.svg
 - app/assets/icons/polaris/WifiMajor.svg
 - app/assets/javascripts/polaris_view_components.js
 - app/assets/javascripts/polaris_view_components/autocomplete_controller.js
 - app/assets/javascripts/polaris_view_components/button_controller.js
+- app/assets/javascripts/polaris_view_components/collapsible_controller.js
 - app/assets/javascripts/polaris_view_components/dropzone_controller.js
 - app/assets/javascripts/polaris_view_components/frame_controller.js
 - app/assets/javascripts/polaris_view_components/index.js
@@ -511,6 +518,7 @@ files:
 - app/components/polaris/choice_component.rb
 - app/components/polaris/choice_list_component.html.erb
 - app/components/polaris/choice_list_component.rb
+- app/components/polaris/collapsible_component.rb
 - app/components/polaris/component.rb
 - app/components/polaris/data_table/cell_component.html.erb
 - app/components/polaris/data_table/cell_component.rb
@@ -554,6 +562,7 @@ files:
 - app/components/polaris/index_table_component.rb
 - app/components/polaris/inline_error_component.html.erb
 - app/components/polaris/inline_error_component.rb
+- app/components/polaris/keyboard_key_component.rb
 - app/components/polaris/label_component.html.erb
 - app/components/polaris/label_component.rb
 - app/components/polaris/labelled_component.html.erb
@@ -613,6 +622,8 @@ files:
 - app/components/polaris/shopify_navigation_component.rb
 - app/components/polaris/skeleton_body_text_component.html.erb
 - app/components/polaris/skeleton_body_text_component.rb
+- app/components/polaris/skeleton_display_text_component.rb
+- app/components/polaris/skeleton_thumbnail_component.rb
 - app/components/polaris/spacer_component.rb
 - app/components/polaris/spinner_component.html.erb
 - app/components/polaris/spinner_component.rb