pure-react-ui 1.4.7 → 1.5.0

package/README.md

@@ -83,6 +83,160 @@ import { Modal } from 'pure-react-ui';
 - `closeOnEscape`: boolean (default: true)
 - `showCloseButton`: boolean (default: true)
 
+### Icon
+
+A comprehensive icon component library with 100+ SVG icons.
+
+```tsx
+import { Icon } from 'pure-react-ui';
+
+<Icon name="Home" size={24} color="#007bff" />
+<Icon name="Search" size={32} onClick={handleClick} />
+```
+
+**Props:**
+- `name`: IconName (required) - Name of the icon to display
+- `size`: number | string (default: 24) - Size of the icon
+- `color`: string (default: 'currentColor') - Color of the icon
+- `className`: string (optional) - Additional CSS classes
+- `onClick`: () => void (optional) - Click handler (makes icon clickable)
+
+**Available Icons:**
+
+**Arrows & Navigation:**
+ArrowLeft, ArrowRight, ArrowUp, ArrowDown, ArrowUpRight, ArrowDownRight, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, DoubleChevronLeft, DoubleChevronRight, Home, Menu, Close, Search, Filter
+
+**Actions:**
+Plus, Minus, Check, X, Edit, Trash, Save, Download, Upload, Copy, Share
+
+**Media:**
+Play, Pause, Stop, VolumeUp, VolumeDown, VolumeOff, Image, Video, Camera
+
+**Communication:**
+Mail, Message, Phone, Bell, Notification
+
+**Files:**
+File, Folder, FolderOpen, FileText, FilePdf
+
+**User:**
+User, Users, UserPlus, UserMinus, Settings, Logout
+
+**Status:**
+CheckCircle, XCircle, AlertCircle, Info, Warning, Star, Heart, Bookmark
+
+**Social:**
+Facebook, Twitter, Instagram, Linkedin, Github, Youtube
+
+**Technology:**
+Wifi, Bluetooth, Battery, Zap, Lock, Unlock, Shield
+
+**Shopping:**
+ShoppingCart, ShoppingBag, CreditCard, Gift
+
+**Time:**
+Clock, Calendar, Timer
+
+**Location:**
+MapPin, Globe, Navigation
+
+**Weather:**
+Sun, Moon, Cloud
+
+**Utility:**
+Eye, EyeOff, Refresh, MoreVertical, MoreHorizontal, Grid, List
+
+You can also import individual icons directly:
+```tsx
+import { Home, Search, User } from 'pure-react-ui';
+
+<Home size={24} color="#007bff" />
+```
+
+### Space
+
+A layout component for adding consistent spacing between elements.
+
+```tsx
+import { Space } from 'pure-react-ui';
+
+<Space size="medium" direction="horizontal">
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+  <Button>Button 3</Button>
+</Space>
+
+<Space size={20} direction="vertical" align="start">
+  <Card>Card 1</Card>
+  <Card>Card 2</Card>
+</Space>
+```
+
+**Props:**
+- `size`: 'small' | 'medium' | 'large' | number (default: 'medium') - Spacing size between items
+- `direction`: 'horizontal' | 'vertical' (default: 'horizontal') - Direction of spacing
+- `align`: 'start' | 'end' | 'center' | 'baseline' | 'stretch' (default: 'center') - Alignment of items
+- `wrap`: boolean (default: false) - Whether items should wrap to next line
+- `className`: string (optional) - Additional CSS classes
+
+### Flex
+
+A flexible container component based on CSS Flexbox.
+
+```tsx
+import { Flex } from 'pure-react-ui';
+
+<Flex direction="row" justify="between" align="center" gap="medium">
+  <Button>Left</Button>
+  <Button>Center</Button>
+  <Button>Right</Button>
+</Flex>
+
+<Flex direction="column" justify="start" align="stretch" gap={16}>
+  <Card>Card 1</Card>
+  <Card>Card 2</Card>
+</Flex>
+```
+
+**Props:**
+- `direction`: 'row' | 'column' | 'row-reverse' | 'column-reverse' (default: 'row') - Flex direction
+- `justify`: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' (default: 'start') - Justify content
+- `align`: 'start' | 'end' | 'center' | 'baseline' | 'stretch' (default: 'start') - Align items
+- `wrap`: boolean | 'wrap' | 'nowrap' | 'wrap-reverse' (default: false) - Flex wrap behavior
+- `gap`: 'none' | 'small' | 'medium' | 'large' | number (default: 'none') - Gap between items
+- `className`: string (optional) - Additional CSS classes
+- `style`: React.CSSProperties (optional) - Additional inline styles
+
+### Text
+
+A typography component for consistent text styling with various options.
+
+```tsx
+import { Text } from 'pure-react-ui';
+
+<Text as="h1" size="2xl" weight="bold" color="primary">
+  Heading Text
+</Text>
+
+<Text size="lg" color="muted" align="center">
+  Centered paragraph text
+</Text>
+
+<Text as="span" size="sm" decoration="underline" transform="uppercase">
+  Styled Text
+</Text>
+```
+
+**Props:**
+- `as`: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'small' | 'strong' | 'em' | 'code' | 'pre' (default: 'p') - HTML element to render
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' (default: 'md') - Font size
+- `weight`: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' (default: 'normal') - Font weight
+- `color`: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'muted' (default: 'default') - Text color
+- `align`: 'left' | 'center' | 'right' | 'justify' (default: 'left') - Text alignment
+- `transform`: 'none' | 'uppercase' | 'lowercase' | 'capitalize' (default: 'none') - Text transform
+- `decoration`: 'none' | 'underline' | 'line-through' | 'overline' (default: 'none') - Text decoration
+- `truncate`: boolean (default: false) - Truncate text with ellipsis
+- `className`: string (optional) - Additional CSS classes
+
 ## Styling
 
 All components include their own CSS files and use CSS classes with the `pure-` prefix. The CSS files are automatically imported with each component. You can also style them by targeting these classes:
@@ -90,11 +244,35 @@ All components include their own CSS files and use CSS classes with the `pure-`
 - **Button**: `pure-button`, `pure-button--primary`, `pure-button--secondary`, etc.
 - **Card**: `pure-card`, `pure-card--hoverable`, `pure-card--shadow-medium`, etc.
 - **Modal**: `pure-modal`, `pure-modal__overlay`, `pure-modal__header`, etc.
+- **Icon**: `pure-icon`, `pure-icon--clickable`, `pure-icon--small`, etc.
+- **Space**: `pure-space`, `pure-space--horizontal`, `pure-space--vertical`, etc.
+- **Flex**: `pure-flex`, `pure-flex--row`, `pure-flex--column`, etc.
+- **Text**: `pure-text`, `pure-text--lg`, `pure-text--bold`, etc.
 
 Each component has its own CSS file located in:
 - `lib/components/Button/Button.css`
 - `lib/components/Card/Card.css`
 - `lib/components/Modal/Modal.css`
+- `lib/components/Icon/Icon.css`
+- `lib/components/Space/Space.css`
+- `lib/components/Flex/Flex.css`
+- `lib/components/Text/Text.css`
+
+## Examples
+
+A complete example application is available in the `example` directory. To run it:
+
+```bash
+# From the root directory, build the package first
+npm run build
+
+# Then navigate to example directory
+cd example
+npm install
+npm run dev
+```
+
+Or check out `EXAMPLES.md` for code examples and usage patterns.
 
 ## License
 

package/lib/components/Flex/Flex.css

@@ -0,0 +1,106 @@
+/* Pure Flex Component Styles */
+.pure-flex {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+/* Direction Variants */
+.pure-flex--row {
+  flex-direction: row;
+}
+
+.pure-flex--column {
+  flex-direction: column;
+}
+
+.pure-flex--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.pure-flex--column-reverse {
+  flex-direction: column-reverse;
+}
+
+/* Justify Content */
+.pure-flex--justify-start {
+  justify-content: flex-start;
+}
+
+.pure-flex--justify-end {
+  justify-content: flex-end;
+}
+
+.pure-flex--justify-center {
+  justify-content: center;
+}
+
+.pure-flex--justify-between {
+  justify-content: space-between;
+}
+
+.pure-flex--justify-around {
+  justify-content: space-around;
+}
+
+.pure-flex--justify-evenly {
+  justify-content: space-evenly;
+}
+
+/* Align Items */
+.pure-flex--align-start {
+  align-items: flex-start;
+}
+
+.pure-flex--align-end {
+  align-items: flex-end;
+}
+
+.pure-flex--align-center {
+  align-items: center;
+}
+
+.pure-flex--align-baseline {
+  align-items: baseline;
+}
+
+.pure-flex--align-stretch {
+  align-items: stretch;
+}
+
+/* Wrap */
+.pure-flex--wrap {
+  flex-wrap: wrap;
+}
+
+.pure-flex--nowrap {
+  flex-wrap: nowrap;
+}
+
+.pure-flex--wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+/* Gap */
+.pure-flex--gap-none {
+  gap: 0;
+}
+
+.pure-flex--gap-small {
+  gap: 0.5rem;
+}
+
+.pure-flex--gap-medium {
+  gap: 1rem;
+}
+
+.pure-flex--gap-large {
+  gap: 1.5rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .pure-flex--wrap {
+    flex-wrap: wrap;
+  }
+}
+

package/lib/components/Flex/Flex.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './Flex.css';
+export interface FlexProps {
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+    gap?: 'none' | 'small' | 'medium' | 'large' | number;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+export declare const Flex: React.FC<FlexProps>;
+//# sourceMappingURL=Flex.d.ts.map

package/lib/components/Flex/Flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAC5D,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,cAAc,CAAC;IACpD,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAwDpC,CAAC"}

package/lib/components/Flex/Flex.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import './Flex.css';
+export const Flex = ({ direction = 'row', justify = 'start', align = 'start', wrap = false, gap = 'none', className = '', style = {}, children }) => {
+    const baseClass = 'pure-flex';
+    const directionClass = `pure-flex--${direction}`;
+    const justifyClass = `pure-flex--justify-${justify}`;
+    const alignClass = `pure-flex--align-${align}`;
+    let wrapClass = '';
+    if (wrap === true) {
+        wrapClass = 'pure-flex--wrap';
+    }
+    else if (wrap === 'wrap') {
+        wrapClass = 'pure-flex--wrap';
+    }
+    else if (wrap === 'wrap-reverse') {
+        wrapClass = 'pure-flex--wrap-reverse';
+    }
+    else {
+        wrapClass = 'pure-flex--nowrap';
+    }
+    const combinedClassName = [
+        baseClass,
+        directionClass,
+        justifyClass,
+        alignClass,
+        wrapClass,
+        className
+    ].filter(Boolean).join(' ');
+    const gapValue = typeof gap === 'number' ? gap : undefined;
+    const gapClass = typeof gap === 'string' && gap !== 'none' ? `pure-flex--gap-${gap}` : '';
+    const combinedStyle = {
+        ...style,
+    };
+    if (gapValue !== undefined) {
+        combinedStyle.gap = `${gapValue}px`;
+    }
+    const finalClassName = [combinedClassName, gapClass].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: finalClassName, style: combinedStyle }, children));
+};
+//# sourceMappingURL=Flex.js.map

package/lib/components/Flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,YAAY,CAAC;AAapB,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,OAAO,EACf,IAAI,GAAG,KAAK,EACZ,GAAG,GAAG,MAAM,EACZ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,QAAQ,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,WAAW,CAAC;IAC9B,MAAM,cAAc,GAAG,cAAc,SAAS,EAAE,CAAC;IACjD,MAAM,YAAY,GAAG,sBAAsB,OAAO,EAAE,CAAC;IACrD,MAAM,UAAU,GAAG,oBAAoB,KAAK,EAAE,CAAC;IAE/C,IAAI,SAAS,GAAG,EAAE,CAAC;IACnB,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;QAClB,SAAS,GAAG,iBAAiB,CAAC;IAChC,CAAC;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QAC3B,SAAS,GAAG,iBAAiB,CAAC;IAChC,CAAC;SAAM,IAAI,IAAI,KAAK,cAAc,EAAE,CAAC;QACnC,SAAS,GAAG,yBAAyB,CAAC;IACxC,CAAC;SAAM,CAAC;QACN,SAAS,GAAG,mBAAmB,CAAC;IAClC,CAAC;IAED,MAAM,iBAAiB,GAAG;QACxB,SAAS;QACT,cAAc;QACd,YAAY;QACZ,UAAU;QACV,SAAS;QACT,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3D,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE1F,MAAM,aAAa,GAAwB;QACzC,GAAG,KAAK;KACT,CAAC;IAEF,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,aAAa,CAAC,GAAG,GAAG,GAAG,QAAQ,IAAI,CAAC;IACtC,CAAC;IAED,MAAM,cAAc,GAAG,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE/E,OAAO,CACL,6BACE,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,aAAa,IAEnB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/lib/components/Icon/Icon.css

@@ -0,0 +1,88 @@
+/* Pure Icon Component Styles */
+.pure-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.pure-icon--clickable {
+  cursor: pointer;
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.pure-icon--clickable:hover {
+  opacity: 0.8;
+  transform: scale(1.1);
+}
+
+.pure-icon--clickable:active {
+  transform: scale(0.95);
+}
+
+.pure-icon__wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.pure-icon__wrapper:hover {
+  opacity: 0.8;
+}
+
+.pure-icon__wrapper:focus {
+  outline: none;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+}
+
+.pure-icon__wrapper:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+/* Size variants */
+.pure-icon--small {
+  width: 16px;
+  height: 16px;
+}
+
+.pure-icon--medium {
+  width: 24px;
+  height: 24px;
+}
+
+.pure-icon--large {
+  width: 32px;
+  height: 32px;
+}
+
+/* Animation for loading/spinning icons */
+.pure-icon--spin {
+  animation: pure-icon-spin 1s linear infinite;
+}
+
+@keyframes pure-icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Pulse animation */
+.pure-icon--pulse {
+  animation: pure-icon-pulse 2s ease-in-out infinite;
+}
+
+@keyframes pure-icon-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+

package/lib/components/Icon/Icon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IconName, IconProps as BaseIconProps } from './icons';
+import './Icon.css';
+export interface IconProps extends BaseIconProps {
+    name: IconName;
+    size?: number | string;
+    color?: string;
+    className?: string;
+    onClick?: () => void;
+}
+export declare const Icon: React.FC<IconProps>;
+export * from './icons';
+//# sourceMappingURL=Icon.d.ts.map

package/lib/components/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAW,QAAQ,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,SAAS,CAAC;AACxE,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAgDpC,CAAC;AAGF,cAAc,SAAS,CAAC"}

package/lib/components/Icon/Icon.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { iconMap } from './icons';
+import './Icon.css';
+export const Icon = ({ name, size = 24, color = 'currentColor', className = '', onClick, ...props }) => {
+    const IconComponent = iconMap[name];
+    if (!IconComponent) {
+        console.warn(`Icon "${name}" not found`);
+        return null;
+    }
+    const baseClass = 'pure-icon';
+    const clickableClass = onClick ? 'pure-icon--clickable' : '';
+    const combinedClassName = [baseClass, clickableClass, className].filter(Boolean).join(' ');
+    const iconElement = (React.createElement(IconComponent, { size: size, color: color, className: combinedClassName, ...props }));
+    if (onClick) {
+        return (React.createElement("span", { className: "pure-icon__wrapper", onClick: onClick, role: "button", tabIndex: 0, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onClick();
+                }
+            } }, iconElement));
+    }
+    return iconElement;
+};
+// Export individual icons for direct use
+export * from './icons';
+//# sourceMappingURL=Icon.js.map

package/lib/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAwC,MAAM,SAAS,CAAC;AACxE,OAAO,YAAY,CAAC;AAUpB,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,cAAc,EACtB,SAAS,GAAG,EAAE,EACd,OAAO,EACP,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,SAAS,GAAG,WAAW,CAAC;IAC9B,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7D,MAAM,iBAAiB,GAAG,CAAC,SAAS,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE3F,MAAM,WAAW,GAAG,CAClB,oBAAC,aAAa,IACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,iBAAiB,KACxB,KAAK,GACT,CACH,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,8BACE,SAAS,EAAC,oBAAoB,EAC9B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;oBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,OAAO,EAAE,CAAC;gBACZ,CAAC;YACH,CAAC,IAEA,WAAW,CACP,CACR,CAAC;IACJ,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,yCAAyC;AACzC,cAAc,SAAS,CAAC"}