@traefik-labs/faency 12.2.0 → 12.2.2

package/dist/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n  // Reset\n  appearance: 'none',\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: '$rubik',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  width: '100%',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  position: 'relative',\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit', // inherit border radius from InputWrapper\n  boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n  color: '$inputText',\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  '&[type=\"number\"]': {\n    pr: '0', // remove padding for number native controls\n  },\n\n  '&:-webkit-autofill,&:autofill': {\n    boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n  },\n\n  '&:-webkit-autofill::first-line,&:autofill::first-line': {\n    fontFamily: '$rubik',\n    color: '$hiContrast',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&::placeholder': {\n    color: '$inputPlaceholder',\n  },\n\n  '&:read-only:not(:disabled)': {\n    boxShadow: 'none',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    color: '$inputDisabledText',\n  },\n\n  variants: {\n    size: {\n      small: {\n        height: SMALL_HEIGHT,\n        fontSize: '$1',\n        px: '$2',\n        lineHeight: '$sizes$5',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$1',\n        },\n      },\n      medium: {\n        height: MEDIUM_HEIGHT,\n        fontSize: '$3',\n        px: '$3',\n        lineHeight: '$sizes$6',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$3',\n        },\n      },\n      large: {\n        height: LARGE_HEIGHT,\n        fontSize: '$3',\n        px: '$3',\n        lineHeight: '$sizes$7',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$3',\n        },\n      },\n    },\n    startAdornment: {\n      true: {},\n    },\n    endAdornment: {\n      true: {},\n    },\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        '&:disabled': {\n          boxShadow: 'none',\n        },\n        backgroundColor: 'transparent',\n        '&:focus-visible': {\n          backgroundColor: '$loContrast',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@hover': {\n          '&:hover:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n        '&:focus-visible:not(:read-only)': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    cursor: 'default',\n  },\n  compoundVariants: [\n    {\n      variant: 'ghost',\n      state: 'invalid',\n      css: {\n        boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'small',\n      css: {\n        paddingInlineStart: 'calc($2 + 15px)',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'medium',\n      css: {\n        paddingInlineStart: 'calc($3 + 15px)',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'large',\n      css: {\n        paddingInlineStart: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'small',\n      css: {\n        paddingInlineEnd: 'calc($2 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'medium',\n      css: {\n        paddingInlineEnd: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'large',\n      css: {\n        paddingInlineEnd: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'small',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'medium',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'large',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n  ],\n});\n\nconst InputWrapper = styled('div', {\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  backgroundColor: '$inputBg',\n  color: '$inputPlaceholder',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$inputFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$inputHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$inputDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              backgroundColor: 'inherit',\n            },\n            '&::after': {\n              backgroundColor: 'inherit',\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$inputInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n    size: {\n      small: {\n        borderRadius: '$2',\n        '&::before, &::after': {\n          borderRadius: '$2',\n        },\n      },\n      medium: {\n        borderRadius: '$3',\n        '&::before, &::after': {\n          borderRadius: '$3',\n        },\n      },\n      large: {\n        borderRadius: '$3',\n        '&::before, &::after': {\n          borderRadius: '$3',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    disabled: false,\n  },\n});\n\nconst AdornmentWrapper = styled('div', {\n  position: 'absolute',\n  top: 0,\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  variants: {\n    size: {\n      small: {\n        mx: 'calc($2 / 2)',\n      },\n      medium: {\n        mx: 'calc($3 / 2)',\n      },\n      large: {\n        mx: 'calc($3 / 2)',\n      },\n    },\n    variant: {\n      start: {\n        left: 0,\n      },\n      end: {\n        right: 0,\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n  left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n  right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n  clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n  ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n    const inputRef = React.useRef<InputHandle>(null);\n\n    React.useImperativeHandle(\n      forwardedRef,\n      () => {\n        const { current } = inputRef;\n        if (current) {\n          current.clear = () => {\n            current.value = '';\n          };\n        }\n        return current as InputHandle;\n      },\n      [inputRef]\n    );\n\n    const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    return (\n      <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n        {hasStartAdornment && (\n          <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n        )}\n\n        <StyledInput\n          ref={inputRef}\n          startAdornment={hasStartAdornment}\n          endAdornment={hasEndAdornment}\n          size={size}\n          {...props}\n        />\n        {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n      </InputWrapper>\n    );\n  }\n);\n"],"names":["elevationVariants","styled","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"Input.cjs","names":[],"sources":["../../../components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\n\nconst SMALL_HEIGHT = '$5';\nconst MEDIUM_HEIGHT = '$6';\nconst LARGE_HEIGHT = '$7';\n\nconst StyledInput = styled('input', {\n  // Reset\n  appearance: 'none',\n  borderWidth: '0',\n  boxSizing: 'border-box',\n  fontFamily: '$rubik',\n  margin: '0',\n  outline: 'none',\n  padding: '0',\n  width: '100%',\n  WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n\n  // Custom\n  position: 'relative',\n  backgroundColor: 'transparent',\n  borderRadius: 'inherit', // inherit border radius from InputWrapper\n  boxShadow: 'inset 0 0 0 1px $colors$inputBorder',\n  color: '$inputText',\n  fontVariantNumeric: 'tabular-nums',\n  transition: 'box-shadow .1s ease-in-out',\n\n  '&[type=\"number\"]': {\n    pr: '0', // remove padding for number native controls\n  },\n\n  '&:-webkit-autofill,&:autofill': {\n    boxShadow: 'inset 0 0 0 1px $colors$inputBorder, inset 0 0 0 100px $colors$inputBg',\n  },\n\n  '&:-webkit-autofill::first-line,&:autofill::first-line': {\n    fontFamily: '$rubik',\n    color: '$hiContrast',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$inputFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&::placeholder': {\n    color: '$inputPlaceholder',\n  },\n\n  '&:read-only:not(:disabled)': {\n    boxShadow: 'none',\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    color: '$inputDisabledText',\n  },\n\n  variants: {\n    size: {\n      small: {\n        height: SMALL_HEIGHT,\n        fontSize: '$1',\n        px: '$2',\n        lineHeight: '$sizes$5',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$1',\n        },\n      },\n      medium: {\n        height: MEDIUM_HEIGHT,\n        fontSize: '$3',\n        px: '$3',\n        lineHeight: '$sizes$6',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$3',\n        },\n      },\n      large: {\n        height: LARGE_HEIGHT,\n        fontSize: '$3',\n        px: '$3',\n        lineHeight: '$sizes$7',\n        '&:-webkit-autofill::first-line,&:autofill::first-line': {\n          fontSize: '$3',\n        },\n      },\n    },\n    startAdornment: {\n      true: {},\n    },\n    endAdornment: {\n      true: {},\n    },\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        '&:disabled': {\n          boxShadow: 'none',\n        },\n        backgroundColor: 'transparent',\n        '&:focus-visible': {\n          backgroundColor: '$loContrast',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$inputInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '@hover': {\n          '&:hover:not(:read-only)': {\n            cursor: 'text',\n          },\n        },\n        '&:focus-visible:not(:read-only)': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    cursor: 'default',\n  },\n  compoundVariants: [\n    {\n      variant: 'ghost',\n      state: 'invalid',\n      css: {\n        boxShadow: 'inset 0 0 0 1px $colors$inputInvalidBorder',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'small',\n      css: {\n        paddingInlineStart: 'calc($2 + 15px)',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'medium',\n      css: {\n        paddingInlineStart: 'calc($3 + 15px)',\n      },\n    },\n    {\n      startAdornment: true,\n      size: 'large',\n      css: {\n        paddingInlineStart: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'small',\n      css: {\n        paddingInlineEnd: 'calc($2 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'medium',\n      css: {\n        paddingInlineEnd: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'large',\n      css: {\n        paddingInlineEnd: 'calc($3 + 15px)',\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'small',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($4 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'medium',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n    {\n      endAdornment: true,\n      size: 'large',\n      state: 'invalid',\n      css: {\n        paddingInlineEnd: 'calc($6 + 30px)', // size padding + adornment margins + icon size + icon size\n      },\n    },\n  ],\n});\n\nconst InputWrapper = styled('div', {\n  // Reset\n  outline: 'none',\n  lineHeight: 0,\n\n  position: 'relative',\n  backgroundColor: '$inputBg',\n  color: '$inputPlaceholder',\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$inputFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$inputHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$inputDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              backgroundColor: 'inherit',\n            },\n            '&::after': {\n              backgroundColor: 'inherit',\n            },\n          },\n        },\n      },\n    },\n    state: {\n      invalid: {\n        '@hover': {\n          '&:hover': {\n            '&::after': {\n              backgroundColor: '$inputInvalidBorder',\n            },\n          },\n        },\n      },\n    },\n    size: {\n      small: {\n        borderRadius: '$2',\n        '&::before, &::after': {\n          borderRadius: '$2',\n        },\n      },\n      medium: {\n        borderRadius: '$3',\n        '&::before, &::after': {\n          borderRadius: '$3',\n        },\n      },\n      large: {\n        borderRadius: '$3',\n        '&::before, &::after': {\n          borderRadius: '$3',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    disabled: false,\n  },\n});\n\nconst AdornmentWrapper = styled('div', {\n  position: 'absolute',\n  top: 0,\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  variants: {\n    size: {\n      small: {\n        mx: 'calc($2 / 2)',\n      },\n      medium: {\n        mx: 'calc($3 / 2)',\n      },\n      large: {\n        mx: 'calc($3 / 2)',\n      },\n    },\n    variant: {\n      start: {\n        left: 0,\n      },\n      end: {\n        right: 0,\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\nconst AdornmentWrapperStart = styled(AdornmentWrapper, {\n  left: 0,\n});\n\nconst AdornmentWrapperEnd = styled(AdornmentWrapper, {\n  right: 0,\n});\n\ntype DefaultInputVariants = VariantProps<typeof StyledInput>;\nexport type InputVariants = Omit<DefaultInputVariants, 'startAdornment' | 'endAdornment'>;\nexport interface HTMLInputProps extends React.InputHTMLAttributes<any> {\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  type?: string;\n}\n\nexport type InputProps = Omit<HTMLInputProps, 'size'> & InputVariants & { css?: CSS };\n\nexport interface InputHandle extends HTMLInputElement {\n  clear: () => void;\n}\n\nexport const Input = React.forwardRef<InputHandle, InputProps>(\n  ({ size, startAdornment, endAdornment, css, ...props }, forwardedRef) => {\n    const inputRef = React.useRef<InputHandle>(null);\n\n    React.useImperativeHandle(\n      forwardedRef,\n      () => {\n        const { current } = inputRef;\n        if (current) {\n          current.clear = () => {\n            current.value = '';\n          };\n        }\n        return current as InputHandle;\n      },\n      [inputRef]\n    );\n\n    const hasStartAdornment = React.useMemo(() => Boolean(startAdornment), [startAdornment]);\n\n    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);\n\n    return (\n      <InputWrapper css={css} disabled={props.disabled} state={props.state}>\n        {hasStartAdornment && (\n          <AdornmentWrapperStart size={size}>{startAdornment}</AdornmentWrapperStart>\n        )}\n\n        <StyledInput\n          ref={inputRef}\n          startAdornment={hasStartAdornment}\n          endAdornment={hasEndAdornment}\n          size={size}\n          {...props}\n        />\n        {hasEndAdornment && <AdornmentWrapperEnd size={size}>{endAdornment}</AdornmentWrapperEnd>}\n      </InputWrapper>\n    );\n  }\n);\n"],"mappings":";;;;;;;AAMA,IAAM,eAAe,kBAAA,kBAAkB,GAAG;AAM1C,IAAM,cAAc,wBAAA,OAAO,SAAS;CAElC,YAAY;CACZ,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;CACP,yBAAyB;CAGzB,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,OAAO;CACP,oBAAoB;CACpB,YAAY;CAEZ,sBAAoB,EAClB,IAAI,KACL;CAED,iCAAiC,EAC/B,WAAW,0EACZ;CAED,yDAAyD;EACvD,YAAY;EACZ,OAAO;EACR;CAED,mBAAmB,EACjB,WAAW,6CAA6C,gBACzD;CAED,kBAAkB,EAChB,OAAO,qBACR;CAED,8BAA8B,EAC5B,WAAW,QACZ;CAED,cAAc;EACZ,eAAe;EACf,OAAO;EACR;CAED,UAAU;EACR,MAAM;GACJ,OAAO;IACL,QA1Da;IA2Db,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,QAAQ;IACN,QAlEc;IAmEd,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACD,OAAO;IACL,QA1Ea;IA2Eb,UAAU;IACV,IAAI;IACJ,YAAY;IACZ,yDAAyD,EACvD,UAAU,MACX;IACF;GACF;EACD,gBAAgB,EACd,MAAM,EAAE,EACT;EACD,cAAc,EACZ,MAAM,EAAE,EACT;EACD,SAAS,EACP,OAAO;GACL,WAAW;GACX,cAAc,EACZ,WAAW,QACZ;GACD,iBAAiB;GACjB,mBAAmB,EACjB,iBAAiB,eAClB;GACF,EACF;EACD,OAAO,EACL,SAAS;GACP,WAAW;GACX,mBAAmB,EACjB,WAAW,+CAA+C,gBAC3D;GACF,EACF;EACD,QAAQ;GACN,SAAS;IACP,QAAQ;IACR,UAAU,EACR,2BAA2B,EACzB,QAAQ,QACT,EACF;IACD,mCAAmC,EACjC,QAAQ,QACT;IACF;GACD,MAAM,EACJ,QAAQ,QACT;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACT;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,KAAK,EACH,WAAW,8CACZ;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,gBAAgB;GAChB,MAAM;GACN,KAAK,EACH,oBAAoB,mBACrB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACD;GACE,cAAc;GACd,MAAM;GACN,OAAO;GACP,KAAK,EACH,kBAAkB,mBACnB;GACF;EACF;CACF,CAAC;AAEF,IAAM,eAAe,wBAAA,OAAO,OAAO;CAEjC,SAAS;CACT,YAAY;CAEZ,UAAU;CACV,iBAAiB;CACjB,OAAO;CAEP,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,eAAe;EAChB;CAED,mBAAmB;EACjB,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF;CAED,UAAU,EACR,WAAW;EACT,aAAa,EACX,iBAAiB,iBAClB;EACD,YAAY;GACV,iBAAiB;GACjB,SAAS;GACV;EACF,EACF;CAED,UAAU;EACR,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,UAAU,EACR,WAAW;IACT,aAAa,EACX,iBAAiB,WAClB;IACD,YAAY,EACV,iBAAiB,WAClB;IACF,EACF;GACF,EACF;EACD,OAAO,EACL,SAAS,EACP,UAAU,EACR,WAAW,EACT,YAAY,EACV,iBAAiB,uBAClB,EACF,EACF,EACF,EACF;EACD,MAAM;GACJ,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,QAAQ;IACN,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACD,OAAO;IACL,cAAc;IACd,uBAAuB,EACrB,cAAc,MACf;IACF;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACX;CACF,CAAC;AAEF,IAAM,mBAAmB,wBAAA,OAAO,OAAO;CACrC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;EACR,MAAM;GACJ,OAAO,EACL,IAAI,gBACL;GACD,QAAQ,EACN,IAAI,gBACL;GACD,OAAO,EACL,IAAI,gBACL;GACF;EACD,SAAS;GACP,OAAO,EACL,MAAM,GACP;GACD,KAAK,EACH,OAAO,GACR;GACF;EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAEF,IAAM,wBAAwB,wBAAA,OAAO,kBAAkB,EACrD,MAAM,GACP,CAAC;AAEF,IAAM,sBAAsB,wBAAA,OAAO,kBAAkB,EACnD,OAAO,GACR,CAAC;AAgBF,IAAa,QAAQ,MAAA,QAAM,YACxB,EAAE,MAAM,gBAAgB,cAAc,KAAK,GAAG,SAAS,iBAAiB;CACvE,MAAM,WAAW,MAAA,QAAM,OAAoB,KAAK;AAEhD,OAAA,QAAM,oBACJ,oBACM;EACJ,MAAM,EAAE,YAAY;AACpB,MAAI,QACF,SAAQ,cAAc;AACpB,WAAQ,QAAQ;;AAGpB,SAAO;IAET,CAAC,SAAS,CACX;CAED,MAAM,oBAAoB,MAAA,QAAM,cAAc,QAAQ,eAAe,EAAE,CAAC,eAAe,CAAC;CAExF,MAAM,kBAAkB,MAAA,QAAM,cAAc,QAAQ,aAAa,EAAE,CAAC,aAAa,CAAC;AAElF,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAmB;EAAK,UAAU,MAAM;EAAU,OAAO,MAAM;YAA/D;GACG,qBACC,iBAAA,GAAA,kBAAA,KAAC,uBAAD;IAA6B;cAAO;IAAuC,CAAA;GAG7E,iBAAA,GAAA,kBAAA,KAAC,aAAD;IACE,KAAK;IACL,gBAAgB;IAChB,cAAc;IACR;IACN,GAAI;IACJ,CAAA;GACD,mBAAmB,iBAAA,GAAA,kBAAA,KAAC,qBAAD;IAA2B;cAAO;IAAmC,CAAA;GAC5E;;EAGpB"}