@archbase/components 3.0.0

package/src/image/editor/components/Input/Input.tsx

@@ -0,0 +1,70 @@
+import React, { memo, useRef } from 'react'
+import { useState, useEffect } from 'react';
+
+interface InputProps extends React.InputHTMLAttributes<any> {
+  onInputChangedEnd?: Function
+  onChangedDelayed?: Function
+  onChangedValue?: Function
+  delayMs?: number
+}
+
+const Input = memo((props: React.InputHTMLAttributes<any> | InputProps) => {
+
+  const { onInputChangedEnd, onChangedDelayed, onChangedValue, delayMs, ...restProps } = props as any;
+  const [state, setState] = useState<any>(props.value);
+  const timerRef = useRef<any>(null);
+  const mountRef = useRef<boolean>(true);
+  const flagRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (!onChangedDelayed) return;
+    if (mountRef.current) {
+      mountRef.current = false;
+      return;
+    }
+
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      clearTimeout(timerRef.current);
+      onChangedDelayed(state);
+    }, delayMs || 100)
+
+    return () => {
+      clearTimeout(timerRef.current);
+    }
+
+  }, [state])
+
+  function changeValue(e: any) {
+    if (['checkbox', 'radio'].includes(props.type as string)) {
+      setState(e.target.checked)
+      onChangedValue && onChangedValue(e.target.checked);
+
+    } else {
+      setState(e.target.value)
+      onChangedValue && onChangedValue(e.target.value);
+    }
+  }
+
+  return (
+    <React.Fragment>
+      {
+        onInputChangedEnd && <input {...restProps} className={restProps?.className} style={restProps.style}
+          value={props.value}
+          onChange={changeValue}
+          onBlur={(e) => { onInputChangedEnd(e.target.value) }}
+          onKeyDown={(e) => {
+            if (e.key == 'Enter') onInputChangedEnd(state)
+          }}
+        />
+      }
+      {
+        !onInputChangedEnd && <input {...restProps} className={restProps?.className} style={restProps.style}
+          value={props.value}
+          onChange={changeValue}
+        />
+      }
+    </React.Fragment>)
+})
+
+export default Input

package/src/image/editor/components/Tab/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["Tab.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAQ,SAAS,EAAuB,MAAM,OAAO,CAAA;AACnE,OAAO,mBAAmB,CAAA;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAA;IACnD,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,QAAA,MAAM,YAAY,wJAWhB,gBAAgB,6CAoGhB,CAAA;AAEF,eAAO,MAAM,OAAO,uEAClB;IACE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,6CAID,CAAA;AAEF,eAAe,YAAY,CAAA"}

package/src/image/editor/components/Tab/Tab.tsx

@@ -0,0 +1,150 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { memo, ReactNode, useEffect, useState } from "react"
+import './TabsStyles.scss'
+import { useRef } from 'react';
+
+export interface TabContainerProp {
+  children: Array<React.JSX.Element> | React.JSX.Element;
+  activeIndex?: number;
+  backgroundColor?: string;
+  color?: string;
+  indicatorStyle?: 'simple' | 'bottomLine' | 'button'
+  onTabChange?: Function,
+  lazy?: boolean;
+  transitionMs?: number;
+  borderLine?: boolean;
+  fontColor?: string;
+}
+
+interface TabHeader {
+  label: string;
+  icon?: React.JSX.Element | string | null | undefined;
+  disabled?: boolean
+}
+
+const TabContainer = memo(({
+  activeIndex = 0,
+  children,
+  backgroundColor = 'inherit',
+  color = '#428CFF',
+  indicatorStyle = 'bottomLine',
+  onTabChange = (index: number) => { },
+  transitionMs = 375,
+  borderLine = false,
+  fontColor = 'inherit',
+  lazy = false }:
+  TabContainerProp) => {
+
+  const [header, setHeader] = useState<Array<TabHeader>>([]);
+  const [activeTab, setActiveTab] = useState(activeIndex);
+  const tabContainerRef = useRef(null)
+
+  useEffect(() => {
+    const tabsItems = children instanceof Array ? children : [children];
+    checkChildrens(tabsItems);
+    const tabs = tabsItems.map(el => ({ label: el.props.name, icon: el.props.icon, disabled: el.props.disabled }))
+    if (activeIndex > tabs.length - 1 || activeIndex < 0)
+      throw new Error(`Intervalo inválido para activeIndex ${activeIndex}`);
+    setHeader(tabs);
+  }, [children])
+
+  useEffect(() => {
+    const tabsItems = children instanceof Array ? children : [children];
+    if (activeIndex > tabsItems.length - 1 || activeIndex < 0)
+      throw new Error(`Intervalo inválido para activeIndex ${activeIndex}`);
+    setActiveTab(tabsItems[activeIndex]?.props?.disabled ? 0 : activeIndex);
+  }, [activeIndex])
+
+  useEffect(() => {
+    if (header && header.length) {
+      onTabChange(activeTab);
+    }
+  }, [activeTab])
+
+  function checkChildrens(data: any[]) {
+    try {
+      data.map((el: any) => {
+        if (!el.props.name)
+          throw new Error('Dentro do componente TabContainer só pode ser renderizado o componente TabItem e precisa de um suporte de nome')
+        return true;
+      })
+    } catch (e) {
+      throw new Error("O componente TabContainer deve ter um TabItem como componente filho");
+    }
+
+  }
+
+  const tabsItems = children instanceof Array ? children : [children];
+
+  return <div ref={tabContainerRef} className="tab-pp">
+    <div className="header" style={{ backgroundColor: backgroundColor, borderBottom: borderLine ? '1px solid #323232' : 'undet' }}>
+      {header.map((el, index) => (
+        <button onClick={() => {
+          if (el.disabled) return;
+          setActiveTab(index)
+        }} key={el.label}
+          style={{
+            color: index == activeTab && (indicatorStyle === 'simple' || indicatorStyle === 'bottomLine') ? color : fontColor,
+            backgroundColor: index == activeTab && (indicatorStyle === 'button') ? color : 'inherit',
+          }}
+          className={index == activeTab ? `itemlabel ${indicatorStyle} active` : 'itemlabel'}
+          disabled={el.disabled}
+        >
+          {el.icon} {el.label}
+          {indicatorStyle === 'bottomLine' && (<div style={{ backgroundColor: color }}></div>)}
+        </button>
+      ))}
+    </div>
+    <div className="body">
+      {tabsItems.map((tabEl, index) => {
+        if (index < activeTab) {
+          return (<div style={{
+            transform: 'translate3d(-100%, 0px, 0px)',
+            height: '0px',
+            overflow: 'hidden',
+            transition: `transform ${transitionMs / 1000}s ease`
+          }} key={index} className={'body-content'}>
+            {!lazy && tabEl}
+          </div>)
+        }
+        if (index > activeTab) {
+          return (<div style={{
+            transform: 'translate3d(100%, 0px, 0px)',
+            height: '0px',
+            overflow: 'hidden',
+            transition: `transform ${transitionMs / 1000}s ease`
+          }} key={index} className={'body-content'}>
+            {!lazy && tabEl}
+          </div>)
+        }
+        else {
+          return (<div style={{
+            visibility: 'inherit',
+            overflow: 'auto',
+            height: 'auto',
+            position: 'relative',
+            transition: `transform ${transitionMs / 1000}s ease`
+          }} key={index} className={'body-content'}>
+            {tabEl}
+          </div>)
+        }
+      })}
+
+    </div>
+
+  </div>
+})
+
+export const TabItem = memo(({ name, children, icon = null, type = 'TabItem', disabled = false }:
+  {
+    name: string;
+    children: ReactNode, icon?: React.JSX.Element | string | null | undefined;
+    disabled?: boolean
+    type?: string
+  }) => {
+  return <div style={{ padding: '1rem 0.5rem' }}>
+    {children}
+  </div>
+})
+
+export default TabContainer

package/src/image/editor/components/Tab/TabsStyles.scss

@@ -0,0 +1,72 @@
+.tab-pp {
+  .header {
+    display: flex;
+    padding: 0px 8px;
+    box-sizing: border-box;
+    justify-content: flex-start;
+    align-items: center;
+    overflow-x: auto;
+
+    .itemlabel {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: .5rem 0.65rem;
+      min-height: 48px;
+      box-sizing: border-box;
+      white-space: nowrap;
+      text-transform: capitalize;
+      cursor: pointer;
+      opacity: 0.7;
+      font-size: inherit;
+      border: unset;
+
+
+      &[disabled] {
+        opacity: .4;
+        cursor: not-allowed;
+      }
+
+      &.simple {
+        position: relative;
+        opacity: 1;
+      }
+
+      &.bottomLine {
+        position: relative;
+        opacity: 1;
+
+        div {
+          position: absolute;
+          width: 100%;
+          bottom: 0;
+          height: 3px;
+        }
+      }
+
+      &.button {
+        position: relative;
+        opacity: 1;
+        color: inherit;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .body {
+    position: relative;
+    height: auto;
+    width: 100%;
+    overflow: hidden;
+
+    .body-content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      visibility: hidden;
+      width: 100%;
+      height: auto;
+      transform: none;
+    }
+  }
+}

package/src/image/editor/functions/croppr/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["box.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,GAAG;IACtB;;;;;;;OAOG;IACH,EAAE,EAAE,GAAG,CAAC;IACR,EAAE,EAAE,GAAG,CAAC;IACR,EAAE,EAAE,GAAG,CAAC;IACR,EAAE,EAAE,GAAG,CAAC;gBAEI,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG;IAO9C;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,MAAO,EAAE,EAAE,MAAO,EAAE,EAAE,MAAO,EAAE,EAAE,MAAO;IAQ9C;;;OAGG;IACH,KAAK;IAIL;;;OAGG;IACH,MAAM;IAIN;;;;;;OAMG;IACH,MAAM,CAAC,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,WAAS;IAarD;;;;;OAKG;IACH,KAAK,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,WAAS;IAOlC;;OAEG;IACH,IAAI,CAAC,CAAC,MAAO,EAAE,CAAC,MAAO;IAavB;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,WAAS;IAM/B;;;;OAIG;IACH,gBAAgB,CAAC,KAAK,WAAS;IAM/B;;;;;;;OAOG;IACH,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,WAAS,EAAE,IAAI,SAAW;IAoB7D;;;;;;OAMG;IACH,mBAAmB,CACjB,aAAa,EAAE,GAAG,EAClB,cAAc,EAAE,GAAG,EACnB,MAAM,WAAS;IAoDjB;;;;;;;;;OASG;IACH,eAAe,CACb,QAAQ,GAAE,GAAU,EACpB,SAAS,GAAE,GAAU,EACrB,QAAQ,GAAE,GAAU,EACpB,SAAS,GAAE,GAAU,EACrB,MAAM,WAAS,EACf,KAAK,GAAE,GAAU;CAuCpB"}

package/src/image/editor/functions/croppr/box.ts

@@ -0,0 +1,272 @@
+/**
+ * Box component
+ */
+export default class Box {
+  /**
+   * Creates a new Box instance.
+   * @constructor
+   * @param {Number} x1
+   * @param {Number} y1
+   * @param {Number} x2
+   * @param {Number} y2
+   */
+  x1: any;
+  y1: any;
+  x2: any;
+  y2: any;
+
+  constructor(x1: any, y1: any, x2: any, y2: any) {
+    this.x1 = x1;
+    this.y1 = y1;
+    this.x2 = x2;
+    this.y2 = y2;
+  }
+
+  /**
+   * Sets the new dimensions of the box.
+   * @param {Number} x1
+   * @param {Number} y1
+   * @param {Number} x2
+   * @param {Number} y2
+   */
+  set(x1 = null, y1 = null, x2 = null, y2 = null) {
+    this.x1 = x1 == null ? this.x1 : x1;
+    this.y1 = y1 == null ? this.y1 : y1;
+    this.x2 = x2 == null ? this.x2 : x2;
+    this.y2 = y2 == null ? this.y2 : y2;
+    return this;
+  }
+
+  /**
+   * Calculates the width of the box.
+   * @returns {Number}
+   */
+  width() {
+    return Math.abs(this.x2 - this.x1);
+  }
+
+  /**
+   * Calculates the height of the box.
+   * @returns {Number}
+   */
+  height() {
+    return Math.abs(this.y2 - this.y1);
+  }
+
+  /**
+   * Resizes the box to a new size.
+   * @param {Number} newWidth
+   * @param {Number} newHeight
+   * @param {Array} [origin] The origin point to resize from.
+   *      Defaults to [0, 0] (top left).
+   */
+  resize(newWidth: any, newHeight: any, origin = [0, 0]) {
+    const fromX = this.x1 + this.width() * origin[0];
+    const fromY = this.y1 + this.height() * origin[1];
+
+
+    this.x1 = fromX - newWidth * origin[0];
+    this.y1 = fromY - newHeight * origin[1];
+    this.x2 = this.x1 + newWidth;
+    this.y2 = this.y1 + newHeight;
+
+    return this;
+  }
+
+  /**
+   * Scale the box by a factor.
+   * @param {Number} factor
+   * @param {Array} [origin] The origin point to resize from.
+   *      Defaults to [0, 0] (top left).
+   */
+  scale(factor: any, origin = [0, 0]) {
+    const newWidth = this.width() * factor;
+    const newHeight = this.height() * factor;
+    this.resize(newWidth, newHeight, origin);
+    return this;
+  }
+
+  /**
+   * Move the box to the specified coordinates.
+   */
+  move(x = null, y = null) {
+    let width = this.width();
+    let height = this.height();
+    x = x === null ? this.x1 : x;
+    y = y === null ? this.y1 : y;
+
+    this.x1 = x;
+    this.y1 = y;
+    this.x2 = (x as any) + width;
+    this.y2 = (y as any) + height;
+    return this;
+  }
+
+  /**
+   * Get relative x and y coordinates of a given point within the box.
+   * @param {Array} point The x and y ratio position within the box.
+   * @returns {Array} The x and y coordinates [x, y].
+   */
+  getRelativePoint(point = [0, 0]) {
+    const x = this.width() * point[0];
+    const y = this.height() * point[1];
+    return [x, y];
+  }
+
+  /**
+   * Get absolute x and y coordinates of a given point within the box.
+   * @param {Array} point The x and y ratio position within the box.
+   * @returns {Array} The x and y coordinates [x, y].
+   */
+  getAbsolutePoint(point = [0, 0]) {
+    const x = this.x1 + this.width() * point[0];
+    const y = this.y1 + this.height() * point[1];
+    return [x, y];
+  }
+
+  /**
+   * Constrain the box to a fixed ratio.
+   * @param {Number} ratio
+   * @param {Array} [origin] The origin point to resize from.
+   *     Defaults to [0, 0] (top left).
+   * @param {String} [grow] The axis to grow to maintain the ratio.
+   *     Defaults to 'height'.
+   */
+  constrainToRatio(ratio: any, origin = [0, 0], grow = "height") {
+    if (ratio === null) {
+      return;
+    }
+    const width = this.width();
+    const height = this.height();
+    switch (grow) {
+      case "height": // Grow height only
+        this.resize(this.width(), this.width() * ratio, origin);
+        break;
+      case "width": // Grow width only
+        this.resize((this.height() * 1) / ratio, this.height(), origin);
+        break;
+      default: // Default: Grow height only
+        this.resize(this.width(), this.width() * ratio, origin);
+    }
+
+    return this;
+  }
+
+  /**
+   * Constrain the box within a boundary.
+   * @param {Number} boundaryWidth
+   * @param {Number} boundaryHeight
+   * @param {Array} [origin] The origin point to resize from.
+   *     Defaults to [0, 0] (top left).
+   */
+  constrainToBoundary(
+    boundaryWidth: any,
+    boundaryHeight: any,
+    origin = [0, 0]
+  ) {
+    // Calculate the maximum sizes for each direction of growth
+    const [originX, originY] = this.getAbsolutePoint(origin);
+    const maxIfLeft = originX;
+    const maxIfTop = originY;
+    const maxIfRight = boundaryWidth - originX;
+    const maxIfBottom = boundaryHeight - originY;
+
+    // Express the direction of growth in terms of left, both,
+    // and right as -1, 0, and 1 respectively. Ditto for top/both/down.
+    const directionX = -2 * origin[0] + 1;
+    const directionY = -2 * origin[1] + 1;
+
+    // Determine the max size to use according to the direction of growth.
+    let [maxWidth, maxHeight]: [any, any] = [null, null];
+    switch (directionX) {
+      case -1:
+        maxWidth = maxIfLeft;
+        break;
+      case 0:
+        maxWidth = (Math.min(maxIfLeft, maxIfRight) * 2) as any;
+        break;
+      case +1:
+        maxWidth = maxIfRight as any;
+        break;
+    }
+    switch (directionY) {
+      case -1:
+        maxHeight = maxIfTop;
+        break;
+      case 0:
+        maxHeight = (Math.min(maxIfTop, maxIfBottom) * 2) as any;
+        break;
+      case +1:
+        maxHeight = maxIfBottom as any;
+        break;
+    }
+
+    // Resize if the box exceeds the calculated max width/height.
+    if (this.width() > maxWidth) {
+      const factor = maxWidth / this.width();
+      this.scale(factor, origin);
+    }
+    if (this.height() > maxHeight) {
+      const factor = maxHeight / this.height();
+      this.scale(factor, origin);
+    }
+
+    return this;
+  }
+
+  /**
+   * Constrain the box to a maximum/minimum size.
+   * @param {Number} [maxWidth]
+   * @param {Number} [maxHeight]
+   * @param {Number} [minWidth]
+   * @param {Number} [minHeight]
+   * @param {Array} [origin] The origin point to resize from.
+   *     Defaults to [0, 0] (top left).
+   * @param {Number} [ratio] Ratio to maintain.
+   */
+  constrainToSize(
+    maxWidth: any = null,
+    maxHeight: any = null,
+    minWidth: any = null,
+    minHeight: any = null,
+    origin = [0, 0],
+    ratio: any = null
+  ) {
+    // Calculate new max/min widths & heights that constrains to the ratio
+    if (ratio) {
+      if (ratio > 1) {
+        maxWidth = (maxHeight * 1) / ratio;
+        minHeight = minHeight * ratio;
+      } else if (ratio < 1) {
+        maxHeight = maxWidth * ratio;
+        minWidth = (minHeight * 1) / ratio;
+      }
+    }
+
+    if (maxWidth && this.width() > maxWidth) {
+      const newWidth = maxWidth,
+        newHeight = ratio === null ? this.height() : maxHeight;
+      this.resize(newWidth, newHeight, origin);
+    }
+
+    if (maxHeight && this.height() > maxHeight) {
+      const newWidth = ratio === null ? this.width() : maxWidth,
+        newHeight = maxHeight;
+      this.resize(newWidth, newHeight, origin);
+    }
+
+    if (minWidth && this.width() < minWidth) {
+      const newWidth = minWidth,
+        newHeight = ratio === null ? this.height() : minHeight;
+      this.resize(newWidth, newHeight, origin);
+    }
+
+    if (minHeight && this.height() < minHeight) {
+      const newWidth = ratio === null ? this.width() : minWidth,
+        newHeight = minHeight;
+      this.resize(newWidth, newHeight, origin);
+    }
+
+    return this;
+  }
+}

package/src/image/editor/functions/croppr/core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["core.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,GAAG,MAAM,OAAO,CAAC;AAwBxB;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,UAAU;IAC7B,OAAO,EAAE,GAAG,CAAC;IACb,YAAY,EAAE,GAAG,CAAC;IAClB,QAAQ,EAAE,GAAG,CAAC;IACd,SAAS,EAAE,GAAG,CAAC;IACf,GAAG,EAAE,GAAG,CAAC;IACT,WAAW,EAAE,GAAG,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC;IACb,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,EAAE,GAAG,CAAC;IACpB,QAAQ,EAAE,WAAW,CAAC;IACtB,SAAS,EAAE,GAAG,CAAC;IACf,OAAO,EAAE,GAAG,CAAC;IACb,YAAY,EAAE,GAAG,CAAC;IAClB,WAAW,EAAE,GAAG,CAAC;gBAEL,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,UAAQ;IAoCxD;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,GAAG;IAuBvB;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,GAAG;IA4DvB;;;OAGG;IACH,QAAQ,CAAC,GAAG,EAAE,GAAG;IAajB;;OAEG;IACH,OAAO;IAIP;;;;OAIG;IACH,aAAa,CAAC,IAAI,EAAE,GAAG;IAsCvB;;OAEG;IACH,MAAM;IAmDN;;;OAGG;IACH,mBAAmB;IAOnB;;;OAGG;IACH,kBAAkB;IA+ClB;;;OAGG;IACH,mBAAmB;IA2DnB;;;OAGG;IACH,iBAAiB,CAAC,CAAC,EAAE,GAAG;IAgBxB;;;OAGG;IACH,kBAAkB,CAAC,CAAC,EAAE,GAAG;IAiHzB;;;OAGG;IACH,eAAe,CAAC,CAAC,EAAE,GAAG;IAOtB;;;OAGG;IACH,iBAAiB,CAAC,CAAC,EAAE,GAAG;IAmBxB;;;OAGG;IACH,kBAAkB,CAAC,CAAC,EAAE,GAAG;IAkCzB;;;OAGG;IACH,eAAe,CAAC,CAAC,EAAE,GAAG;IAOtB;;OAEG;IACH,QAAQ,CAAC,IAAI,MAAO;;;;;;IAoCpB;;OAEG;IACH,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG;;;;;;;;;;gCA6Fa,GAAG,aAAa,GAAG;;CAoC9D"}