eatopia-ds 0.0.954 → 0.0.956

package/README.md

@@ -1,200 +1,200 @@
-# DS-Eatopia
-
-Uma biblioteca de componentes React independente de CSS externo, com todos os estilos embutidos inline.
-
-## Características
-
-- ✅ **Zero dependências de CSS externo** - Todos os estilos são inline
-- ✅ **Componentes prontos para uso** - Não precisa configurar Tailwind ou outros frameworks CSS
-- ✅ **Totalmente responsivo** - Funciona em todos os dispositivos
-- ✅ **Mobile-first** - Modal com largura total em dispositivos móveis
-- ✅ **Acessível** - Segue as melhores práticas de acessibilidade
-- ✅ **TypeScript** - Tipagem completa incluída
-
-## Instalação
-
-```bash
-npm install ds-eatopia
-```
-
-## Uso
-
-### EstoqueCard
-
-```tsx
-import { EstoqueCard, Produto, ContagemInicial } from "ds-eatopia";
-
-const produto: Produto = {
-  id: 1,
-  name: "Arroz Integral",
-  sku: "ARROZ001",
-  categoria: "Grãos",
-  estoque: 50,
-  unidades: [
-    { label: "kg", value: "1" },
-    { label: "Caixa 5kg", value: "5" },
-  ],
-  unidade_sap: "kg",
-};
-
-const contagemInicial: ContagemInicial[] = [
-   {
-      quantidade: 2,
-      unidade: {
-        label: "KG",
-        value: "1"
-      }
-    },
-    {
-      quantidade: 4,
-      unidade: {
-        label: "PCT 0,5 KG",
-        value: "0.5"
-      }
-    }
-]
-
-function App() {
-  return (
-    <div>
-      <EstoqueCard produto={produto} contagemInicial={contagemInicial} />
-    </div>
-  );
-}
-```
-
-### UnitSelect
-
-```tsx
-import { UnitSelect, UnitOption } from "ds-eatopia";
-
-function App() {
-  const [selectedUnit, setSelectedUnit] = useState("1");
-
-  const units: UnitOption[] = [
-    { label: "kg", value: "1" },
-    { label: "Caixa 5kg", value: "5" },
-    { label: "Saco 25kg", value: "25" },
-  ];
-
-  return (
-    <UnitSelect
-      units={units}
-      selectedUnit={selectedUnit}
-      onUnitChange={setSelectedUnit}
-      defaultUnit="1"
-    />
-  );
-}
-```
-
-### Responsividade Automática
-
-O componente `EstoqueCard` detecta automaticamente dispositivos móveis (≤768px) e ajusta o modal para largura total:
-
-- **Desktop/Tablet**: Modal com largura fixa de 400px
-- **Mobile**: Modal com largura total (100%) e padding otimizado
-
-### QuantidadeInput
-
-```tsx
-import { QuantidadeInput } from "ds-eatopia";
-
-function App() {
-  const [quantidade, setQuantidade] = useState(5);
-
-  return (
-    <QuantidadeInput
-      valor={quantidade}
-      onChange={setQuantidade}
-      atalhos={[10, 25, 50, -10, -25, -50]}
-      selectedUnit="kg"
-      addStockItem={(valor) => {
-        console.log(`Adicionando ${valor} kg ao estoque`);
-      }}
-    />
-  );
-}
-```
-
-### Atalhos Inteligentes
-
-Os atalhos negativos só aparecem quando fazem sentido:
-
-- **Valor atual: 5** → Mostra apenas: +10, +25, +50
-- **Valor atual: 15** → Mostra: +10, +25, +50, -10
-- **Valor atual: 60** → Mostra: +10, +25, +50, -10, -25, -50
-
-## Componentes Disponíveis
-
-### EstoqueCard
-
-- Gerencia itens de estoque com diferentes unidades
-- Interface intuitiva para adicionar/remover itens
-- Cálculo automático de totais
-- Modal integrado para inserção de novos itens
-
-### QuantidadeInput
-
-- Input numérico com controles + e -
-- Atalhos personalizáveis para valores comuns
-- **Atalhos negativos inteligentes** - Só aparecem quando fazem sentido
-- Suporte a unidades de medida
-- Botão para adicionar ao estoque
-
-### UnitSelect
-
-- Select customizado e bonito para unidades
-- Navegação por teclado (setas, Enter, Escape)
-- Animações suaves e feedback visual
-- Totalmente acessível (ARIA labels)
-- Suporte a hover e focus states
-
-### Modal
-
-- Modal responsivo com animações suaves
-- **Largura total em dispositivos móveis** (≤768px)
-- Seletor de unidades integrado
-- Controle de foco e acessibilidade
-
-## Vantagens
-
-### Sem Dependências Externas
-
-- Não precisa instalar Tailwind CSS
-- Não precisa configurar PostCSS
-- Não precisa importar arquivos CSS
-- Funciona em qualquer projeto React
-
-### Performance
-
-- Estilos inline são mais rápidos para carregar
-- Sem overhead de frameworks CSS
-- Bundle menor
-
-### Facilidade de Uso
-
-- Instale e use imediatamente
-- Sem configuração adicional
-- Compatível com qualquer setup de build
-- **Responsivo automático** - Detecta dispositivos móveis automaticamente
-
-## Desenvolvimento
-
-```bash
-# Instalar dependências
-npm install
-
-# Executar em modo de desenvolvimento
-npm run dev
-
-# Build para produção
-npm run build
-
-# Executar Storybook
-npm run storybook
-```
-
-## Licença
-
-MIT
+# DS-Eatopia
+
+Uma biblioteca de componentes React independente de CSS externo, com todos os estilos embutidos inline.
+
+## Características
+
+- ✅ **Zero dependências de CSS externo** - Todos os estilos são inline
+- ✅ **Componentes prontos para uso** - Não precisa configurar Tailwind ou outros frameworks CSS
+- ✅ **Totalmente responsivo** - Funciona em todos os dispositivos
+- ✅ **Mobile-first** - Modal com largura total em dispositivos móveis
+- ✅ **Acessível** - Segue as melhores práticas de acessibilidade
+- ✅ **TypeScript** - Tipagem completa incluída
+
+## Instalação
+
+```bash
+npm install ds-eatopia
+```
+
+## Uso
+
+### EstoqueCard
+
+```tsx
+import { EstoqueCard, Produto, ContagemInicial } from "ds-eatopia";
+
+const produto: Produto = {
+  id: 1,
+  name: "Arroz Integral",
+  sku: "ARROZ001",
+  categoria: "Grãos",
+  estoque: 50,
+  unidades: [
+    { label: "kg", value: "1" },
+    { label: "Caixa 5kg", value: "5" },
+  ],
+  unidade_sap: "kg",
+};
+
+const contagemInicial: ContagemInicial[] = [
+   {
+      quantidade: 2,
+      unidade: {
+        label: "KG",
+        value: "1"
+      }
+    },
+    {
+      quantidade: 4,
+      unidade: {
+        label: "PCT 0,5 KG",
+        value: "0.5"
+      }
+    }
+]
+
+function App() {
+  return (
+    <div>
+      <EstoqueCard produto={produto} contagemInicial={contagemInicial} />
+    </div>
+  );
+}
+```
+
+### UnitSelect
+
+```tsx
+import { UnitSelect, UnitOption } from "ds-eatopia";
+
+function App() {
+  const [selectedUnit, setSelectedUnit] = useState("1");
+
+  const units: UnitOption[] = [
+    { label: "kg", value: "1" },
+    { label: "Caixa 5kg", value: "5" },
+    { label: "Saco 25kg", value: "25" },
+  ];
+
+  return (
+    <UnitSelect
+      units={units}
+      selectedUnit={selectedUnit}
+      onUnitChange={setSelectedUnit}
+      defaultUnit="1"
+    />
+  );
+}
+```
+
+### Responsividade Automática
+
+O componente `EstoqueCard` detecta automaticamente dispositivos móveis (≤768px) e ajusta o modal para largura total:
+
+- **Desktop/Tablet**: Modal com largura fixa de 400px
+- **Mobile**: Modal com largura total (100%) e padding otimizado
+
+### QuantidadeInput
+
+```tsx
+import { QuantidadeInput } from "ds-eatopia";
+
+function App() {
+  const [quantidade, setQuantidade] = useState(5);
+
+  return (
+    <QuantidadeInput
+      valor={quantidade}
+      onChange={setQuantidade}
+      atalhos={[10, 25, 50, -10, -25, -50]}
+      selectedUnit="kg"
+      addStockItem={(valor) => {
+        console.log(`Adicionando ${valor} kg ao estoque`);
+      }}
+    />
+  );
+}
+```
+
+### Atalhos Inteligentes
+
+Os atalhos negativos só aparecem quando fazem sentido:
+
+- **Valor atual: 5** → Mostra apenas: +10, +25, +50
+- **Valor atual: 15** → Mostra: +10, +25, +50, -10
+- **Valor atual: 60** → Mostra: +10, +25, +50, -10, -25, -50
+
+## Componentes Disponíveis
+
+### EstoqueCard
+
+- Gerencia itens de estoque com diferentes unidades
+- Interface intuitiva para adicionar/remover itens
+- Cálculo automático de totais
+- Modal integrado para inserção de novos itens
+
+### QuantidadeInput
+
+- Input numérico com controles + e -
+- Atalhos personalizáveis para valores comuns
+- **Atalhos negativos inteligentes** - Só aparecem quando fazem sentido
+- Suporte a unidades de medida
+- Botão para adicionar ao estoque
+
+### UnitSelect
+
+- Select customizado e bonito para unidades
+- Navegação por teclado (setas, Enter, Escape)
+- Animações suaves e feedback visual
+- Totalmente acessível (ARIA labels)
+- Suporte a hover e focus states
+
+### Modal
+
+- Modal responsivo com animações suaves
+- **Largura total em dispositivos móveis** (≤768px)
+- Seletor de unidades integrado
+- Controle de foco e acessibilidade
+
+## Vantagens
+
+### Sem Dependências Externas
+
+- Não precisa instalar Tailwind CSS
+- Não precisa configurar PostCSS
+- Não precisa importar arquivos CSS
+- Funciona em qualquer projeto React
+
+### Performance
+
+- Estilos inline são mais rápidos para carregar
+- Sem overhead de frameworks CSS
+- Bundle menor
+
+### Facilidade de Uso
+
+- Instale e use imediatamente
+- Sem configuração adicional
+- Compatível com qualquer setup de build
+- **Responsivo automático** - Detecta dispositivos móveis automaticamente
+
+## Desenvolvimento
+
+```bash
+# Instalar dependências
+npm install
+
+# Executar em modo de desenvolvimento
+npm run dev
+
+# Build para produção
+npm run build
+
+# Executar Storybook
+npm run storybook
+```
+
+## Licença
+
+MIT

package/build/index.css

@@ -1 +1 @@
-.storybook-button{display:inline-block;cursor:pointer;border:0;border-radius:.5rem;font-weight:700;line-height:1;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button--primary{background-color:#ff4e00;color:#fff}.storybook-button--secondary{box-shadow:#00000026 0 0 0 1px inset;background-color:transparent;color:#333}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:16px}.storybook-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);background-color:#0e0f12;padding:15px 20px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-header svg{display:inline-block;vertical-align:top}.storybook-header h1{display:inline-block;vertical-align:top;margin:6px 0 6px 10px;font-weight:700;font-size:20px;line-height:1}.storybook-header button+button{margin-left:10px}.storybook-header .welcome{margin-right:10px;color:#333;font-size:14px}._header_z8vqb_1{box-sizing:border-box;width:100%;display:flex;flex-direction:column;position:relative;padding:8px 12px;transition:all .2s ease;box-shadow:0 4px 6px -1px #0000001a;border-top-left-radius:24px;border-top-right-radius:24px}._header_z8vqb_1:hover{box-shadow:0 10px 15px -3px #0000001a}._readyBorder_z8vqb_18{border-bottom:2px solid rgba(255,255,255,.1)}._notReadyBorder_z8vqb_22{border-bottom:1px solid rgba(255,255,255,.1)}._statusCriado_z8vqb_27{background-color:#000;color:#fff}._statusProducao_z8vqb_31{background-color:#007ff3;color:#fff}._statusSeparacao_z8vqb_35{background-color:#fff500;color:#000}._content_z8vqb_41{display:flex;justify-content:space-between;align-items:center}._leftSection_z8vqb_48{display:flex;flex-direction:column;gap:2px}._idRow_z8vqb_54{display:flex;align-items:center;gap:8px}._orderId_z8vqb_60{font-weight:700;font-size:18px;letter-spacing:-.025em;margin:0}._subItemsBtn_z8vqb_67{background-color:#ffffff1a;color:currentColor;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:500;display:flex;align-items:center;gap:2px;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background-color .2s}._subItemsBtn_z8vqb_67:hover{background-color:#fff3}._customerRow_z8vqb_86{display:flex;align-items:center;gap:4px}._customerName_z8vqb_92{font-size:12px;font-weight:500}._espTag_z8vqb_97{font-size:10px;color:#22c55e;font-weight:700;display:flex;align-items:center;gap:2px}._rightSection_z8vqb_107{display:flex;flex-direction:column;align-items:flex-end;gap:2px}._detailsBtn_z8vqb_114{height:20px;width:20px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}._detailsBtn_z8vqb_114:hover{background-color:#ffffff1a}._statusRow_z8vqb_131{display:flex;align-items:center;gap:4px}._stageText_z8vqb_137{text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.025em;margin:0}._invoiceBadge_z8vqb_145{background-color:#000;padding:2px;border-radius:50%;display:flex;align-items:center;justify-content:center}._invoiceIconContainer_z8vqb_154{border-radius:50%;box-shadow:0 4px 6px #0000001a;border:1px solid white;padding:2px;display:flex;align-items:center;justify-content:center}._noInvoiceIconContainer_z8vqb_164{background-color:#ffffff1a;border-radius:50%;padding:2px;border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}._slash_z8vqb_176{position:absolute;top:50%;left:50%;width:120%;height:1px;background-color:#fff;transform:translate(-50%,-50%) rotate(45deg)}._ordersCount_z8vqb_186{font-weight:500;font-size:10px;margin:0}._iconSmall_z8vqb_192{width:12px;height:12px}._iconMedium_z8vqb_197{width:16px;height:16px}._itemContainer_8m52p_1{border-bottom:1px dashed #374151;padding-bottom:8px}._itemRow_8m52p_6{display:flex;align-items:center;gap:16px}._quantityBadge_8m52p_12{border-radius:50%;min-width:60px;min-height:60px;display:flex;justify-content:center;align-items:center;font-size:30px;padding:12px;font-weight:700;flex-shrink:0}._statusCriado_8m52p_26{background-color:#000;color:#fff}._statusProducao_8m52p_31{background-color:#007ff3;color:#fff}._statusSeparacao_8m52p_36{background-color:#fff500;color:#000}._itemDetails_8m52p_41{flex:1;text-align:left}._itemName_8m52p_46{text-transform:uppercase;font-size:20px;font-weight:800;color:#fff;word-break:break-word}._modificadores_8m52p_54{font-size:14px;font-weight:800;color:#fff;word-break:break-word;max-width:100%;margin-top:4px}._observation_8m52p_63{font-size:14px;font-weight:600;color:#fff;word-break:break-word;max-width:100%;margin-top:4px}._subItemsContainer_8m52p_73{display:flex;flex-wrap:wrap;flex-direction:column;margin-top:8px}._subItemGroup_8m52p_80{margin-left:80px;border-left:2px solid #fbbf24;padding-left:5px;margin-top:8px}._subItemTitle_8m52p_87{color:#9ca3af;font-size:14px;font-weight:700;text-align:left;text-transform:uppercase}._subItem_8m52p_73{font-weight:500;font-size:14px;text-align:left;padding-left:16px;color:#fff;text-transform:uppercase;margin-top:2px}._container_mff3z_1{position:absolute;top:-12px;left:-16px;cursor:help}._pingCircle_mff3z_8{position:relative;width:32px;height:32px;border-radius:50%;animation:_ping_mff3z_8 1s cubic-bezier(0,0,.2,1) infinite;opacity:.75}._iconCircle_mff3z_17{position:absolute;top:0;right:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px #0000004d}._icon_mff3z_17{font-size:16px}._info_mff3z_35{background-color:#3b82f6}._warning_mff3z_39{background-color:#fbbf24}._danger_mff3z_43{background-color:#ef4444}@keyframes _ping_mff3z_8{75%,to{transform:scale(2);opacity:0}}._header_1t9rj_1{box-sizing:border-box;width:100%;display:flex;flex-direction:column;position:relative;padding:8px 12px;transition:all .2s ease;box-shadow:0 4px 6px -1px #0000001a;border-top-left-radius:24px;border-top-right-radius:24px}._header_1t9rj_1:hover{box-shadow:0 10px 15px -3px #0000001a}._readyBorder_1t9rj_18{border-bottom:2px solid rgba(255,255,255,.1)}._notReadyBorder_1t9rj_22{border-bottom:1px solid rgba(255,255,255,.1)}._statusPurple_1t9rj_27{background-color:purple;color:#fff}._statusRed_1t9rj_31{background-color:red;color:#fff}._statusYellow_1t9rj_35{background-color:#fff500;color:#000}._statusBlue_1t9rj_39{background-color:#007ff3;color:#fff}._statusDefault_1t9rj_43{background-color:#1f2937;color:#fff}._floatingLogos_1t9rj_49{position:absolute;top:-20px;left:50%;transform:translate(-50%);display:flex;gap:8px;align-items:center;z-index:10}._logoWrapper_1t9rj_60{position:relative;transition:transform .2s}._logoWrapper_1t9rj_60:hover{transform:scale(1.1)}._storeLogo_1t9rj_69{width:40px;height:40px;padding:4px;background-color:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;object-fit:contain;transform:rotate(-2deg)}._platformLogo_1t9rj_80{width:40px;height:40px;padding:4px;background-color:#111827;border-radius:8px;box-shadow:0 1px 3px #0000001a;object-fit:contain;transform:rotate(2deg)}._platformTag_1t9rj_91{height:40px;padding:0 12px;background-color:#7455ff;color:#fff;font-weight:700;font-size:14px;border-radius:8px;border:1px solid rgba(116,85,255,.2);display:flex;align-items:center;justify-content:center;transform:rotate(2deg)}._content_1t9rj_107{display:flex;justify-content:space-between;align-items:center;margin-top:12px}._leftSection_1t9rj_115{display:flex;flex-direction:column;gap:2px}._idRow_1t9rj_121{display:flex;align-items:center;gap:8px}._orderId_1t9rj_127{font-weight:700;font-size:18px;letter-spacing:-.025em;margin:0}._subItemsBtn_1t9rj_134{background-color:#ffffff1a;color:currentColor;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:500;display:flex;align-items:center;gap:2px;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background-color .2s}._subItemsBtn_1t9rj_134:hover{background-color:#fff3}._customerRow_1t9rj_153{display:flex;align-items:center;gap:4px}._customerName_1t9rj_159{font-size:12px;font-weight:500}._espTag_1t9rj_164{font-size:10px;color:#22c55e;font-weight:700;display:flex;align-items:center;gap:2px}._rightSection_1t9rj_174{display:flex;flex-direction:column;align-items:flex-end;gap:2px}._detailsBtn_1t9rj_181{height:20px;width:20px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}._detailsBtn_1t9rj_181:hover{background-color:#ffffff1a}._statusRow_1t9rj_198{display:flex;align-items:center;gap:4px}._stageText_1t9rj_204{text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.025em;margin:0}._invoiceBadge_1t9rj_212{background-color:#000;padding:2px;border-radius:50%;display:flex;align-items:center;justify-content:center}._invoiceIconContainer_1t9rj_221{border-radius:50%;box-shadow:0 4px 6px #0000001a;border:1px solid white;padding:2px;display:flex;align-items:center;justify-content:center}._noInvoiceIconContainer_1t9rj_231{background-color:#ffffff1a;border-radius:50%;padding:2px;border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}._slash_1t9rj_243{position:absolute;top:50%;left:50%;width:120%;height:1px;background-color:#fff;transform:translate(-50%,-50%) rotate(45deg)}._ordersCount_1t9rj_253{font-weight:500;font-size:10px;margin:0}._iconSmall_1t9rj_259{width:12px;height:12px}._iconMedium_1t9rj_264{width:16px;height:16px}._itemContainer_1low4_1{border-bottom:1px dashed #374151;padding-bottom:8px}._itemRow_1low4_6{display:flex;align-items:center;gap:16px}._quantityBadge_1low4_12{border-radius:50%;min-width:60px;min-height:60px;display:flex;justify-content:center;align-items:center;font-size:30px;padding:12px;font-weight:700;flex-shrink:0}._statusPurple_1low4_26{background-color:purple;color:#fff}._statusRed_1low4_31{background-color:red;color:#fff}._statusYellow_1low4_36{background-color:#fff500;color:#000}._statusBlue_1low4_41{background-color:#007ff3;color:#fff}._statusDefault_1low4_46{background-color:#1f2937;color:#fff}._itemDetails_1low4_51{flex:1;text-align:left}._itemName_1low4_56{text-transform:uppercase;font-size:20px;font-weight:800;color:#fff;word-break:break-word}._modificadores_1low4_64{font-size:14px;font-weight:800;color:#fff;word-break:break-word;max-width:100%;margin-top:4px}._observation_1low4_73{font-size:14px;font-weight:600;color:#fff;word-break:break-word;max-width:100%;margin-top:4px}._subItemsContainer_1low4_83{display:flex;flex-wrap:wrap;flex-direction:column;margin-top:8px}._subItemGroup_1low4_90{margin-left:80px;border-left:2px solid #fbbf24;padding-left:5px;margin-top:8px}._subItemTitle_1low4_97{color:#9ca3af;font-size:14px;font-weight:700;text-align:left;text-transform:uppercase}._subItem_1low4_83{font-weight:500;font-size:14px;text-align:left;padding-left:16px;color:#fff;text-transform:uppercase;margin-top:2px}._card_1emyq_1{box-sizing:border-box;position:relative;max-width:400px;min-height:288px;background-color:#151217;border-radius:24px;border:0;transition:all .3s ease;display:flex;flex-direction:column}._cardPrinted_1emyq_14{border:4px solid #4ade80}._cardAnimating_1emyq_18{animation:_wiggle_1emyq_1 .3s ease-in-out}@keyframes _wiggle_1emyq_1{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}._cardContent_1emyq_35{box-sizing:border-box;width:100%;flex:1;background:transparent;border:none;cursor:pointer;padding:0;display:flex;flex-direction:column;min-height:0}._itemsList_1emyq_48{display:flex;flex-direction:column;padding:16px;gap:16px;width:100%;box-sizing:border-box}._timer_1emyq_57{width:100%;display:flex;justify-content:center;align-items:center;padding:24px 16px;flex:1;margin-top:auto}._timer_1emyq_57 p{color:#fff;font-size:20px;font-weight:600;margin:0}._courierBadge_1emyq_74{position:absolute;top:50%;right:-36px;width:56px;height:56px;background-color:#f97316;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #0000004d;z-index:10}._courierPhoto_1emyq_89{width:100%;height:100%;object-fit:cover;border-radius:50%}
+.storybook-button{display:inline-block;cursor:pointer;border:0;border-radius:.5rem;font-weight:700;line-height:1;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button--primary{background-color:#ff4e00;color:#fff}.storybook-button--secondary{box-shadow:#00000026 0 0 0 1px inset;background-color:transparent;color:#333}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:16px}.storybook-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);background-color:#0e0f12;padding:15px 20px;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-header svg{display:inline-block;vertical-align:top}.storybook-header h1{display:inline-block;vertical-align:top;margin:6px 0 6px 10px;font-weight:700;font-size:20px;line-height:1}.storybook-header button+button{margin-left:10px}.storybook-header .welcome{margin-right:10px;color:#333;font-size:14px}._header_dw712_1{box-sizing:border-box;width:100%;display:flex;flex-direction:column;position:relative;padding:8px 12px;transition:all .2s ease;box-shadow:0 4px 6px -1px #0000001a;border-top-left-radius:24px;border-top-right-radius:24px}._header_dw712_1:hover{box-shadow:0 10px 15px -3px #0000001a}._readyBorder_dw712_35{border-bottom:2px solid rgba(255,255,255,.1)}._notReadyBorder_dw712_43{border-bottom:1px solid rgba(255,255,255,.1)}._statusCriado_dw712_53{background-color:#000;color:#fff}._statusProducao_dw712_61{background-color:#007ff3;color:#fff}._statusSeparacao_dw712_69{background-color:#fff500;color:#000}._content_dw712_81{display:flex;justify-content:space-between;align-items:center}._leftSection_dw712_95{display:flex;flex-direction:column;gap:2px}._idRow_dw712_107{display:flex;align-items:center;gap:8px}._orderId_dw712_119{font-weight:700;font-size:18px;letter-spacing:-.025em;margin:0}._subItemsBtn_dw712_133{background-color:#ffffff1a;color:currentColor;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:500;display:flex;align-items:center;gap:2px;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background-color .2s}._subItemsBtn_dw712_133:hover{background-color:#fff3}._customerRow_dw712_171{display:flex;align-items:center;gap:4px}._customerName_dw712_183{font-size:12px;font-weight:500}._espTag_dw712_193{font-size:10px;color:#22c55e;font-weight:700;display:flex;align-items:center;gap:2px}._rightSection_dw712_213{display:flex;flex-direction:column;align-items:flex-end;gap:2px}._detailsBtn_dw712_227{height:20px;width:20px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}._detailsBtn_dw712_227:hover{background-color:#ffffff1a}._statusRow_dw712_261{display:flex;align-items:center;gap:4px}._stageText_dw712_273{text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.025em;margin:0}._invoiceBadge_dw712_289{background-color:#000;padding:2px;border-radius:50%;display:flex;align-items:center;justify-content:center}._invoiceIconContainer_dw712_307{border-radius:50%;box-shadow:0 4px 6px #0000001a;border:1px solid white;padding:2px;display:flex;align-items:center;justify-content:center}._noInvoiceIconContainer_dw712_327{background-color:#ffffff1a;border-radius:50%;padding:2px;border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}._slash_dw712_351{position:absolute;top:50%;left:50%;width:120%;height:1px;background-color:#fff;transform:translate(-50%,-50%) rotate(45deg)}._ordersCount_dw712_371{font-weight:500;font-size:10px;margin:0}._iconSmall_dw712_383{width:12px;height:12px}._iconMedium_dw712_393{width:16px;height:16px}._itemContainer_13kls_1{border-bottom:1px dashed #374151;padding-bottom:8px}._itemRow_13kls_11{display:flex;align-items:center;gap:16px}._quantityBadge_13kls_23{border-radius:50%;min-width:60px;min-height:60px;display:flex;justify-content:center;align-items:center;font-size:30px;padding:12px;font-weight:700;flex-shrink:0}._statusCriado_13kls_51{background-color:#000;color:#fff}._statusProducao_13kls_61{background-color:#007ff3;color:#fff}._statusSeparacao_13kls_71{background-color:#fff500;color:#000}._itemDetails_13kls_81{flex:1;text-align:left}._itemName_13kls_91{text-transform:uppercase;font-size:20px;font-weight:800;color:#fff;word-break:break-word}._modificadores_13kls_107{font-size:14px;font-weight:800;color:#fff;word-break:break-word;max-width:100%;margin-top:4px}._observation_13kls_125{font-size:14px;font-weight:600;color:#fff;word-break:break-word;max-width:100%;margin-top:4px}._subItemsContainer_13kls_145{display:flex;flex-wrap:wrap;flex-direction:column;margin-top:8px}._subItemGroup_13kls_159{margin-left:80px;border-left:2px solid #fbbf24;padding-left:5px;margin-top:8px}._subItemTitle_13kls_173{color:#9ca3af;font-size:14px;font-weight:700;text-align:left;text-transform:uppercase}._subItem_13kls_145{font-weight:500;font-size:14px;text-align:left;padding-left:16px;color:#fff;text-transform:uppercase;margin-top:2px}._container_1xqcg_1{position:absolute;top:-12px;left:-16px;cursor:help}._pingCircle_1xqcg_15{position:relative;width:32px;height:32px;border-radius:50%;animation:_ping_1xqcg_15 1s cubic-bezier(0,0,.2,1) infinite;opacity:.75}._iconCircle_1xqcg_33{position:absolute;top:0;right:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px #0000004d}._icon_1xqcg_33{font-size:16px}._info_1xqcg_69{background-color:#3b82f6}._warning_1xqcg_77{background-color:#fbbf24}._danger_1xqcg_85{background-color:#ef4444}@keyframes _ping_1xqcg_15{75%,to{transform:scale(2);opacity:0}}._header_h9tjf_1{box-sizing:border-box;width:100%;display:flex;flex-direction:column;position:relative;padding:8px 12px;transition:all .2s ease;box-shadow:0 4px 6px -1px #0000001a;border-top-left-radius:24px;border-top-right-radius:24px}._header_h9tjf_1:hover{box-shadow:0 10px 15px -3px #0000001a}._readyBorder_h9tjf_35{border-bottom:2px solid rgba(255,255,255,.1)}._notReadyBorder_h9tjf_43{border-bottom:1px solid rgba(255,255,255,.1)}._statusPurple_h9tjf_53{background-color:purple;color:#fff}._statusRed_h9tjf_61{background-color:red;color:#fff}._statusYellow_h9tjf_69{background-color:#fff500;color:#000}._statusBlue_h9tjf_77{background-color:#007ff3;color:#fff}._statusDefault_h9tjf_85{background-color:#1f2937;color:#fff}._floatingLogos_h9tjf_97{position:absolute;top:-20px;left:50%;transform:translate(-50%);display:flex;gap:8px;align-items:center;z-index:10}._logoWrapper_h9tjf_119{position:relative;transition:transform .2s}._logoWrapper_h9tjf_119:hover{transform:scale(1.1)}._storeLogo_h9tjf_137{width:40px;height:40px;padding:4px;background-color:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;object-fit:contain;transform:rotate(-2deg)}._platformLogo_h9tjf_159{width:40px;height:40px;padding:4px;background-color:#111827;border-radius:8px;box-shadow:0 1px 3px #0000001a;object-fit:contain;transform:rotate(2deg)}._platformTag_h9tjf_181{height:40px;padding:0 12px;background-color:#7455ff;color:#fff;font-weight:700;font-size:14px;border-radius:8px;border:1px solid rgba(116,85,255,.2);display:flex;align-items:center;justify-content:center;transform:rotate(2deg)}._content_h9tjf_213{display:flex;justify-content:space-between;align-items:center;margin-top:12px}._leftSection_h9tjf_229{display:flex;flex-direction:column;gap:2px}._idRow_h9tjf_241{display:flex;align-items:center;gap:8px}._orderId_h9tjf_253{font-weight:700;font-size:18px;letter-spacing:-.025em;margin:0}._subItemsBtn_h9tjf_267{background-color:#ffffff1a;color:currentColor;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:500;display:flex;align-items:center;gap:2px;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background-color .2s}._subItemsBtn_h9tjf_267:hover{background-color:#fff3}._customerRow_h9tjf_305{display:flex;align-items:center;gap:4px}._customerName_h9tjf_317{font-size:12px;font-weight:500}._espTag_h9tjf_327{font-size:10px;color:#22c55e;font-weight:700;display:flex;align-items:center;gap:2px}._rightSection_h9tjf_347{display:flex;flex-direction:column;align-items:flex-end;gap:2px}._detailsBtn_h9tjf_361{height:20px;width:20px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}._detailsBtn_h9tjf_361:hover{background-color:#ffffff1a}._statusRow_h9tjf_395{display:flex;align-items:center;gap:4px}._stageText_h9tjf_407{text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.025em;margin:0}._invoiceBadge_h9tjf_423{background-color:#000;padding:2px;border-radius:50%;display:flex;align-items:center;justify-content:center}._invoiceIconContainer_h9tjf_441{border-radius:50%;box-shadow:0 4px 6px #0000001a;border:1px solid white;padding:2px;display:flex;align-items:center;justify-content:center}._noInvoiceIconContainer_h9tjf_461{background-color:#ffffff1a;border-radius:50%;padding:2px;border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}._slash_h9tjf_485{position:absolute;top:50%;left:50%;width:120%;height:1px;background-color:#fff;transform:translate(-50%,-50%) rotate(45deg)}._ordersCount_h9tjf_505{font-weight:500;font-size:10px;margin:0}._iconSmall_h9tjf_517{width:12px;height:12px}._iconMedium_h9tjf_527{width:16px;height:16px}._itemContainer_1cl5z_1{border-bottom:1px dashed #374151;padding-bottom:8px}._itemRow_1cl5z_11{display:flex;align-items:center;gap:16px}._quantityBadge_1cl5z_23{border-radius:50%;min-width:60px;min-height:60px;display:flex;justify-content:center;align-items:center;font-size:30px;padding:12px;font-weight:700;flex-shrink:0}._statusPurple_1cl5z_51{background-color:purple;color:#fff}._statusRed_1cl5z_61{background-color:red;color:#fff}._statusYellow_1cl5z_71{background-color:#fff500;color:#000}._statusBlue_1cl5z_81{background-color:#007ff3;color:#fff}._statusDefault_1cl5z_91{background-color:#1f2937;color:#fff}._itemDetails_1cl5z_101{flex:1;text-align:left}._itemName_1cl5z_111{text-transform:uppercase;font-size:20px;font-weight:800;color:#fff;word-break:break-word}._modificadores_1cl5z_127{font-size:14px;font-weight:800;color:#fff;word-break:break-word;max-width:100%;margin-top:4px}._observation_1cl5z_145{font-size:14px;font-weight:600;color:#fff;word-break:break-word;max-width:100%;margin-top:4px}._subItemsContainer_1cl5z_165{display:flex;flex-wrap:wrap;flex-direction:column;margin-top:8px}._subItemGroup_1cl5z_179{margin-left:80px;border-left:2px solid #fbbf24;padding-left:5px;margin-top:8px}._subItemTitle_1cl5z_193{color:#9ca3af;font-size:14px;font-weight:700;text-align:left;text-transform:uppercase}._subItem_1cl5z_165{font-weight:500;font-size:14px;text-align:left;padding-left:16px;color:#fff;text-transform:uppercase;margin-top:2px}._card_1cb6f_1{box-sizing:border-box;position:relative;max-width:400px;min-height:288px;background-color:#151217;border-radius:24px;border:0;transition:all .3s ease;display:flex;flex-direction:column}._cardPrinted_1cb6f_27{border:4px solid #4ade80}._cardAnimating_1cb6f_35{animation:_wiggle_1cb6f_1 .3s ease-in-out}@keyframes _wiggle_1cb6f_1{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}._cardContent_1cb6f_69{box-sizing:border-box;width:100%;flex:1;background:transparent;border:none;cursor:pointer;padding:0;display:flex;flex-direction:column;min-height:0}._itemsList_1cb6f_95{display:flex;flex-direction:column;padding:16px;gap:16px;width:100%;box-sizing:border-box}._timer_1cb6f_113{width:100%;display:flex;justify-content:center;align-items:center;padding:24px 16px;flex:1;margin-top:auto}._timer_1cb6f_113 p{color:#fff;font-size:20px;font-weight:600;margin:0}._courierBadge_1cb6f_147{position:absolute;top:50%;right:-36px;width:56px;height:56px;background-color:#f97316;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px #0000004d;z-index:10}._courierPhoto_1cb6f_177{width:100%;height:100%;object-fit:cover;border-radius:50%}