banhaten 0.1.3 → 0.3.0

package/registry/components/expanded/iconExplorer.css

@@ -1,764 +0,0 @@
-.icons-page {
-  --icons-bg: var(--bh-bg-grouped);
-  --icons-surface: var(--bh-bg-raised);
-  --icons-surface-soft: var(--bh-bg-subtle);
-  --icons-text: var(--bh-content-default);
-  --icons-muted: var(--bh-content-muted);
-  --icons-border: var(--bh-border-subtle);
-  --icons-border-strong: var(--bh-border-strong);
-  --icons-brand: var(--bh-interactive-brand-default);
-  --icons-brand-dark: var(--bh-content-brand-strong);
-  --icons-brand-soft: var(--bh-bg-brand-soft);
-  --icons-warm: var(--bh-content-warning-default);
-  --icons-warm-soft: var(--bh-bg-warning-subtle);
-  --icons-danger: var(--bh-content-danger-default);
-  --icons-radius: var(--bh-radius-lg-8);
-  --icons-shadow: var(--shadow-component-default);
-
-  min-height: 100vh;
-  display: grid;
-  grid-template-columns: var(--bh-icon-explorer-nav-column) minmax(0, 1fr);
-  background: var(--icons-bg);
-  color: var(--icons-text);
-  font-family: var(--bh-font-family);
-  letter-spacing: 0;
-}
-
-.icons-page *,
-.icons-page *::before,
-.icons-page *::after {
-  box-sizing: border-box;
-}
-
-.icons-page button,
-.icons-page input,
-.icons-page select {
-  font: inherit;
-}
-
-.icons-page button {
-  cursor: pointer;
-}
-
-.icons-page button:disabled {
-  cursor: wait;
-  opacity: var(--bh-opacity-subtle);
-}
-
-.icons-page h1,
-.icons-page h2,
-.icons-page h3,
-.icons-page p {
-  margin: 0;
-}
-
-.icons-page iconify-icon {
-  display: inline-block;
-  color: currentColor;
-  vertical-align: -0.14em;
-}
-
-.icons-sidebar {
-  height: 100vh;
-  position: sticky;
-  top: 0;
-  overflow: auto;
-  border-right: var(--bh-space-xxxs-1) solid var(--icons-border);
-  background: var(--icons-surface);
-  padding: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2)) calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-}
-
-.icons-sidebar__header {
-  display: flex;
-  align-items: center;
-  gap: var(--bh-space-lg-10);
-  margin-bottom: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-}
-
-.icons-sidebar__header h1 {
-  font-size: var(--bh-text-heading-xs-semibold-font-size);
-  line-height: 1.2;
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.icons-sidebar__header p,
-.icons-topbar p,
-.icons-panel__header span,
-.icons-pack__copy span,
-.icons-compare-card p,
-.icons-compare-card > div:first-child span {
-  color: var(--icons-muted);
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  line-height: 1.35;
-}
-
-.icons-mark {
-  width: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2));
-  height: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2));
-  border-radius: var(--icons-radius);
-  display: grid;
-  place-items: center;
-  color: var(--bh-content-on-brand);
-  background: var(--icons-text);
-}
-
-.icons-sidebar__tools {
-  display: grid;
-  gap: var(--bh-space-lg-10);
-  margin: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) 0;
-}
-
-.icons-input,
-.icons-select {
-  width: 100%;
-  height: calc(var(--bh-space-6xl-32) + var(--bh-space-sm-6));
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--icons-radius);
-  background: var(--bh-bg-raised);
-  color: var(--icons-text);
-  padding: 0 var(--bh-space-xl-12);
-  outline: none;
-}
-
-.icons-input:focus,
-.icons-select:focus {
-  border-color: var(--icons-brand);
-  box-shadow: var(--shadow-button-focus);
-}
-
-.icons-pack-list {
-  display: grid;
-  gap: var(--bh-space-md-8);
-}
-
-.icons-pack {
-  width: 100%;
-  display: grid;
-  grid-template-columns: var(--bh-icon-explorer-pack-column) minmax(0, 1fr);
-  gap: var(--bh-space-lg-10);
-  align-items: center;
-  border: var(--bh-space-xxxs-1) solid transparent;
-  border-radius: var(--icons-radius);
-  background: transparent;
-  color: var(--icons-text);
-  padding: calc(var(--bh-space-md-8) + var(--bh-space-xxxs-1));
-  text-align: left;
-}
-
-.icons-pack:hover {
-  background: var(--bh-bg-muted);
-}
-
-.icons-pack.is-active {
-  background: var(--icons-brand-soft);
-  border-color: var(--bh-border-brand-subtle);
-}
-
-.icons-pack__glyph {
-  width: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
-  height: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
-  border-radius: var(--icons-radius);
-  display: grid;
-  place-items: center;
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  background: var(--bh-bg-raised);
-  color: var(--icons-brand-dark);
-}
-
-.icons-pack__copy {
-  min-width: 0;
-  display: grid;
-  gap: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1));
-}
-
-.icons-pack__copy strong {
-  min-width: 0;
-  font-size: var(--bh-text-body-xs-regular-font-size);
-  line-height: 1.25;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.icons-main {
-  min-width: 0;
-}
-
-.icons-topbar {
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  min-height: var(--bh-icon-explorer-topbar-min-height);
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-  align-items: center;
-  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) calc(var(--bh-space-5xl-24) + var(--bh-space-xxs-2));
-  border-bottom: var(--bh-space-xxxs-1) solid var(--icons-border);
-  background: var(--bh-icon-explorer-topbar-bg);
-  backdrop-filter: blur(var(--bh-space-2xl-14));
-}
-
-.icons-topbar h2 {
-  font-size: var(--bh-text-heading-md-semibold-font-size);
-  line-height: 1.15;
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.icons-topbar code {
-  color: var(--icons-brand-dark);
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-}
-
-.icons-tabs {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--bh-space-xs-4);
-  padding: var(--bh-space-xs-4);
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--icons-radius);
-  background: var(--bh-bg-raised);
-}
-
-.icons-tab {
-  min-height: var(--bh-space-6xl-32);
-  border: 0;
-  border-radius: var(--bh-radius-md-6);
-  padding: 0 calc(var(--bh-space-lg-10) + var(--bh-space-xxxs-1));
-  background: transparent;
-  color: var(--icons-muted);
-  font-size: var(--bh-text-body-xs-regular-font-size);
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.icons-tab.is-active {
-  background: var(--icons-text);
-  color: var(--bh-content-on-brand);
-}
-
-.icons-content {
-  max-width: var(--bh-icon-explorer-canvas-max-width);
-  margin: 0 auto;
-  padding: var(--bh-space-5xl-24) calc(var(--bh-space-5xl-24) + var(--bh-space-xxs-2)) var(--bh-space-8xl-48);
-  display: grid;
-  gap: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
-}
-
-.icons-panel,
-.icons-compare-card {
-  background: var(--icons-surface);
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--icons-radius);
-  box-shadow: var(--icons-shadow);
-}
-
-.icons-summary-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.25fr) minmax(var(--bh-icon-explorer-preview-column), 0.75fr);
-  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-}
-
-.icons-hero-panel {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-  align-items: center;
-  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-}
-
-.icons-hero-glyph {
-  width: var(--bh-icon-explorer-detail-preview-size);
-  height: var(--bh-icon-explorer-detail-preview-size);
-  border-radius: var(--icons-radius);
-  display: grid;
-  place-items: center;
-  color: var(--icons-brand-dark);
-  background: var(--icons-brand-soft);
-  border: var(--bh-space-xxxs-1) solid var(--bh-border-brand-subtle);
-}
-
-.icons-hero-copy {
-  min-width: 0;
-  display: grid;
-  gap: var(--bh-space-lg-10);
-}
-
-.icons-hero-copy h3 {
-  font-size: var(--bh-text-heading-lg-semibold-font-size);
-  line-height: 1.05;
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.icons-hero-copy p {
-  max-width: var(--bh-icon-explorer-detail-max-width);
-  color: var(--icons-muted);
-  font-size: var(--bh-text-body-sm-regular-font-size);
-  line-height: 1.55;
-}
-
-.icons-tags,
-.icons-links,
-.icons-variants,
-.icons-button-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--bh-space-md-8);
-}
-
-.icons-tag {
-  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xxs-2));
-  border-radius: var(--bh-radius-full);
-  display: inline-flex;
-  align-items: center;
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  background: var(--bh-bg-subtle);
-  color: var(--icons-text);
-  padding: 0 calc(var(--bh-space-md-8) + var(--bh-space-xxxs-1));
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.icons-tag.is-warm {
-  background: var(--icons-warm-soft);
-  border-color: var(--bh-border-warning-subtle);
-  color: var(--bh-content-warning-strong);
-}
-
-.icons-links a {
-  color: var(--icons-brand-dark);
-  text-decoration: none;
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.icons-links a:hover {
-  text-decoration: underline;
-}
-
-.icons-panel__header {
-  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--bh-space-xl-12);
-}
-
-.icons-panel__header h3 {
-  font-size: var(--bh-text-body-md-font-size);
-  line-height: 1.2;
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.icons-score-list,
-.icons-controls {
-  display: grid;
-  gap: var(--bh-space-xl-12);
-  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-}
-
-.icons-score {
-  display: grid;
-  gap: var(--bh-space-sm-6);
-}
-
-.icons-score span {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--bh-space-xl-12);
-  color: var(--icons-text);
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-style: normal;
-}
-
-.icons-score em {
-  color: var(--icons-muted);
-  font-style: normal;
-}
-
-.icons-score div {
-  height: var(--bh-space-md-8);
-  overflow: hidden;
-  border-radius: var(--bh-radius-full);
-  background: var(--bh-bg-muted);
-}
-
-.icons-score i {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  background: var(--icons-brand);
-}
-
-.icons-variants {
-  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-}
-
-.icons-variant {
-  min-height: var(--bh-space-6xl-32);
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--bh-radius-full);
-  background: var(--bh-bg-raised);
-  color: var(--icons-text);
-  padding: 0 var(--bh-space-xl-12);
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.icons-variant.is-active {
-  border-color: var(--icons-brand);
-  background: var(--icons-brand);
-  color: var(--bh-content-on-brand);
-}
-
-.icons-sample-grid {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(var(--bh-icon-explorer-grid-column-min), 1fr));
-  gap: var(--bh-space-lg-10);
-  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-}
-
-.icons-sample {
-  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--icons-radius);
-  background: var(--icons-surface-soft);
-  color: var(--icons-text);
-  display: grid;
-  place-items: center;
-  gap: var(--bh-space-md-8);
-  padding: var(--bh-space-lg-10) var(--bh-space-sm-6);
-}
-
-.icons-sample span {
-  max-width: 100%;
-  color: var(--icons-muted);
-  font-size: var(--bh-text-body-3xs-regular-font-size);
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.icons-component-grid {
-  display: grid;
-  grid-template-columns: minmax(var(--bh-icon-explorer-preview-column), 0.9fr) minmax(0, 1.1fr);
-  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-}
-
-.icons-controls label {
-  min-height: var(--bh-space-8xl-48);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--bh-space-xl-12);
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--icons-radius);
-  background: var(--icons-surface-soft);
-  padding: var(--bh-space-lg-10) var(--bh-space-xl-12);
-}
-
-.icons-controls span {
-  color: var(--icons-text);
-  font-size: var(--bh-text-body-xs-regular-font-size);
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.icons-controls input[type="range"] {
-  width: var(--bh-icon-explorer-swatch-width);
-  accent-color: var(--icons-brand);
-}
-
-.icons-preview {
-  display: grid;
-  gap: var(--bh-space-2xl-14);
-  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-}
-
-.preview-button {
-  min-height: var(--bh-space-7xl-40);
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--icons-radius);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--bh-space-md-8);
-  background: var(--bh-bg-raised);
-  color: var(--icons-text);
-  padding: 0 calc(var(--bh-space-xl-12) + var(--bh-space-xxxs-1));
-  font-size: var(--bh-text-body-xs-regular-font-size);
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.preview-button.is-primary {
-  border-color: var(--icons-text);
-  background: var(--icons-text);
-  color: var(--bh-content-on-brand);
-}
-
-.preview-button.is-danger {
-  border-color: var(--bh-border-danger-subtle);
-  background: var(--bh-bg-danger-subtle);
-  color: var(--icons-danger);
-}
-
-.preview-button.is-icon-only {
-  width: var(--bh-space-7xl-40);
-  padding: 0;
-}
-
-.icons-field-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) var(--bh-icon-explorer-drawer-column);
-  gap: var(--bh-space-lg-10);
-}
-
-.icons-field {
-  height: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--icons-radius);
-  display: flex;
-  align-items: center;
-  gap: var(--bh-space-md-8);
-  background: var(--bh-bg-raised);
-  color: var(--icons-muted);
-  padding: 0 var(--bh-space-xl-12);
-  font-size: var(--bh-text-body-xs-regular-font-size);
-}
-
-.icons-field.is-select {
-  justify-content: space-between;
-}
-
-.icons-field.is-select span {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--bh-space-md-8);
-  min-width: 0;
-}
-
-.icons-menu-preview,
-.icons-table-preview,
-.icons-empty-preview {
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--icons-radius);
-  background: var(--bh-bg-raised);
-  overflow: hidden;
-}
-
-.icons-menu-row,
-.icons-table-row {
-  display: grid;
-  align-items: center;
-  gap: var(--bh-space-lg-10);
-  min-height: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
-  border-bottom: var(--bh-space-xxxs-1) solid var(--icons-border);
-  color: var(--icons-text);
-  padding: 0 var(--bh-space-xl-12);
-  font-size: var(--bh-text-body-xs-regular-font-size);
-}
-
-.icons-menu-row:last-child,
-.icons-table-row:last-child {
-  border-bottom: 0;
-}
-
-.icons-menu-row {
-  grid-template-columns: var(--bh-icon-explorer-row-icon-column) minmax(0, 1fr) auto;
-}
-
-.icons-menu-row em {
-  min-height: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
-  border-radius: var(--bh-radius-full);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--bh-space-xs-4);
-  background: var(--bh-bg-success-subtle);
-  color: var(--bh-content-success-strong);
-  padding: 0 var(--bh-space-md-8);
-  font-size: var(--bh-text-body-3xs-regular-font-size);
-  font-style: normal;
-  font-weight: var(--bh-font-weight-bold);
-}
-
-.icons-menu-row small {
-  color: var(--icons-muted);
-  font-size: var(--bh-text-body-2xs-regular-font-size);
-}
-
-.icons-table-row {
-  grid-template-columns: var(--bh-icon-explorer-list-column) 1.1fr 0.8fr 0.8fr auto;
-}
-
-.icons-empty-preview {
-  min-height: var(--bh-icon-explorer-selected-min-height);
-  display: grid;
-  place-items: center;
-  padding: var(--bh-space-5xl-24);
-  text-align: center;
-}
-
-.icons-empty-preview > div {
-  max-width: var(--bh-icon-explorer-request-max-width);
-  display: grid;
-  place-items: center;
-  gap: var(--bh-space-lg-10);
-}
-
-.icons-empty-preview span {
-  width: calc(var(--bh-space-8xl-48) + var(--bh-space-sm-6));
-  height: calc(var(--bh-space-8xl-48) + var(--bh-space-sm-6));
-  display: grid;
-  place-items: center;
-  border-radius: var(--icons-radius);
-  background: var(--bh-bg-brand-subtle);
-  color: var(--icons-brand-dark);
-}
-
-.icons-empty-preview h3 {
-  font-size: var(--bh-text-body-md-font-size);
-  line-height: 1.2;
-}
-
-.icons-empty-preview p {
-  color: var(--icons-muted);
-  font-size: var(--bh-text-body-xs-regular-font-size);
-  line-height: 1.45;
-}
-
-.icons-catalog-tools {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) var(--bh-icon-explorer-group-column) auto;
-  gap: var(--bh-space-lg-10);
-  align-items: center;
-  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
-}
-
-.icons-error {
-  border: var(--bh-space-xxxs-1) solid var(--bh-border-danger-subtle);
-  border-radius: var(--icons-radius);
-  background: var(--bh-bg-danger-subtle);
-  color: var(--icons-danger);
-  padding: var(--bh-space-2xl-14);
-  font-size: var(--bh-text-body-xs-regular-font-size);
-}
-
-.icons-catalog-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--bh-icon-explorer-grid-card-min), 1fr));
-  gap: var(--bh-space-lg-10);
-}
-
-.icons-catalog-card {
-  min-height: var(--bh-icon-explorer-grid-card-min-height);
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--icons-radius);
-  display: grid;
-  grid-template-rows: 1fr auto;
-  place-items: center;
-  gap: var(--bh-space-md-8);
-  background: var(--bh-bg-raised);
-  color: var(--icons-text);
-  padding: var(--bh-space-xl-12) var(--bh-space-md-8) var(--bh-space-lg-10);
-  text-align: center;
-}
-
-.icons-catalog-card span {
-  max-width: 100%;
-  color: var(--icons-muted);
-  font-size: var(--bh-text-body-3xs-regular-font-size);
-  line-height: 1.25;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.icons-load-more {
-  justify-self: center;
-}
-
-.icons-compare-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--bh-icon-explorer-family-card-min), 1fr));
-  gap: var(--bh-space-xl-12);
-}
-
-.icons-compare-card {
-  display: grid;
-  gap: var(--bh-space-xl-12);
-  padding: var(--bh-space-2xl-14);
-}
-
-.icons-compare-card > div:first-child {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--bh-space-lg-10);
-}
-
-.icons-compare-card strong {
-  font-size: var(--bh-text-body-xs-regular-font-size);
-}
-
-.icons-compare-icons {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: var(--bh-space-md-8);
-}
-
-.icons-compare-icons span {
-  width: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
-  height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
-  border: var(--bh-space-xxxs-1) solid var(--icons-border);
-  border-radius: var(--bh-radius-md-6);
-  display: grid;
-  place-items: center;
-  background: var(--icons-surface-soft);
-  color: var(--icons-text);
-}
-
-/* Approved exception: media query breakpoints stay literal because CSS vars are not reliable in query conditions. */
-@media (max-width: 980px) {
-  .icons-page {
-    grid-template-columns: 1fr;
-  }
-
-  .icons-sidebar {
-    position: relative;
-    height: auto;
-    border-right: 0;
-    border-bottom: var(--bh-space-xxxs-1) solid var(--icons-border);
-  }
-
-  .icons-pack-list {
-    grid-template-columns: repeat(auto-fill, minmax(var(--bh-icon-explorer-mobile-card-min), 1fr));
-  }
-
-  .icons-topbar,
-  .icons-summary-grid,
-  .icons-component-grid,
-  .icons-field-row,
-  .icons-catalog-tools {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 620px) {
-  .icons-topbar,
-  .icons-content,
-  .icons-sidebar {
-    padding-left: var(--bh-space-3xl-16);
-    padding-right: var(--bh-space-3xl-16);
-  }
-
-  .icons-sample-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .icons-table-row {
-    grid-template-columns: var(--bh-icon-explorer-list-column) minmax(0, 1fr) auto;
-  }
-
-  .icons-table-row > span {
-    display: none;
-  }
-}