@surflane/ui 0.5.0 → 0.7.0

package/dist/css/rules/toolbar.css

@@ -0,0 +1,62 @@
+/* Toolbar, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-toolbar-button[aria-pressed='true'] {
+    background: var(--selected);
+    border-color: var(--control-border);
+    color: var(--ink);
+  }
+  .pui-toolbar-button[data-disabled],
+  .pui-toolbar-input[data-disabled] {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .pui-toolbar {
+    padding: var(--space-1);
+    border-radius: var(--radius-md);
+    background: var(--surface);
+    gap: var(--space-2);
+  }
+  .pui-toolbar-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+  .pui-toolbar-button,
+  .pui-toolbar-link {
+    background: transparent;
+    border: 0;
+    border-radius: max(0px, calc(var(--radius-md) - var(--space-1)));
+    text-decoration: none;
+  }
+  .pui-toolbar-input {
+    width: 160px;
+    max-width: 100%;
+    border: 0;
+    border-radius: max(0px, calc(var(--radius-md) - var(--space-1)));
+    background: var(--canvas);
+  }
+  .pui-toolbar-separator {
+    flex: none;
+    background: transparent;
+  }
+  .pui-toolbar-separator[data-orientation='vertical'] {
+    width: 1px;
+    height: 24px;
+    margin-inline: var(--space-1);
+  }
+  .pui-toolbar-separator[data-orientation='horizontal'] {
+    height: 1px;
+    width: 100%;
+    margin-block: var(--space-1);
+  }
+  .pui-toolbar[data-orientation='vertical'] .pui-toolbar-group {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+}

package/dist/css/rules/tooltip.css

@@ -0,0 +1,38 @@
+/* Tooltip, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-tooltip-positioner {
+    z-index: var(--layer-tooltip);
+  }
+  .pui-tooltip {
+    border: 0;
+    background: var(--tooltip-background);
+    color: var(--tooltip-foreground);
+    padding: var(--space-2) var(--space-3);
+    max-width: 256px;
+    font-size: var(--type-caption-size);
+    letter-spacing: var(--type-caption-tracking);
+    line-height: var(--type-caption-leading);
+  }
+  /* The shortcut follows the label in the same face, a step quieter. */
+  .pui-tooltip-shortcut {
+    margin-inline-start: var(--space-2);
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    opacity: 0.72;
+  }
+  @media (forced-colors: active) {
+    .pui-tooltip {
+      background: CanvasText;
+      color: Canvas;
+      forced-color-adjust: none;
+    }
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-tooltip {
+    padding: var(--ui-tooltip-padding-y) var(--ui-tooltip-padding-x);
+  }
+}

package/dist/css/rules/tree.css

@@ -0,0 +1,98 @@
+/* Tree view, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-tree-scroll {
+    min-inline-size: 0;
+  }
+  .pui-tree-viewport {
+    block-size: 100%;
+  }
+  .pui-tree {
+    position: relative;
+    min-inline-size: 0;
+  }
+  .pui-tree-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding-inline-end: var(--space-2);
+    border-radius: var(--radius-md);
+    color: var(--ink);
+    cursor: default;
+    outline-offset: var(--focus-ring-inset);
+    transition: background-color var(--duration-fast) var(--ease-out);
+  }
+  .pui-tree-item:hover {
+    background: var(--interaction-hover-bg);
+  }
+  .pui-tree-item[aria-selected='true'] {
+    background: var(--selected);
+  }
+  .pui-tree-item:focus-visible {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+  }
+  .pui-tree-item[aria-disabled='true'] {
+    color: var(--ink-muted);
+  }
+  .pui-tree-toggle,
+  .pui-tree-leaf {
+    inline-size: 32px;
+    block-size: 32px;
+    flex: 0 0 32px;
+  }
+  .pui-tree-toggle {
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-full);
+    background: transparent;
+    color: inherit;
+  }
+  .pui-tree-toggle:hover:not(:disabled) {
+    background: var(--interaction-hover-bg);
+  }
+  .pui-tree-toggle:active:not(:disabled) {
+    background: var(--interaction-active-bg);
+  }
+  .pui-tree-toggle svg[data-expanded] {
+    rotate: 90deg;
+  }
+  .pui-tree:dir(rtl) .pui-tree-toggle svg[data-expanded] {
+    rotate: -90deg;
+  }
+  .pui-tree-label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .pui-tree-empty {
+    padding: var(--space-4);
+    color: var(--ink-muted);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-tree-item {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-tree-item[aria-selected='true'] {
+      background: Highlight;
+      color: HighlightText;
+    }
+    .pui-tree-item[aria-disabled='true'] {
+      color: GrayText;
+    }
+    .pui-tree-item:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-tree-item {
+    font-size: var(--ui-font);
+  }
+}

package/dist/css/rules/typography.css

@@ -0,0 +1,3 @@
+/* Heading, Text and Prose, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;

package/dist/css/scroll-area.css

@@ -0,0 +1,8 @@
+/* Scroll Area, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/scroll-area.css';

package/dist/css/select.css

@@ -0,0 +1,12 @@
+/* Select, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/field-control.css';
+@import './rules/sizing.css';
+@import './rules/popup.css';
+@import './rules/item.css';
+@import './rules/icon.css';
+@import './rules/select.css';

package/dist/css/separator.css

@@ -0,0 +1,9 @@
+/* Separator, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import '@surflane/design-tokens/presentation/separator.css';
+@import './rules/separator.css';

package/dist/css/sheet.css

@@ -0,0 +1,11 @@
+/* Sheet, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/icon.css';
+@import '@surflane/design-tokens/controls.css';
+@import './rules/panel.css';
+@import './rules/sheet.css';

package/dist/css/sizing.css

@@ -0,0 +1,7 @@
+/* SizeProvider and the size scheme, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';

package/dist/css/skeleton.css

@@ -0,0 +1,8 @@
+/* Skeleton, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/skeleton.css';

package/dist/css/slider.css

@@ -0,0 +1,8 @@
+/* Slider, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/slider.css';

package/dist/css/sparkline.css

@@ -0,0 +1,8 @@
+/* Sparkline, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/sparkline.css';

package/dist/css/spinner.css

@@ -0,0 +1,8 @@
+/* Spinner, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/spinner.css';

package/dist/css/stat.css

@@ -0,0 +1,9 @@
+/* Stat, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/icon.css';
+@import './rules/stat.css';

package/dist/css/styles.css

@@ -0,0 +1,100 @@
+/* Every component stylesheet, once each, in cascade order. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/field-control.css';
+@import './rules/sizing.css';
+@import './rules/input.css';
+@import './rules/popup.css';
+@import './rules/item.css';
+@import './rules/icon.css';
+@import './rules/select.css';
+@import './rules/tooltip.css';
+@import './rules/popover.css';
+@import './rules/button.css';
+@import './rules/menu.css';
+@import './rules/scroll-area.css';
+@import '@surflane/design-tokens/controls.css';
+@import './rules/dialog.css';
+@import './rules/panel.css';
+@import './rules/drawer.css';
+@import './rules/alert-dialog.css';
+@import './rules/form.css';
+@import './rules/field.css';
+@import './rules/fieldset.css';
+@import './rules/choice.css';
+@import './rules/textarea.css';
+@import '@surflane/design-tokens/presentation/table.css';
+@import './rules/table.css';
+@import './rules/checkbox.css';
+@import './rules/radio-group.css';
+@import './rules/switch.css';
+@import './rules/choice-label.css';
+@import './rules/tabs.css';
+@import './rules/disclosure.css';
+@import './rules/accordion.css';
+@import './rules/collapsible.css';
+@import './rules/gauge.css';
+@import './rules/progress.css';
+@import './rules/spinner.css';
+@import './rules/skeleton.css';
+@import './rules/input-group.css';
+@import './rules/combobox.css';
+@import './rules/number-field.css';
+@import './rules/slider.css';
+@import './rules/bar.css';
+@import './rules/toggle.css';
+@import './rules/toolbar.css';
+@import './rules/menubar.css';
+@import './rules/context-menu.css';
+@import '@surflane/design-tokens/presentation/link.css';
+@import './rules/link.css';
+@import './rules/preview-card.css';
+@import './rules/navigation-menu.css';
+@import './rules/otp-field.css';
+@import './rules/toast.css';
+@import '@surflane/design-tokens/presentation/badge.css';
+@import './rules/badge.css';
+@import './rules/file-upload.css';
+@import './rules/filter-bar.css';
+@import './rules/app-shell.css';
+@import './rules/tree.css';
+@import './rules/date-picker.css';
+@import './rules/chart.css';
+@import '@surflane/design-tokens/foundations/layout.css';
+@import './rules/layout.css';
+@import '@surflane/design-tokens/presentation/card.css';
+@import './rules/card.css';
+@import '@surflane/design-tokens/presentation/avatar.css';
+@import './rules/avatar.css';
+@import '@surflane/design-tokens/presentation/list.css';
+@import './rules/list.css';
+@import './rules/stat.css';
+@import './rules/sparkline.css';
+@import '@surflane/design-tokens/presentation/inline-message.css';
+@import './rules/inline-message.css';
+@import './rules/syntax-highlighter.css';
+@import '@surflane/design-tokens/presentation/code.css';
+@import './rules/code.css';
+@import '@surflane/design-tokens/presentation/empty-state.css';
+@import './rules/empty-state.css';
+@import '@surflane/design-tokens/presentation/breadcrumbs.css';
+@import './rules/breadcrumbs.css';
+@import '@surflane/design-tokens/foundations/typography.css';
+@import './rules/typography.css';
+@import './rules/markdown.css';
+@import '@surflane/design-tokens/presentation/separator.css';
+@import './rules/separator.css';
+@import '@surflane/design-tokens/presentation/pagination.css';
+@import './rules/pagination.css';
+@import './rules/bottom-navigation.css';
+@import '@surflane/design-tokens/foundations/page-header.css';
+@import './rules/page-header.css';
+@import './rules/native-select.css';
+@import './rules/autocomplete.css';
+@import './rules/checkbox-group.css';
+@import './rules/toggle-group.css';
+@import './rules/sheet.css';
+@import './rules/meter.css';

package/dist/css/switch.css

@@ -0,0 +1,9 @@
+/* Switch, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/choice.css';
+@import './rules/switch.css';

package/dist/css/syntax-highlighter.css

@@ -0,0 +1,9 @@
+/* Syntax highlighter, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/scroll-area.css';
+@import './rules/syntax-highlighter.css';

package/dist/css/table.css

@@ -0,0 +1,12 @@
+/* Table, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/icon.css';
+@import './rules/button.css';
+@import './rules/scroll-area.css';
+@import '@surflane/design-tokens/presentation/table.css';
+@import './rules/table.css';

package/dist/css/tabs.css

@@ -0,0 +1,8 @@
+/* Tabs, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/tabs.css';

package/dist/css/textarea.css

@@ -0,0 +1,10 @@
+/* Textarea, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/field-control.css';
+@import './rules/sizing.css';
+@import './rules/input.css';
+@import './rules/textarea.css';

package/dist/css/toast.css

@@ -0,0 +1,11 @@
+/* Toast, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/popup.css';
+@import './rules/icon.css';
+@import './rules/button.css';
+@import './rules/toast.css';

package/dist/css/toggle-group.css

@@ -0,0 +1,9 @@
+/* Toggle Group, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/bar.css';
+@import './rules/toggle-group.css';

package/dist/css/toggle.css

@@ -0,0 +1,10 @@
+/* Toggle, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/button.css';
+@import './rules/bar.css';
+@import './rules/toggle.css';

package/dist/css/toolbar.css

@@ -0,0 +1,12 @@
+/* Toolbar, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/field-control.css';
+@import './rules/sizing.css';
+@import './rules/input.css';
+@import './rules/button.css';
+@import './rules/bar.css';
+@import './rules/toolbar.css';

package/dist/css/tooltip.css

@@ -0,0 +1,9 @@
+/* Tooltip, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/popup.css';
+@import './rules/tooltip.css';

package/dist/css/tree.css

@@ -0,0 +1,10 @@
+/* Tree view, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/icon.css';
+@import './rules/scroll-area.css';
+@import './rules/tree.css';

package/dist/css/typography.css

@@ -0,0 +1,9 @@
+/* Heading, Text and Prose, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import '@surflane/design-tokens/foundations/typography.css';
+@import './rules/typography.css';

package/dist/format.d.ts

@@ -0,0 +1,25 @@
+/** Number formatting shared by every screen: one place decides the locale, the sign and
+ * the precision of values, money, percentages and compact figures. Pass `locale` when
+ * rendering on the server, so the client formats the same text. */
+export type NumberFormatOptions = {
+    /** A BCP 47 locale such as 'ko-KR'. Defaults to the runtime's. */
+    locale?: string | string[];
+    /** Digits after the decimal point: an exact count, or a [minimum, maximum] range. */
+    precision?: number | readonly [number, number];
+    /** Shows + before gains and − before losses. Zero stays unsigned. */
+    signed?: boolean;
+    /** Shortens large values: 1.2K and 3.4M, or 1.2만 in Korean. */
+    compact?: boolean;
+    /** Text for a missing value: null, undefined or a non-finite number. */
+    missing?: string;
+};
+/** The default text for a missing value. Zero is a value; missing is not. */
+export declare const missingValue = "\u2014";
+/** A plain number: 1,234.5. */
+export declare function formatNumber(value: number | null | undefined, options?: NumberFormatOptions): string;
+/** An amount of money in an ISO 4217 currency: ₩1,200 or $12.50. The currency sets the
+ * default precision. */
+export declare function formatCurrency(value: number | null | undefined, currency: string, options?: NumberFormatOptions): string;
+/** A ratio as a percentage: 0.032 is 3.2%. Up to one decimal place unless `precision`
+ * says otherwise. */
+export declare function formatPercent(value: number | null | undefined, options?: NumberFormatOptions): string;

package/dist/format.js

@@ -0,0 +1,42 @@
+/** The default text for a missing value. Zero is a value; missing is not. */
+export const missingValue = '—';
+const cache = new Map();
+function formatter(locale, options) {
+    const key = JSON.stringify([locale ?? null, options]);
+    let format = cache.get(key);
+    if (!format) {
+        format = new Intl.NumberFormat(locale, options);
+        cache.set(key, format);
+    }
+    return format;
+}
+function digits(precision) {
+    if (precision === undefined)
+        return {};
+    const [minimumFractionDigits, maximumFractionDigits] = typeof precision === 'number' ? [precision, precision] : precision;
+    return { minimumFractionDigits, maximumFractionDigits };
+}
+function format(value, base, { locale, precision, signed, compact, missing = missingValue, }) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return missing;
+    return formatter(locale, {
+        ...base,
+        ...(compact ? { notation: 'compact' } : {}),
+        ...(signed ? { signDisplay: 'exceptZero' } : {}),
+        ...digits(precision),
+    }).format(value);
+}
+/** A plain number: 1,234.5. */
+export function formatNumber(value, options = {}) {
+    return format(value, {}, options);
+}
+/** An amount of money in an ISO 4217 currency: ₩1,200 or $12.50. The currency sets the
+ * default precision. */
+export function formatCurrency(value, currency, options = {}) {
+    return format(value, { style: 'currency', currency }, options);
+}
+/** A ratio as a percentage: 0.032 is 3.2%. Up to one decimal place unless `precision`
+ * says otherwise. */
+export function formatPercent(value, options = {}) {
+    return format(value, { style: 'percent' }, { precision: [0, 1], ...options });
+}

package/dist/icon.d.ts

@@ -8,6 +8,7 @@ declare const shapes: {
     alert: React.JSX.Element;
     warning: React.JSX.Element;
     menu: React.JSX.Element;
+    sidebar: React.JSX.Element;
     more: React.JSX.Element;
     sun: React.JSX.Element;
     moon: React.JSX.Element;

package/dist/icon.js

@@ -11,6 +11,7 @@ const shapes = {
     alert: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6m0 3v1' })] })),
     warning: (_jsxs(_Fragment, { children: [_jsx("path", { d: 'm12 3 10 18H2L12 3Z' }), _jsx("path", { d: 'M12 9v4m0 3v1' })] })),
     menu: _jsx("path", { d: 'M4 6h16M4 12h16M4 18h16' }),
+    sidebar: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '3', y: '4', width: '18', height: '16', rx: '2' }), _jsx("path", { d: 'M9 4v16' })] })),
     more: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '5', cy: '12', r: '1' }), _jsx("circle", { cx: '12', cy: '12', r: '1' }), _jsx("circle", { cx: '19', cy: '12', r: '1' })] })),
     sun: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '4' }), _jsx("path", { d: 'M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5' })] })),
     moon: _jsx("path", { d: 'M20.5 13.2A8.5 8.5 0 0 1 10.8 3.5 8.5 8.5 0 1 0 20.5 13.2Z' }),