@deque/cauldron-styles 5.13.0 → 6.0.0-canary.28b1eccb

package/dist/index.css

@@ -1096,308 +1096,6 @@ a.IconButton {
   border-top: none;
 }
 
-:root {
-  --pointout-border-color: var(--accent-success);
-  --pointout-background-color: var(--accent-medium);
-  --pointout-text-color: var(--accent-light);
-}
-
-.Pointout {
-  --pointout-padding: var(--space-smallest);
-  --pointout-arrow-width: 38px;
-  --pointout-arrow-height: 60px;
-  --pointout-dismiss-button-color: #f7846c;
-  --pointout-navigation-button-color: #ffdd75;
-  --pointout-border-width: 3px;
-  position: absolute;
-  display: inline-block;
-  max-width: 300px;
-}
-
-.Pointout__arrow {
-  position: absolute;
-  display: block;
-  width: var(--pointout-arrow-width);
-  transform: translateY(-100%);
-}
-
-.Pointout__arrow--top-left + .Pointout__box {
-  border-top-left-radius: 0;
-}
-
-.Pointout__arrow--top-right .Pointout__arrow {
-  right: 0;
-  left: auto;
-}
-
-.Pointout__arrow--bottom .Pointout__arrow,
-.Pointout__arrow--bottom-left .Pointout__arrow,
-.Pointout__arrow--bottom-right .Pointout__arrow {
-  bottom: 2px;
-  top: auto;
-  transform: rotate(180deg) translateY(-100%);
-}
-
-.Pointout__arrow--bottom .Pointout__arrow,
-.Pointout__arrow--bottom-left .Pointout__arrow {
-  left: -13px;
-}
-
-.Pointout__arrow--bottom-right .Pointout__arrow {
-  right: calc(var(--pointout-padding) * -1);
-  left: auto;
-}
-
-.Pointout__arrow--left-top .Pointout__arrow,
-.Pointout__arrow--left-bottom .Pointout__arrow {
-  transform: rotate(-90deg);
-  left: -46px;
-}
-
-.Pointout__arrow--left .Pointout__arrow,
-.Pointout__arrow--left-top .Pointout__arrow {
-  top: -14px;
-}
-
-.Pointout__arrow--left-bottom .Pointout__arrow {
-  top: auto;
-  bottom: -14px;
-}
-
-.Pointout__arrow--right-top .Pointout__arrow,
-.Pointout__arrow--right-bottom .Pointout__arrow {
-  right: -46px;
-  left: auto;
-  transform: rotate(90deg);
-}
-
-.Pointout__arrow--right .Pointout__arrow,
-.Pointout__arrow--right-top .Pointout__arrow {
-  top: -14px;
-}
-
-.Pointout__arrow--right-bottom .Pointout__arrow {
-  top: auto;
-  bottom: -20px;
-}
-
-.Pointout__arrow-pointer {
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' overflow='visible' preserveAspectRatio='none' viewBox='0 0 53.75 70.97' width='51' height='68'%3E%3Cg transform='translate(1 1)'%3E%3Cdefs%3E%3CclipPath id='a' vector-effect='non-scaling-stroke'%3E%3Cpath vector-effect='non-scaling-stroke' fill='none' d='M0 0h51.75v68.97H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cimage href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAByCAYAAAAI7Gx7AAAACXBIWXMAAAsSAAALEgHS3X78AAAIgklEQVR4Xu2cUXLjNhBEm7bjvUhOlYPkEDlITpWDZNeWlA97Vs1WDzAAIVelVl2FAkiCJOaxB4S1Wm2XywUPfeip1+FX0gMG6QGD9IBBesAgPWCQHjBIDxikl16He+jvf/7cen3++P2vL18Nbl+xAq0E39JXgbkrjAIEPd4dzD3B3AVGA0IPjpMd4D2gLIWRQKjuY7lB3exbDWQZDANidDvUA3E3KEtgdEBU2iwdUAZi128FkMMwGiCyWttOLujevsNADsEogqjAYWnQGnhWAzgGZHrR1QGh7REgHOSGPRDus0l9WKuW41uhPEl5Nvu06Lk9uJW1TaqpNJEbOhf0CqQdYldUi54HYC5dhtNkAoQ+UQcl5GCczTZrWcocSZMeCJcWWl6S/VE0nTK4N5pJlyFnFBdWPGDNf631GpoC/MTDEfHk1SFxbNods87gAJwjWs54obpV2B3ZpOoc+VOj7ig7I3GFg8AgnpM292Xp3BDlZPqf8XGdmFNYU+6YcYajrRA4+JYbfkuKOiRqheqcMe2OsjNE2SAckGxijL4sdsXps94+29ovagbAbhh2RwkG0VXKGQj3xnBPVwOJcvo8HunB4n5PuJ1oud+QZtOEg3COaKUHp8Mr1a+y7dIlc5eOKbQB9VQpOSNRlhrOGQFBHaIBcIq449GHXcGpwu4YdkYXRpIi6gqF4kC4p8znaopksAIYw2AoAYHbJY2mCQ+u5YoMCKfHK4Bvn+XVFH2ztCZiLawNqKVK1xmJ3ABcmjgQHFwEA+ydwWkSchNs3DfeOg5I2R1NGAMpwgNTEBkQhQFc54t33AbEi7Bn7BddDGRaI85g4hkQN4G2FlVsczd5ArcgAgbPLc4ZZUeERucM4Pambs7oucO9UkfmDZ6b2JWAT5UN6M8bI85QtaDoRKcgODh+ki1XnOSa2bzB4ut0lcJozBdZYRBRu/mCn3acA3wM+Bn7+YJBvOA6n7ArONW0lCCEqs6wtqP9/IRcqjgw7Axgv37YsHfFC64QKiCmVIUR4ptlzmjNHW7xxc4IqzOId+rvXKFAIHXZHU+YkwOROaPlDpc66hydOFuugKlDG9CeREec4W7WckYvXZwz4lqRGjpHZEAyMMCAO0ZgAJ56D4q6ROEoDOAKgh3RmytAtaoExMJofH7B0sHMQmEYUcfCSvtlaQKqQ3GsCyFUdUaLeAVEC4iDEa7IrtN7EK2HmKoCIyOe7X+Sdqs4GOGKUQiHVYHRU8sdVSjA9S/SEQAM4jCYURjODW47g5KBAfYwXH8HIOQA8FhK88YojBDfvPq0HBgNzMHKrp+BiesM6wl1VZ4GH+tB0TTqBezAsaYAsEZgVOUGqWD0mPbr9ddjru+wZtMklAXG261g3TksPfeuWuWMLAjdzoLLIDoIve1prYLB0sCz49F2gFzAWd9lOpomPWUBZs4YDdgd752TaoUzKjfPApwJuNefNdJ3CkbrBpnN3T7njGhn0LJ7V6B2NQMjk4LYcBtE1kfboSxId01tD2vVnFEZRAYpc0B1/zLNOsMNLDvee/qxn9u9/j1NnTcLI1MPkPZrBe6OufOWqQqjdeNNat2XBZwF6M7JVO2/O5Z9KFyFEcoG1gLC29mA9bwqsKUahQGMA9GBZ0Fl/YD9/pZa/brXmIERaj0ht98Fm7XdsRbAbqAVHYHB6j2RSuCtfk4Odq9PU6tghKoBVQe5SV1RdQw3Wg2jqtJnkqJyULO6N4wLFd7njmk/1/euWrUcD7UG7QLXfXrsS7UKhnuiWTlPHnNlqY7AcE+2FyTXUfh6+kW2KBkEt9/1KekIDFY2QA6Gv5LE7Qs+JscWjAxKOdCKqjB4wDoA5wBuR9BRYpv/JS2ufcJt3yNwhmBVYajcINQBzgX85ZN4VV6ojuMKxYFxY8igINm30yyMkAOixQX2RufHv6YxDC4OCsOvBN8FAczByJ5ElhYaXAQf14oVI8N4Qw5EHedcElIIFyD/D8AjMNyNFISmxTv2QN6wD/6M/dxxpn5RHBQHIoNScgVQgxEX46eZOcOlRQQXX0CJ65xx+2WVgKFA3sx1e3PIsOxynGzkbJZBUBguoB+mfE/aP+g8TR0FkjliCErFGaELcnc4EPGdrTdcv4IQir7xVuG0YWcokGxCZSjAIITQCAyg7YoIToHwdzHiGtFHX7EMlJ2UAWmlybBDRmGwHJgTPgKPt0ZAUFdwX3UGw1B3MJDoyzAYCqj+2W79lEQVhl605Q4Hg1ev7CJ1BruG55wfyN8qJ7puBqKk9POMgUmUQei84SbO71T+pfKd6ihZmlQmUS4lVZ0BXC+qT3mj+oSrE/STqcwVmXPepbhX7FlKBqAEZARGiB3DQFow1EFuYgWuAbG72GXujeJcAWkD6P/0TPNjvyRV9GYcqKaJPlW3xuCU0RThCbSVIhmQIY0644KrpWObgWTnxID1S/EtBzFYdklvrgDVP9s9VwCFD4Qb7nCu4CCynM9WoDppulfqCR6IggH24y1p1BnA1R3RjrrnjOfPWl3RW9UGXFdn7tgBqbgCKDgDsO5wA+cAdN7gSVCLc4F7lfZep6oSANYqZwDXp84O4cHyarT1+m05hKFz7VwBoO4KoOgMwF7UuUQdoi5xbxnX7r05SukxqhlnAFd3OJecaR8vqHhxxq5wLssc4vanIEZcAWD8t/0aP2cXda9A2irnuFbgS0AAEzCAMhBuZ8cytYJ123zOFAhgEgZQAqJ1dkylwbUCXwYCOAADSIFw2wVehcHtNHgsAgEchAF0f/yw0s7UgnLT5ygIYAEMoAsk21eZM0rbK0AAi2CE7vwj7Hb/KhDAYhhA96dcehCc7ABXQggth8Hq/cbNjO4BIXRXGKwjYO4JgPVlMP4PKv+h9ivoAYP0gEF6wCA9YJAeMEgPGKT/APokP5of4EIWAAAAAElFTkSuQmCC' transform='translate(-7.35 -16.35)' height='114' width='67' vector-effect='non-scaling-stroke' style='mix-blend-mode:multiply' opacity='.75'/%3E%3Cpath d='M32.88 69.49l-3-26 3-2-7-20-7 20 3 2-3 26 7 10z' vector-effect='non-scaling-stroke' fill='%23283640' stroke='%23a5db75' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  background-position-x: center;
-  background-position-y: -6px;
-  width: var(--pointout-arrow-width);
-  height: var(--pointout-arrow-height);
-  filter: drop-shadow(0 0 8px var(--pointout-border-color));
-  position: relative;
-  top: 1px;
-  z-index: 1;
-}
-
-.Pointout__box {
-  box-shadow: 0px 0px 0px var(--pointout-border-width)
-      var(--pointout-border-color),
-    0px 0px 12px 4px var(--pointout-border-color);
-  z-index: 9;
-}
-
-.Pointout__dismiss {
-  position: absolute;
-  right: 0;
-  top: calc(var(--pointout-border-width) * -1);
-  transform: translateY(-100%);
-  height: 34px;
-  width: 34px;
-  background-color: var(--pointout-dismiss-button-color);
-}
-
-.Pointout__next,
-.Pointout__previous {
-  position: absolute;
-  right: 3px;
-  top: calc(var(--pointout-border-width) * -1);
-  transform: translateY(-100%);
-  height: 34px;
-  width: 34px;
-  background-color: var(--pointout-navigation-button-color);
-}
-
-.Pointout__next {
-  transform: translateX(-100%) translateY(-100%);
-}
-
-.Pointout__previous {
-  transform: translateX(-200%) translateY(-100%);
-  right: 6px;
-}
-
-.Pointout__dismiss:focus,
-.Pointout--focus-active {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--pointout-dismiss-button-color),
-    inset 0 0 0 4px currentColor;
-}
-
-.Pointout__previous:focus,
-.Pointout__next:focus,
-.Pointout__next.Pointout--focus-active,
-.Pointout__previous.Pointout--focus-active {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--pointout-navigation-button-color),
-    inset 0 0 0 4px currentColor;
-}
-
-.Pointout__arrow--top-right .Pointout__dismiss {
-  right: var(--pointout-arrow-width);
-}
-
-.Pointout__dismiss .Icon svg,
-.Pointout__next .Icon svg,
-.Pointout__previous .Icon svg {
-  height: var(--icon-size);
-  width: var(--icon-size);
-}
-
-.Pointout__dismiss:hover {
-  cursor: pointer;
-}
-
-.Pointout__content {
-  position: relative;
-  background: var(--pointout-background-color);
-  color: var(--pointout-text-color);
-  padding: var(--pointout-padding);
-}
-
-.Pointout__content .Pointout__heading {
-  color: var(--pointout-text-color);
-  margin: 0;
-  padding: 0;
-  font-size: var(--text-size-small);
-  font-weight: var(--font-weight-normal);
-  padding-bottom: var(--space-smallest);
-  margin-bottom: var(--space-smallest);
-}
-
-.Pointout__content .Pointout__heading:after {
-  display: block;
-  content: '';
-  height: 1px;
-  width: 100%;
-  background: linear-gradient(
-    to right,
-    var(--pointout-text-color),
-    var(--pointout-background-color)
-  );
-  transform: translateY(var(--space-smallest));
-}
-
-.Pointout__content p {
-  margin: 0;
-  font-size: var(--text-size-smaller);
-  font-weight: var(--font-weight-light);
-}
-
-.Pointout__content:focus {
-  outline: none;
-}
-
-.Pointout__content:focus:before {
-  background: #fff;
-}
-
-.Pointout__content:before {
-  content: '';
-  height: calc(100% - 12px);
-  width: 2px;
-  position: absolute;
-  left: 3px;
-  top: 6px;
-}
-
-.Pointout--no-arrow .Pointout__arrow {
-  display: none;
-}
-
-.Pointout--auto[class*='top-'] {
-  margin-top: 50px;
-}
-
-.Pointout--auto[class*='bottom-'] {
-  margin-top: -45px;
-}
-
-.Pointout--auto[class*='left-'] {
-  margin-left: 45px;
-}
-
-.Pointout--auto[class*='right-'] {
-  margin-left: -45px;
-}
-
-.Pointout--auto.Pointout__arrow--top-left {
-  transform: translateX(-28px);
-}
-
-.Pointout--auto.Pointout__arrow--top-right {
-  transform: translateX(-100%) translateX(12px);
-}
-
-.Pointout--auto.Pointout__arrow--left-top {
-  transform: translateY(-16px);
-}
-
-.Pointout--auto.Pointout__arrow--left-bottom {
-  transform: translateY(-100%) translateY(16px);
-}
-
-.Pointout--auto.Pointout__arrow--bottom-left {
-  transform: translateY(-100%) translateX(-5px);
-}
-
-.Pointout--auto.Pointout__arrow--bottom-right {
-  transform: translateY(-100%) translateX(-100%) translateX(5px);
-}
-
-.Pointout--auto.Pointout__arrow--right-top {
-  transform: translateX(-100%) translateY(-17px);
-}
-
-.Pointout--auto.Pointout__arrow--right-bottom {
-  transform: translateX(-100%) translateY(-100%) translateY(10px);
-}
-
-.Pointout--auto.Pointout--start[class*='top-'] {
-  transform: none;
-}
-
-.Pointout--auto.Pointout--start[class*='bottom-'] {
-  transform: translateY(-100%);
-}
-
-.Pointout--auto.Pointout--end[class*='top-'] {
-  transform: translateX(-100%);
-}
-
-.Pointout--auto.Pointout--end[class*='bottom-'] {
-  transform: translateY(-100%) translateX(-100%);
-}
-
-.Pointout--auto.Pointout--start[class*='left-'] {
-  transform: none;
-}
-
-.Pointout--auto.Pointout--start[class*='right-'] {
-  transform: translateX(-100%);
-}
-
-.Pointout--auto.Pointout--end[class*='left-'] {
-  transform: translateY(-100%);
-}
-
-.Pointout--auto.Pointout--end[class*='right-'] {
-  transform: translateX(-100%) translateY(-100%);
-}
-
 .text--largest {
   font-size: var(--text-size-largest);
 }
@@ -2415,12 +2113,17 @@ p .Link {
   width: 44px;
 }
 
-.RadioCardGroup__Card.Card--simple {
+.RadioCardGroup__Card {
   width: var(--radio-card-width);
   height: var(--radio-card-height);
   align-content: center;
 }
 
+.RadioCardGroup__Card .Panel__Content {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .RadioCardGroup__Card:hover {
   background-color: var(--gray-20);
 }
@@ -2455,88 +2158,10 @@ p .Link {
   color: var(--accent-success);
 }
 
-:root {
-  --tile-background-color: var(--white);
-  --list-separator: rgba(153, 153, 153, 0.15);
-}
-
-.Card {
-  box-shadow: 0px 0px 13px 1px rgba(0, 0, 0, 0.39);
-  max-width: 476px;
-}
-
-.Card--simple {
-  max-width: 267px;
-  border: 1px solid var(--gray-40);
-  border-radius: 3px;
-  background-color: var(--tile-background-color);
-  color: var(--heading-text-color);
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
-}
-
-.cauldron--theme-dark .Card--simple {
+.cauldron--theme-dark .RadioCardGroup__Card {
   background-color: var(--dark-workspace-color);
 }
 
-.Card__header {
-  color: var(--tile-background-color);
-  background-color: var(--top-bar-background-color);
-  padding: var(--space-three-quarters) var(--space-three-quarters)
-    var(--space-three-quarters) var(--space-large);
-}
-
-.Card--simple .Card__header {
-  border-bottom: 1px solid var(--gray-40);
-  padding: var(--space-small);
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-}
-
-.Card__header h2,
-.Card__header h3,
-.Card__header h4,
-.Card__header h5,
-.Card__header h6 {
-  font-size: var(--text-small-medium);
-  font-weight: var(--font-weight-light);
-  color: var(--heading-text-color);
-  margin: 0;
-}
-
-.Card--simple .Card__header h2,
-.Card--simple .Card__header h3,
-.Card--simple .Card__header h4,
-.Card--simple .Card__header h5,
-.Card--simple .Card__header h6 {
-  font-size: var(--text-size-small);
-  font-weight: var(--font-weight-bold);
-  color: var(--heading-text-color);
-}
-
-.Card__header .OptionsMenu {
-  margin-left: auto;
-}
-
-.Card__header .OptionsMenu__trigger {
-  background: var(--top-bar-background-color);
-  color: var(--tile-background-color);
-  border: none;
-  height: auto;
-}
-
-.Card--simple .Card__content {
-  padding: var(--space-small);
-}
-
-.Card__content ul {
-  box-sizing: border-box;
-}
-
-.Card__footer {
-  padding: var(--space-small);
-  text-align: center;
-}
-
 .Toast {
   top: var(--top-bar-height);
   position: fixed;
@@ -3101,12 +2726,6 @@ button.TooltipTabstop {
   --loader-overlay-background-color: var(--accent-medium);
 }
 
-.Loader--large {
-  --loader-ring-size: 192px;
-  --loader-ring-thickness: 16px;
-  --loader-inner-ring-size: calc(var(--loader-ring-thickness) * 0.5);
-}
-
 .Loader {
   margin: 50px auto;
   position: relative;
@@ -3177,11 +2796,6 @@ button.TooltipTabstop {
   margin-bottom: var(--space-small);
 }
 
-.Loader__overlay--large .Loader__overlay__loader {
-  min-height: 192px;
-  min-width: 192px;
-}
-
 .Loader__overlay__label {
   color: var(--loader-text-color);
   font-size: var(--text-size-normal);
@@ -3203,11 +2817,6 @@ button.TooltipTabstop {
   width: calc(var(--loader-ring-size) * 0.7);
 }
 
-.Loader__overlay--large svg {
-  height: 120px;
-  width: 120px;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -3443,21 +3052,25 @@ button.TooltipTabstop {
 }
 
 :root {
-  --tabs-border-color: #b3bfc6;
+  --tabs-border-color: var(--stroke-light);
   --tab-shadow-color: var(--accent-primary);
-  --tab-inactive-background-color: var(--gray-20);
-  --tab-inactive-text-color: var(--gray-60);
-  --tab-active-background-color: var(--white);
+  --tab-inactive-background-color: #fff;
+  --tab-inactive-text-color: var(--gray-80);
+  --tab-active-background-color: #fff;
+  --tab-hover-background-color: var(--gray-20);
+  --tab-panel-color: var(--gray-80);
   --tabs-active-text-color: var(--gray-90);
 }
 
 .cauldron--theme-dark {
-  --tabs-border-color: #5d676f;
+  --tabs-border-color: var(--stroke-dark);
   --tab-shadow-color: var(--accent-info);
   --tab-inactive-background-color: var(--accent-medium);
   --tab-inactive-text-color: var(--accent-light);
-  --tab-active-background-color: var(--accent-dark);
-  --tabs-active-text-color: var(--white);
+  --tab-active-background-color: var(--accent-medium);
+  --tab-hover-background-color: var(--accent-dark);
+  --tab-panel-color: var(--accent-light);
+  --tabs-active-text-color: #fff;
 }
 
 .Tabs {
@@ -3474,6 +3087,13 @@ button.TooltipTabstop {
   display: inline-block;
 }
 
+.Tabs--horizontal {
+  width: 100%;
+  border: 1px solid var(--tabs-border-color);
+  background-color: var(--tab-inactive-background-color);
+  border-bottom: 0;
+}
+
 .Tablist {
   display: flex;
   flex-direction: row;
@@ -3484,6 +3104,10 @@ button.TooltipTabstop {
   flex-direction: column;
 }
 
+.Tabs--horizontal .Tablist {
+  border-left: 0;
+}
+
 .Tab {
   display: flex;
   justify-content: center;
@@ -3507,32 +3131,40 @@ button.TooltipTabstop {
   border-right: none;
 }
 
+.Tabs--horizontal .Tab {
+  border-top: 0;
+}
+
 .cauldron--theme-light .Tabs--vertical .Tab:last-child {
   border-bottom: 1px solid var(--tabs-border-color);
 }
 
 .Tab:hover {
   cursor: pointer;
-  background-color: var(--tab-active-background-color);
+  background-color: var(--tab-hover-background-color);
   color: var(--tabs-active-text-color);
 }
 
 .Tab--active {
   color: var(--tabs-active-text-color);
   background-color: var(--tab-active-background-color);
-  font-weight: bold;
+  font-weight: var(--font-weight-medium);
   text-decoration: none;
   box-shadow: inset 0 4px 0 var(--tab-shadow-color);
   z-index: 1;
 }
 
+.Tab--active:hover {
+  background-color: var(--tab-active-background-color);
+}
+
 .Tabs--vertical .Tab--active {
   box-shadow: inset 4px 0 0 var(--tab-shadow-color);
 }
 
 .TabPanel {
   overflow-wrap: break-word;
-  color: var(--tabs-active-text-color);
+  color: var(--tab-panel-color);
   background-color: var(--tab-active-background-color);
   border: 1px solid var(--tabs-border-color);
   padding: 1rem;
@@ -3642,7 +3274,16 @@ button.TooltipTabstop {
   background: var(--table-header-background-color);
   font-weight: var(--font-weight-medium);
   color: var(--table-header-text-color);
-  border-bottom: 3px solid var(--table-row-border-color);
+  border-bottom: 2px solid var(--table-row-border-color);
+}
+
+.TableBody .TableHeader {
+  border-bottom-width: 1px;
+  border-right: 2px solid var(--table-row-border-color);
+}
+
+.TableBody .TableRow:last-child .TableHeader {
+  border-bottom: none;
 }
 
 .TableHeader[aria-sort] {
@@ -3729,6 +3370,11 @@ button.TooltipTabstop {
   border-bottom: 2px solid var(--gray-40);
 }
 
+.Table--border .TableBody .TableHeader {
+  border-bottom-width: 1px;
+  border-right: 2px solid var(--table-row-border-color);
+}
+
 .cauldron--theme-dark .Table--border,
 .cauldron--theme-dark .Table--border .TableHeader,
 .cauldron--theme-dark .Table--border .TableFooter,
@@ -4234,62 +3880,6 @@ fieldset.Panel {
   margin: var(--popover-alert-apply-button-margin);
 }
 
-:root {
-  --issue-panel-border-color: var(--gray-40);
-  --issue-panel-header-background-color: var(--gray-20);
-  --issue-panel-header-color: var(--gray-90);
-  --issue-panel-content-background-color: var(--white);
-  --issue-panel-content-color: var(--gray-60);
-}
-
-.IssuePanel {
-  border: 1px solid var(--issue-panel-border-color);
-}
-
-.IssuePanel__Header {
-  background-color: var(--issue-panel-header-background-color);
-  color: var(--issue-panel-header-color);
-  font-size: var(--text-size-normal);
-  display: flex;
-  border-bottom: 1px solid var(--issue-panel-border-color);
-  align-items: center;
-  padding: var(--space-half) 0;
-}
-
-.IssuePanel__Header-title {
-  flex-grow: 1;
-  display: flex;
-  font-weight: var(--font-weight-bold);
-  padding-left: var(--space-small);
-}
-
-.IssuePanel__Header-actions {
-  flex-grow: 1;
-  text-align: right;
-  margin-right: var(--space-smallest);
-}
-
-.IssuePanel__Content {
-  font-size: var(--text-size-smaller);
-  background-color: var(--issue-panel-content-background-color);
-  color: var(--issue-panel-content-color);
-  padding: var(--space-small);
-}
-
-/* Dark Theme */
-
-.cauldron--theme-dark {
-  --issue-panel-border-color: #5d676f;
-  --issue-panel-header-background-color: var(--accent-dark);
-  --issue-panel-header-color: var(--white);
-  --issue-panel-content-background-color: var(--accent-medium);
-  --issue-panel-content-color: var(--accent-light);
-}
-
-.cauldron--theme-dark .IssuePanel__Header {
-  border-bottom: 1px solid var(--issue-panel-border-color);
-}
-
 :root {
   --top-nav-height: 3rem;
   --top-nav-background-color: var(--top-bar-background-color);
@@ -4318,7 +3908,6 @@ fieldset.Panel {
   align-items: center;
   background-color: var(--top-nav-background-color);
   color: var(--top-nav-text-color);
-  border-bottom: 1px solid var(--top-nav-border-bottom-color);
 }
 
 .NavBar > ul {
@@ -4326,6 +3915,7 @@ fieldset.Panel {
   list-style-type: none;
   display: flex;
   z-index: var(--z-index-top-nav);
+  border-bottom: 1px solid var(--top-nav-border-bottom-color);
 }
 
 .NavBar > ul > li {
@@ -4337,7 +3927,6 @@ fieldset.Panel {
   display: flex;
   align-items: center;
   background-color: var(--top-nav-background-color);
-  border-bottom: 1px solid var(--top-nav-border-bottom-color);
   border-right: 1px solid var(--top-nav-box-shadow-color);
   transition: background-color 0.3s ease;
 }
@@ -4442,6 +4031,12 @@ fieldset.Panel {
   margin-right: var(--space-smallest);
 }
 
+@media (max-width: 64rem) {
+  .NavBar {
+    padding: 0 var(--space-small);
+  }
+}
+
 @media (max-width: 61.25rem) {
   .NavBar > ul > li {
     font-size: var(--text-size-small);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "5.13.0",
+  "version": "6.0.0-canary.28b1eccb",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",