@gyramais/gyra-design 0.2.44 → 0.2.46

package/dist/emails/balance-sheet-finalized/components/Card/Card.d.ts

@@ -15,6 +15,12 @@ type CardProps = {
     media?: React.ReactNode;
     disabled?: boolean;
     loading?: boolean;
+    /**
+     * Placeholder exibido no lugar do conteudo enquanto `loading`. O padrao e um
+     * skeleton de linhas de texto; passe um skeleton com a forma do conteudo real
+     * (grafico, tabela, lista) quando isso ajudar a evitar o pulo de layout.
+     */
+    loadingContent?: React.ReactNode;
     collapsible?: boolean;
     defaultCollapsed?: boolean;
     collapsed?: boolean;
@@ -23,5 +29,5 @@ type CardProps = {
     headerContent?: React.ReactNode;
     children?: React.ReactNode;
 };
-declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
+declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, loadingContent, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
 export { Card };

package/dist/emails/balance-sheet-finalized/components/Empty/Empty.d.ts

@@ -3,8 +3,25 @@ import "./index.css";
 type EmptyProps = {
     id?: string;
     className?: string;
+    /**
+     * Ilustracao opcional. Use SO em zero state de pagina ou area inteira, do
+     * tipo "primeiro uso, ainda nao ha nada aqui", onde ela vem acompanhada de
+     * um titulo e de uma acao.
+     *
+     * Dentro de card ou de tabela de seção o padrao e' texto puro, sem grafico:
+     * a mesma ilustracao repetida dezenas de vezes na mesma pagina vira ruido e
+     * compete com o dado que importa. E' o que Stripe e Linear fazem em tabela.
+     */
     icon?: React.ReactNode;
     text?: string;
 };
-declare const Empty: ({ id, className, icon, text, }: EmptyProps) => React.JSX.Element;
+/**
+ * Estado vazio: diz que nao ha nada ali, sem roubar a atencao do que ha.
+ *
+ * Discreto de proposito, em texto secundario. Uma lista vazia raramente e' o
+ * assunto da tela, e num relatorio de credito ela costuma ate ser boa noticia
+ * ("nenhuma sanção encontrada"), entao nao deve parecer erro nem falha de
+ * carregamento.
+ */
+declare const Empty: ({ id, className, icon, text }: EmptyProps) => React.JSX.Element;
 export { Empty };

package/dist/emails/balance-sheet-finalized/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import "./index.css";
+type SkeletonProps = {
+    id?: string;
+    className?: string;
+    /**
+     * Forma do placeholder:
+     * - `text`: linhas de texto (a ultima sai mais curta, como um paragrafo real)
+     * - `block`: retangulo cheio (grafico, mapa, tabela, imagem)
+     * - `circle`: avatar, badge, icone
+     */
+    variant?: "text" | "block" | "circle";
+    /** Quantidade de linhas. So vale para `variant="text"`. */
+    lines?: number;
+    /** Diametro do circulo. So vale para `variant="circle"`. */
+    size?: number;
+    width?: number | string;
+    height?: number | string;
+    /**
+     * Liga o brilho que varre o bloco. Padrao `true`.
+     *
+     * Passe `false` para o que esta ESPERANDO em vez de acontecendo (item na
+     * fila, seção que ainda nao comecou). O bloco parado marca o espaco sem
+     * prometer trabalho que nao esta em curso, e o movimento fica reservado
+     * para o que de fato esta sendo processado.
+     */
+    animated?: boolean;
+};
+/**
+ * Placeholder de carregamento no formato do conteudo que esta chegando.
+ *
+ * Substitui o spinner: em vez de um indicador generico no meio da tela, o
+ * usuario ve a silhueta do que vai aparecer, entao o layout nao pula quando o
+ * dado chega. E o padrao dos apps modernos (Stripe, Linear, GitHub).
+ *
+ * A animacao e um brilho que varre o bloco, desligado sob
+ * `prefers-reduced-motion`.
+ */
+declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, }: SkeletonProps) => React.JSX.Element;
+export { Skeleton };

package/dist/emails/balance-sheet-finalized/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/dist/emails/balance-sheet-finalized/index.d.ts

@@ -45,6 +45,7 @@ import "./components/SegmentedToggle/index.css";
 import "./components/Select/index.css";
 import "./components/Selector/index.css";
 import "./components/SelectTree/index.css";
+import "./components/Skeleton/index.css";
 import "./components/PickerPopover/index.css";
 import "./components/MultiSelectPicker/index.css";
 import "./components/RuleSearchPicker/index.css";

package/dist/emails/email/components/Card/Card.d.ts

@@ -15,6 +15,12 @@ type CardProps = {
     media?: React.ReactNode;
     disabled?: boolean;
     loading?: boolean;
+    /**
+     * Placeholder exibido no lugar do conteudo enquanto `loading`. O padrao e um
+     * skeleton de linhas de texto; passe um skeleton com a forma do conteudo real
+     * (grafico, tabela, lista) quando isso ajudar a evitar o pulo de layout.
+     */
+    loadingContent?: React.ReactNode;
     collapsible?: boolean;
     defaultCollapsed?: boolean;
     collapsed?: boolean;
@@ -23,5 +29,5 @@ type CardProps = {
     headerContent?: React.ReactNode;
     children?: React.ReactNode;
 };
-declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
+declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, loadingContent, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
 export { Card };

package/dist/emails/email/components/Empty/Empty.d.ts

@@ -3,8 +3,25 @@ import "./index.css";
 type EmptyProps = {
     id?: string;
     className?: string;
+    /**
+     * Ilustracao opcional. Use SO em zero state de pagina ou area inteira, do
+     * tipo "primeiro uso, ainda nao ha nada aqui", onde ela vem acompanhada de
+     * um titulo e de uma acao.
+     *
+     * Dentro de card ou de tabela de seção o padrao e' texto puro, sem grafico:
+     * a mesma ilustracao repetida dezenas de vezes na mesma pagina vira ruido e
+     * compete com o dado que importa. E' o que Stripe e Linear fazem em tabela.
+     */
     icon?: React.ReactNode;
     text?: string;
 };
-declare const Empty: ({ id, className, icon, text, }: EmptyProps) => React.JSX.Element;
+/**
+ * Estado vazio: diz que nao ha nada ali, sem roubar a atencao do que ha.
+ *
+ * Discreto de proposito, em texto secundario. Uma lista vazia raramente e' o
+ * assunto da tela, e num relatorio de credito ela costuma ate ser boa noticia
+ * ("nenhuma sanção encontrada"), entao nao deve parecer erro nem falha de
+ * carregamento.
+ */
+declare const Empty: ({ id, className, icon, text }: EmptyProps) => React.JSX.Element;
 export { Empty };

package/dist/emails/email/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import "./index.css";
+type SkeletonProps = {
+    id?: string;
+    className?: string;
+    /**
+     * Forma do placeholder:
+     * - `text`: linhas de texto (a ultima sai mais curta, como um paragrafo real)
+     * - `block`: retangulo cheio (grafico, mapa, tabela, imagem)
+     * - `circle`: avatar, badge, icone
+     */
+    variant?: "text" | "block" | "circle";
+    /** Quantidade de linhas. So vale para `variant="text"`. */
+    lines?: number;
+    /** Diametro do circulo. So vale para `variant="circle"`. */
+    size?: number;
+    width?: number | string;
+    height?: number | string;
+    /**
+     * Liga o brilho que varre o bloco. Padrao `true`.
+     *
+     * Passe `false` para o que esta ESPERANDO em vez de acontecendo (item na
+     * fila, seção que ainda nao comecou). O bloco parado marca o espaco sem
+     * prometer trabalho que nao esta em curso, e o movimento fica reservado
+     * para o que de fato esta sendo processado.
+     */
+    animated?: boolean;
+};
+/**
+ * Placeholder de carregamento no formato do conteudo que esta chegando.
+ *
+ * Substitui o spinner: em vez de um indicador generico no meio da tela, o
+ * usuario ve a silhueta do que vai aparecer, entao o layout nao pula quando o
+ * dado chega. E o padrao dos apps modernos (Stripe, Linear, GitHub).
+ *
+ * A animacao e um brilho que varre o bloco, desligado sob
+ * `prefers-reduced-motion`.
+ */
+declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, }: SkeletonProps) => React.JSX.Element;
+export { Skeleton };

package/dist/emails/email/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/dist/emails/email/index.d.ts

@@ -45,6 +45,7 @@ import "./components/SegmentedToggle/index.css";
 import "./components/Select/index.css";
 import "./components/Selector/index.css";
 import "./components/SelectTree/index.css";
+import "./components/Skeleton/index.css";
 import "./components/PickerPopover/index.css";
 import "./components/MultiSelectPicker/index.css";
 import "./components/RuleSearchPicker/index.css";

package/dist/index.css

@@ -696,6 +696,12 @@ video {
 .w-\[360px\] {
   width: 360px;
 }
+.w-\[420px\] {
+  width: 420px;
+}
+.w-\[560px\] {
+  width: 560px;
+}
 .w-\[800px\] {
   width: 800px;
 }
@@ -770,6 +776,15 @@ video {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-3 {
+  gap: 0.75rem;
+}
+.gap-4 {
+  gap: 1rem;
+}
+.gap-6 {
+  gap: 1.5rem;
+}
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -804,6 +819,9 @@ video {
 .rounded-\[6px\] {
   border-radius: 6px;
 }
+.rounded-\[var\(--radius-lg\)\] {
+  border-radius: var(--radius-lg);
+}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -816,6 +834,9 @@ video {
 .border {
   border-width: 1px;
 }
+.border-\[var\(--color-border-secondary\)\] {
+  border-color: var(--color-border-secondary);
+}
 .bg-\[var\(--background-color\)\] {
   background-color: var(--background-color);
 }
@@ -840,6 +861,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
 .fill-current {
   fill: currentColor;
 }
@@ -929,6 +954,9 @@ video {
 .text-\[var\(--color-text-secondary\)\] {
   color: var(--color-text-secondary);
 }
+.text-\[var\(--color-text-tertiary\)\] {
+  color: var(--color-text-tertiary);
+}
 .text-\[var\(--primary-button-color\)\] {
   color: var(--primary-button-color);
 }
@@ -4382,25 +4410,32 @@ h6 {
   padding-top: 1rem;
 }
 .gyramais-card.gyramais-card-loading .gyramais-card-content {
-  min-height: 4rem;
+  min-height: 6rem;
 }
 
-.gyramais-card .gyramais-card-loading {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 10;
+/* `gyramais-card-loading` (modificador da RAIZ) e `gyramais-card-placeholder`
+   (o bloco desenhado) sao nomes distintos de proposito. Quando os dois eram a
+   mesma classe, o seletor de descendente abaixo casava tambem a raiz de um
+   <Card loading> ANINHADO dentro de outro Card, e aplicava o layout do
+   placeholder no card inteiro.
+
+   Estado de carregando: o skeleton entra NO FLUXO, nao sobreposto. Assim ele
+   e' quem dita a altura do card, e um `loadingContent` alto (grafico, tabela)
+   nao fica cortado pela altura do conteudo vazio que ele esta substituindo.
+   O conteudo real continua montado, so escondido pela regra abaixo, para nao
+   perder estado no meio do carregamento. */
+.gyramais-card .gyramais-card-placeholder {
   display: flex;
-  height: 100%;
   width: 100%;
-  --tw-scale-x: 102%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  align-items: center;
-  justify-content: center;
-  background-color: #ffffff80;
-  padding-top: 1rem;
-  --tw-backdrop-blur: blur(4px);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  flex-direction: column;
+  align-items: stretch;
+  background-color: var(--color-surface-primary);
+}
+
+.gyramais-card.gyramais-card-loading
+  .gyramais-card-content
+  > *:not(.gyramais-card-placeholder) {
+  display: none;
 }
 
 .gyramais-chart .recharts-legend-item {
@@ -5724,30 +5759,33 @@ h6 {
 }
 
 .gyramais-empty {
-    padding-top: 1rem;
-    padding-bottom: 1rem
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem
 }
+
 .gyramais-empty .gyramais-empty-icon {
-    display: flex;
-    justify-content: center
-}
-.gyramais-empty .gyramais-empty-icon svg {
-    font-size: 40px;
-    --tw-text-opacity: 1;
-    color: rgb(184 184 184 / var(--tw-text-opacity, 1))
+  display: flex;
+  justify-content: center;
+  font-size: 40px;
+  color: var(--color-text-quaternary)
 }
+
+/* Texto secundario, nao preto: lista vazia informa, nao anuncia. Em preto ela
+   pesava igual ao dado de verdade da tabela ao lado. */
 .gyramais-empty .gyramais-empty-text {
-    display: flex;
-    justify-content: center;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 400;
-    line-height: 22px;
-    --tw-text-opacity: 1;
-    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
+  text-align: center;
+  font-size: var(--fs-subheadline);
+  line-height: var(--lh-normal);
+  color: var(--color-text-tertiary)
 }
+
 .gyramais-filter .gyramais-filter-button-container {
   position: relative;
   width: -moz-fit-content;
@@ -6101,9 +6139,9 @@ h6 {
 
 .gyramais-hover-card-content {
 
-    width: -moz-fit-content !important;
+    width: -moz-fit-content;
 
-    width: fit-content !important;
+    width: fit-content;
 
     border-radius: 20px;
 
@@ -6119,7 +6157,6 @@ h6 {
 
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
-
 .gyramais-icon {
   content: var(--icon-url);
 }
@@ -8880,6 +8917,68 @@ h6 {
     left: 0.5rem !important
 }
 
+.gyramais-skeleton {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  background-color: var(--color-gray-100);
+  border-radius: var(--radius-sm);
+}
+
+/* O brilho que varre o bloco. Pseudo-elemento para nao exigir um filho no DOM. */
+.gyramais-skeleton::after {
+  position: absolute;
+  inset: 0px;
+  content: "";
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.7) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: gyramais-skeleton-shimmer 1.6s ease-in-out infinite;
+}
+
+/* Parado de proposito: item na fila, nao em processamento. */
+.gyramais-skeleton.gyramais-skeleton-static::after {
+  animation: none;
+}
+
+.gyramais-skeleton.gyramais-skeleton-circle {
+  flex-shrink: 0;
+  border-radius: var(--radius-full);
+}
+
+.gyramais-skeleton.gyramais-skeleton-block {
+  border-radius: var(--radius-md);
+}
+
+.gyramais-skeleton-lines {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.gyramais-skeleton-lines .gyramais-skeleton-line {
+  height: 0.75rem;
+}
+
+@keyframes gyramais-skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Sem animacao para quem pediu menos movimento: o bloco continua marcando o
+   espaco, so nao pulsa. */
+@media (prefers-reduced-motion: reduce) {
+  .gyramais-skeleton::after {
+    animation: none;
+  }
+}
+
 /* PickerPopover — shell base de popovers tipo command-palette / tag-picker. */
 
 /* Container override do Popover base — chrome flat com elevação de dropdown */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gyramais/gyra-design",
-  "version": "0.2.44",
+  "version": "0.2.46",
   "description": "Gyramais Design System",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/dist/components/ListingPage/ListingPage.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-import "./index.css";
-type ListingPageProps = {
-    id?: string;
-    className?: string;
-    title: string;
-    description?: string;
-    /** Right-aligned actions in the head (e.g. "+ Novo"). */
-    actions?: React.ReactNode;
-    /** Filters / search row below the head. */
-    toolbar?: React.ReactNode;
-    /** Result count / density toggle row. */
-    meta?: React.ReactNode;
-    /** Table or cards. */
-    children?: React.ReactNode;
-    /** Pagination strip. */
-    footer?: React.ReactNode;
-};
-declare const ListingPage: ({ id, className, title, description, actions, toolbar, meta, children, footer, }: ListingPageProps) => React.JSX.Element;
-export { ListingPage };
-export type { ListingPageProps };

package/dist/components/ListingPage/index.d.ts

@@ -1 +0,0 @@
-export * from "./ListingPage";

package/dist/components/ListingPage/index.js

@@ -1,7 +0,0 @@
-"use client";import e from"react";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var a,r={exports:{}};
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/a=r,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var a=arguments[t];a&&(e=n(e,r(a)))}return e}function r(a){if("string"==typeof a||"number"==typeof a)return a;if("object"!=typeof a)return"";if(Array.isArray(a))return t.apply(null,a);if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]"))return a.toString();var r="";for(var i in a)e.call(a,i)&&a[i]&&(r=n(r,i));return r}function n(e,t){return t?e?e+" "+t:e+t:e}a.exports?(t.default=t,a.exports=t):window.classNames=t}();var n=t(r.exports);const i=({id:t,className:a,title:r,description:i,actions:l,toolbar:s,meta:o,children:c,footer:m})=>e.createElement("div",{id:t,className:n("gyramais-listing-page",a)},e.createElement("div",{className:"gyramais-listing-page-head"},e.createElement("div",null,e.createElement("h1",null,r),i&&e.createElement("p",{className:"lead"},i)),l&&e.createElement("div",{className:"actions"},l)),s&&e.createElement("div",{className:"gyramais-listing-page-toolbar"},s),o&&e.createElement("div",{className:"gyramais-listing-page-meta"},o),e.createElement("div",{className:"gyramais-listing-page-content"},c),m&&e.createElement("div",{className:"gyramais-listing-page-foot"},m));export{i as ListingPage};
-//# sourceMappingURL=index.js.map

package/dist/components/ListingPage/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../node_modules/classnames/index.js","../../../src/components/ListingPage/ListingPage.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import React from \"react\";\nimport classNames from \"classnames\";\nimport \"./index.css\";\n\n/* Listing page layout — title + description, optional right-aligned\n   actions, optional toolbar (filters/search), optional meta strip\n   (counts/density), the table/cards body, and an optional pagination\n   footer. The visual rhythm matches the v2 listing pattern shared\n   across Relatórios, Lotes, Política de Crédito, etc. */\n\ntype ListingPageProps = {\n  id?: string;\n  className?: string;\n  title: string;\n  description?: string;\n  /** Right-aligned actions in the head (e.g. \"+ Novo\"). */\n  actions?: React.ReactNode;\n  /** Filters / search row below the head. */\n  toolbar?: React.ReactNode;\n  /** Result count / density toggle row. */\n  meta?: React.ReactNode;\n  /** Table or cards. */\n  children?: React.ReactNode;\n  /** Pagination strip. */\n  footer?: React.ReactNode;\n};\n\nconst ListingPage = ({\n  id,\n  className,\n  title,\n  description,\n  actions,\n  toolbar,\n  meta,\n  children,\n  footer,\n}: ListingPageProps) => {\n  return (\n    <div id={id} className={classNames(\"gyramais-listing-page\", className)}>\n      <div className=\"gyramais-listing-page-head\">\n        <div>\n          <h1>{title}</h1>\n          {description && <p className=\"lead\">{description}</p>}\n        </div>\n        {actions && <div className=\"actions\">{actions}</div>}\n      </div>\n\n      {toolbar && (\n        <div className=\"gyramais-listing-page-toolbar\">{toolbar}</div>\n      )}\n\n      {meta && <div className=\"gyramais-listing-page-meta\">{meta}</div>}\n\n      <div className=\"gyramais-listing-page-content\">{children}</div>\n\n      {footer && <div className=\"gyramais-listing-page-foot\">{footer}</div>}\n    </div>\n  );\n};\n\nexport { ListingPage };\nexport type { ListingPageProps };\n"],"names":["hasOwn","hasOwnProperty","classNames","classes","i","arguments","length","arg","appendClass","parseValue","Array","isArray","apply","toString","Object","prototype","includes","key","call","value","newClass","module","exports","default","window","ListingPage","id","className","title","description","actions","toolbar","meta","children","footer","React","createElement"],"mappings":";;;;;MAOC,WAGA,IAAIA,EAAS,CAAA,EAAGC,eAEhB,SAASC,IAGR,IAFA,IAAIC,EAAU,GAELC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAC1C,IAAIG,EAAMF,UAAUD,GAChBG,IACHJ,EAAUK,EAAYL,EAASM,EAAWF,IAE9C,CAEE,OAAOJ,CACT,CAEC,SAASM,EAAYF,GACpB,GAAmB,iBAARA,GAAmC,iBAARA,EACrC,OAAOA,EAGR,GAAmB,iBAARA,EACV,MAAO,GAGR,GAAIG,MAAMC,QAAQJ,GACjB,OAAOL,EAAWU,MAAM,KAAML,GAG/B,GAAIA,EAAIM,WAAaC,OAAOC,UAAUF,WAAaN,EAAIM,SAASA,WAAWG,SAAS,iBACnF,OAAOT,EAAIM,WAGZ,IAAIV,EAAU,GAEd,IAAK,IAAIc,KAAOV,EACXP,EAAOkB,KAAKX,EAAKU,IAAQV,EAAIU,KAChCd,EAAUK,EAAYL,EAASc,IAIjC,OAAOd,CACT,CAEC,SAASK,EAAaW,EAAOC,GAC5B,OAAKA,EAIDD,EACIA,EAAQ,IAAMC,EAGfD,EAAQC,EAPPD,CAQV,CAEsCE,EAAOC,SAC3CpB,EAAWqB,QAAUrB,EACrBmB,UAAiBnB,GAOjBsB,OAAOtB,WAAaA,CAEtB,CArEA,sBCoBA,MAAMuB,EAAc,EAClBC,KACAC,YACAC,QACAC,cACAC,UACAC,UACAC,OACAC,WACAC,YAGEC,EAAAC,cAAA,MAAA,CAAKV,GAAIA,EAAIC,UAAWzB,EAAW,wBAAyByB,IAC1DQ,EAAAC,cAAA,MAAA,CAAKT,UAAU,8BACbQ,EAAAC,cAAA,MAAA,KACED,EAAAC,cAAA,KAAA,KAAKR,GACJC,GAAeM,qBAAGR,UAAU,QAAQE,IAEtCC,GAAWK,uBAAKR,UAAU,WAAWG,IAGvCC,GACCI,EAAAC,cAAA,MAAA,CAAKT,UAAU,iCAAiCI,GAGjDC,GAAQG,EAAAC,cAAA,MAAA,CAAKT,UAAU,8BAA8BK,GAEtDG,EAAAC,cAAA,MAAA,CAAKT,UAAU,iCAAiCM,GAE/CC,GAAUC,EAAAC,cAAA,MAAA,CAAKT,UAAU,8BAA8BO","x_google_ignoreList":[0]}