@kids-reporter/routing-ui 0.1.22 → 0.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AA6FA,MAAM,MAAM,UAAU,GAAG;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC5B,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAA;AAE3E,QAAA,MAAM,KAAK;kBAXK,MAAM;YACZ,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;cACxB,MAAM,IAAI;eACT,KAAK,CAAC,SAAS;eACf,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;YACpC,OAAO;mBACA,MAAM;WACd,SAAS,GAAG,QAAQ;wIA8I5B,CAAA;AAED,eAAe,KAAK,CAAA"}
|
package/dist/components/input.js
CHANGED
|
@@ -46,7 +46,7 @@ const inputVariants = (0, _classVarianceAuthority.cva)(
|
|
|
46
46
|
},
|
|
47
47
|
mode: {
|
|
48
48
|
default: 'rounded-[12px] border-neutral-400 bg-neutral-100',
|
|
49
|
-
search: 'rounded-full border-transparent desktop:border-neutral-
|
|
49
|
+
search: 'rounded-full border-transparent desktop:border-neutral-400'
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
compoundVariants: [{
|
|
@@ -68,15 +68,15 @@ const inputVariants = (0, _classVarianceAuthority.cva)(
|
|
|
68
68
|
}, {
|
|
69
69
|
state: 'default',
|
|
70
70
|
mode: 'search',
|
|
71
|
-
className: 'bg-neutral-100'
|
|
71
|
+
className: 'bg-neutral-100 desktop:border-neutral-400'
|
|
72
72
|
}, {
|
|
73
73
|
state: 'focus',
|
|
74
74
|
mode: 'search',
|
|
75
|
-
className: 'border-neutral-600'
|
|
75
|
+
className: 'border-neutral-600 bg-neutral-100 desktop:border-neutral-600 desktop:bg-transparent'
|
|
76
76
|
}, {
|
|
77
77
|
state: 'active',
|
|
78
78
|
mode: 'search',
|
|
79
|
-
className: 'border-neutral-600'
|
|
79
|
+
className: 'border-neutral-600 desktop:border-neutral-600'
|
|
80
80
|
}],
|
|
81
81
|
defaultVariants: {
|
|
82
82
|
state: 'default',
|
|
@@ -160,6 +160,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
160
160
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
161
161
|
className: inputClasses,
|
|
162
162
|
ref: ref,
|
|
163
|
+
"data-input-state": currentState,
|
|
164
|
+
"data-input-mode": mode,
|
|
163
165
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
164
166
|
className: "text-neutral-600",
|
|
165
167
|
children: isSearchMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIconSmall, {})
|
|
@@ -170,7 +172,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
170
172
|
onFocus: handleFocus,
|
|
171
173
|
onBlur: handleBlur,
|
|
172
174
|
placeholder: placeholder,
|
|
173
|
-
className: (0, _cn.cn)('flex-1
|
|
175
|
+
className: (0, _cn.cn)('flex-1 shrink bg-transparent text-neutral-900 placeholder:prose-p1 placeholder:text-neutral-400 focus:outline-none disabled:text-neutral-400', isSearchMode && 'ml-2 max-w-[72%]'),
|
|
174
176
|
"aria-describedby": errorMessage ? `${props.id ?? 'input'}-error` : undefined,
|
|
175
177
|
"aria-invalid": !!errorMessage,
|
|
176
178
|
ref: inputRef ?? innerInputRef,
|
|
@@ -184,7 +186,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
184
186
|
}), isSearchMode && hasValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
185
187
|
type: "button",
|
|
186
188
|
onClick: handleClear,
|
|
187
|
-
className: "p-1/2 ml-auto
|
|
189
|
+
className: "p-1/2 ml-auto shrink-0 cursor-pointer rounded-full text-neutral-400 transition-colors hover:text-neutral-600 active:bg-neutral-200",
|
|
188
190
|
"aria-label": "Clear input",
|
|
189
191
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseIcon, {})
|
|
190
192
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","names":["Object","defineProperty","exports","value","default","_classVarianceAuthority","require","_react","_icons","_cn","_jsxRuntime","CloseIcon","className","jsxs","width","height","viewBox","fill","xmlns","children","jsx","cx","cy","r","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","inputVariants","cva","variants","state","focus","active","error","disabled","mode","search","compoundVariants","defaultVariants","Input","forwardRef","placeholder","onChange","onClear","onFocus","onBlur","inputRef","errorMessage","props","ref","internalValue","setInternalValue","useState","isFocused","setIsFocused","isActive","setIsActive","innerInputRef","useRef","currentValue","undefined","hasValue","length","currentState","useMemo","handleChange","e","newValue","target","handleFocus","handleBlur","handleClear","preventDefault","stopPropagation","currentRef","current","inputClasses","cn","isSearchMode","SearchIconSmall","type","id","role","onClick","_default"],"sources":["../../src/components/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\n\nimport { SearchIconSmall } from '../icons'\nimport { cn } from '../utils/cn'\n\n// Close icon component\nconst CloseIcon = ({ className }: { className?: string }) => (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"currentColor\" />\n <path\n d=\"M7 7l6 6M13 7l-6 6\"\n stroke=\"white\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n)\n\nconst inputVariants = cva(\n // Base styles\n 'px-4 py-1.5 h-11 relative flex items-center border prose-p1 transition-colors duration-200 hover:border-neutral-600 desktop:bg-neutral-white',\n {\n variants: {\n state: {\n default: 'border-transparent',\n focus: '',\n active: '',\n error: '',\n disabled:\n 'bg-neutral-100 hover:border-neutral-400 desktop:bg-neutral-100',\n },\n mode: {\n default: 'rounded-[12px] border-neutral-400 bg-neutral-100',\n search: 'rounded-full border-transparent desktop:border-neutral-600',\n },\n },\n compoundVariants: [\n {\n state: 'error',\n mode: 'default',\n className: 'border-semantic-danger hover:border-semantic-danger',\n },\n {\n state: 'default',\n mode: 'default',\n className: 'border-neutral-400',\n },\n {\n state: 'focus',\n mode: 'default',\n className: 'border-neutral-600',\n },\n {\n state: 'active',\n mode: 'default',\n className: 'border-neutral-600',\n },\n\n {\n state: 'default',\n mode: 'search',\n className: 'bg-neutral-100',\n },\n {\n state: 'focus',\n mode: 'search',\n className: 'border-neutral-600',\n },\n {\n state: 'active',\n mode: 'search',\n className: 'border-neutral-600',\n },\n ],\n defaultVariants: {\n state: 'default',\n mode: 'default',\n },\n }\n)\n\nexport type InputProps = {\n placeholder?: string\n value?: string\n onChange?: (value: string) => void\n onClear?: () => void\n children?: React.ReactNode\n inputRef?: React.RefObject<HTMLInputElement>\n error?: boolean\n errorMessage?: string\n mode?: 'default' | 'search'\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n placeholder = '搜尋更多新聞、議題',\n value,\n onChange,\n onClear,\n className,\n onFocus,\n onBlur,\n inputRef,\n error,\n errorMessage,\n mode = 'default',\n disabled,\n ...props\n },\n ref\n ) => {\n const [internalValue, setInternalValue] = useState('')\n const [isFocused, setIsFocused] = useState(false)\n const [isActive, setIsActive] = useState(false)\n const innerInputRef = useRef<HTMLInputElement>(null)\n const currentValue = value !== undefined ? value : internalValue\n const hasValue = currentValue.length > 0\n\n // Determine current state\n const currentState = useMemo(() => {\n if (error) return 'error'\n if (disabled) return 'disabled'\n if (isFocused) return 'focus'\n if (hasValue) return isActive ? 'active' : 'default'\n return 'default'\n }, [error, disabled, isFocused, hasValue, isActive])\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value\n if (onChange) {\n onChange(newValue)\n } else {\n setInternalValue(newValue)\n }\n setIsActive(true)\n }\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e)\n }\n setIsFocused(true)\n setIsActive(true)\n }\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e)\n }\n setIsFocused(false)\n setIsActive(false)\n }\n\n const handleClear = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n if (onChange) {\n onChange('')\n } else {\n setInternalValue('')\n }\n if (onClear) {\n onClear()\n }\n\n const currentRef = inputRef ?? innerInputRef\n currentRef.current?.focus()\n }\n\n const inputClasses = cn(\n inputVariants({ state: currentState, mode }),\n className\n )\n\n const isSearchMode = mode === 'search'\n\n return (\n <div className=\"gap-2 flex flex-col\">\n <div className={inputClasses} ref={ref}>\n <div className=\"text-neutral-600\">\n {isSearchMode && <SearchIconSmall />}\n </div>\n <input\n type=\"text\"\n value={currentValue}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n placeholder={placeholder}\n className={cn(\n 'flex-1 flex-shrink-1 bg-transparent text-neutral-900 placeholder:prose-p1 placeholder:text-neutral-400 focus:outline-none disabled:text-neutral-400',\n isSearchMode && 'ml-2 max-w-[72%]'\n )}\n aria-describedby={\n errorMessage ? `${props.id ?? 'input'}-error` : undefined\n }\n aria-invalid={!!errorMessage}\n ref={inputRef ?? innerInputRef}\n disabled={disabled}\n {...props}\n />\n {errorMessage && (\n <p\n className=\"-bottom-5 left-0 absolute prose-p3 text-semantic-danger\"\n id={`${props.id ?? 'input'}-error`}\n role=\"alert\"\n >\n {errorMessage}\n </p>\n )}\n\n {isSearchMode && hasValue && (\n <button\n type=\"button\"\n onClick={handleClear}\n className=\"p-1/2 ml-auto flex-shrink-0 cursor-pointer rounded-full text-neutral-400 transition-colors hover:text-neutral-600 active:bg-neutral-200\"\n aria-label=\"Clear input\"\n >\n <CloseIcon />\n </button>\n )}\n </div>\n </div>\n )\n }\n)\n\nexport default Input\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"input.js","names":["Object","defineProperty","exports","value","default","_classVarianceAuthority","require","_react","_icons","_cn","_jsxRuntime","CloseIcon","className","jsxs","width","height","viewBox","fill","xmlns","children","jsx","cx","cy","r","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","inputVariants","cva","variants","state","focus","active","error","disabled","mode","search","compoundVariants","defaultVariants","Input","forwardRef","placeholder","onChange","onClear","onFocus","onBlur","inputRef","errorMessage","props","ref","internalValue","setInternalValue","useState","isFocused","setIsFocused","isActive","setIsActive","innerInputRef","useRef","currentValue","undefined","hasValue","length","currentState","useMemo","handleChange","e","newValue","target","handleFocus","handleBlur","handleClear","preventDefault","stopPropagation","currentRef","current","inputClasses","cn","isSearchMode","SearchIconSmall","type","id","role","onClick","_default"],"sources":["../../src/components/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\n\nimport { SearchIconSmall } from '../icons'\nimport { cn } from '../utils/cn'\n\n// Close icon component\nconst CloseIcon = ({ className }: { className?: string }) => (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"currentColor\" />\n <path\n d=\"M7 7l6 6M13 7l-6 6\"\n stroke=\"white\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n)\n\nconst inputVariants = cva(\n // Base styles\n 'px-4 py-1.5 h-11 relative flex items-center border prose-p1 transition-colors duration-200 hover:border-neutral-600 desktop:bg-neutral-white',\n {\n variants: {\n state: {\n default: 'border-transparent',\n focus: '',\n active: '',\n error: '',\n disabled:\n 'bg-neutral-100 hover:border-neutral-400 desktop:bg-neutral-100',\n },\n mode: {\n default: 'rounded-[12px] border-neutral-400 bg-neutral-100',\n search: 'rounded-full border-transparent desktop:border-neutral-400',\n },\n },\n compoundVariants: [\n {\n state: 'error',\n mode: 'default',\n className: 'border-semantic-danger hover:border-semantic-danger',\n },\n {\n state: 'default',\n mode: 'default',\n className: 'border-neutral-400',\n },\n {\n state: 'focus',\n mode: 'default',\n className: 'border-neutral-600',\n },\n {\n state: 'active',\n mode: 'default',\n className: 'border-neutral-600',\n },\n\n {\n state: 'default',\n mode: 'search',\n className: 'bg-neutral-100 desktop:border-neutral-400',\n },\n {\n state: 'focus',\n mode: 'search',\n className:\n 'border-neutral-600 bg-neutral-100 desktop:border-neutral-600 desktop:bg-transparent',\n },\n {\n state: 'active',\n mode: 'search',\n className: 'border-neutral-600 desktop:border-neutral-600',\n },\n ],\n defaultVariants: {\n state: 'default',\n mode: 'default',\n },\n }\n)\n\nexport type InputProps = {\n placeholder?: string\n value?: string\n onChange?: (value: string) => void\n onClear?: () => void\n children?: React.ReactNode\n inputRef?: React.RefObject<HTMLInputElement>\n error?: boolean\n errorMessage?: string\n mode?: 'default' | 'search'\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n placeholder = '搜尋更多新聞、議題',\n value,\n onChange,\n onClear,\n className,\n onFocus,\n onBlur,\n inputRef,\n error,\n errorMessage,\n mode = 'default',\n disabled,\n ...props\n },\n ref\n ) => {\n const [internalValue, setInternalValue] = useState('')\n const [isFocused, setIsFocused] = useState(false)\n const [isActive, setIsActive] = useState(false)\n const innerInputRef = useRef<HTMLInputElement>(null)\n const currentValue = value !== undefined ? value : internalValue\n const hasValue = currentValue.length > 0\n\n // Determine current state\n const currentState = useMemo(() => {\n if (error) return 'error'\n if (disabled) return 'disabled'\n if (isFocused) return 'focus'\n if (hasValue) return isActive ? 'active' : 'default'\n return 'default'\n }, [error, disabled, isFocused, hasValue, isActive])\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value\n if (onChange) {\n onChange(newValue)\n } else {\n setInternalValue(newValue)\n }\n setIsActive(true)\n }\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e)\n }\n setIsFocused(true)\n setIsActive(true)\n }\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e)\n }\n setIsFocused(false)\n setIsActive(false)\n }\n\n const handleClear = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n if (onChange) {\n onChange('')\n } else {\n setInternalValue('')\n }\n if (onClear) {\n onClear()\n }\n\n const currentRef = inputRef ?? innerInputRef\n currentRef.current?.focus()\n }\n\n const inputClasses = cn(\n inputVariants({ state: currentState, mode }),\n className\n )\n\n const isSearchMode = mode === 'search'\n\n return (\n <div className=\"gap-2 flex flex-col\">\n <div\n className={inputClasses}\n ref={ref}\n data-input-state={currentState}\n data-input-mode={mode}\n >\n <div className=\"text-neutral-600\">\n {isSearchMode && <SearchIconSmall />}\n </div>\n <input\n type=\"text\"\n value={currentValue}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n placeholder={placeholder}\n className={cn(\n 'flex-1 shrink bg-transparent text-neutral-900 placeholder:prose-p1 placeholder:text-neutral-400 focus:outline-none disabled:text-neutral-400',\n isSearchMode && 'ml-2 max-w-[72%]'\n )}\n aria-describedby={\n errorMessage ? `${props.id ?? 'input'}-error` : undefined\n }\n aria-invalid={!!errorMessage}\n ref={inputRef ?? innerInputRef}\n disabled={disabled}\n {...props}\n />\n {errorMessage && (\n <p\n className=\"-bottom-5 left-0 absolute prose-p3 text-semantic-danger\"\n id={`${props.id ?? 'input'}-error`}\n role=\"alert\"\n >\n {errorMessage}\n </p>\n )}\n\n {isSearchMode && hasValue && (\n <button\n type=\"button\"\n onClick={handleClear}\n className=\"p-1/2 ml-auto shrink-0 cursor-pointer rounded-full text-neutral-400 transition-colors hover:text-neutral-600 active:bg-neutral-200\"\n aria-label=\"Clear input\"\n >\n <CloseIcon />\n </button>\n )}\n </div>\n </div>\n )\n }\n)\n\nexport default Input\n"],"mappings":";AAAA,YAAY;;AAAAA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA;AAEZ,IAAAC,uBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,GAAA,GAAAH,OAAA;AAAgC,IAAAI,WAAA,GAAAJ,OAAA;AAEhC;AACA,MAAMK,SAAS,GAAGA,CAAC;EAAEC;AAAkC,CAAC,kBACtD,IAAAF,WAAA,CAAAG,IAAA;EACEC,KAAK,EAAC,IAAI;EACVC,MAAM,EAAC,IAAI;EACXC,OAAO,EAAC,WAAW;EACnBC,IAAI,EAAC,MAAM;EACXL,SAAS,EAAEA,SAAU;EACrBM,KAAK,EAAC,4BAA4B;EAAAC,QAAA,gBAElC,IAAAT,WAAA,CAAAU,GAAA;IAAQC,EAAE,EAAC,IAAI;IAACC,EAAE,EAAC,IAAI;IAACC,CAAC,EAAC,IAAI;IAACN,IAAI,EAAC;EAAc,CAAE,CAAC,eACrD,IAAAP,WAAA,CAAAU,GAAA;IACEI,CAAC,EAAC,oBAAoB;IACtBC,MAAM,EAAC,OAAO;IACdC,WAAW,EAAC,KAAK;IACjBC,aAAa,EAAC,OAAO;IACrBC,cAAc,EAAC;EAAO,CACvB,CAAC;AAAA,CACC,CACN;AAED,MAAMC,aAAa,GAAG,IAAAC,2BAAG;AACvB;AACA,8IAA8I,EAC9I;EACEC,QAAQ,EAAE;IACRC,KAAK,EAAE;MACL5B,OAAO,EAAE,oBAAoB;MAC7B6B,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVC,KAAK,EAAE,EAAE;MACTC,QAAQ,EACN;IACJ,CAAC;IACDC,IAAI,EAAE;MACJjC,OAAO,EAAE,kDAAkD;MAC3DkC,MAAM,EAAE;IACV;EACF,CAAC;EACDC,gBAAgB,EAAE,CAChB;IACEP,KAAK,EAAE,OAAO;IACdK,IAAI,EAAE,SAAS;IACfzB,SAAS,EAAE;EACb,CAAC,EACD;IACEoB,KAAK,EAAE,SAAS;IAChBK,IAAI,EAAE,SAAS;IACfzB,SAAS,EAAE;EACb,CAAC,EACD;IACEoB,KAAK,EAAE,OAAO;IACdK,IAAI,EAAE,SAAS;IACfzB,SAAS,EAAE;EACb,CAAC,EACD;IACEoB,KAAK,EAAE,QAAQ;IACfK,IAAI,EAAE,SAAS;IACfzB,SAAS,EAAE;EACb,CAAC,EAED;IACEoB,KAAK,EAAE,SAAS;IAChBK,IAAI,EAAE,QAAQ;IACdzB,SAAS,EAAE;EACb,CAAC,EACD;IACEoB,KAAK,EAAE,OAAO;IACdK,IAAI,EAAE,QAAQ;IACdzB,SAAS,EACP;EACJ,CAAC,EACD;IACEoB,KAAK,EAAE,QAAQ;IACfK,IAAI,EAAE,QAAQ;IACdzB,SAAS,EAAE;EACb,CAAC,CACF;EACD4B,eAAe,EAAE;IACfR,KAAK,EAAE,SAAS;IAChBK,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAcD,MAAMI,KAAK,gBAAG,IAAAC,iBAAU,EACtB,CACE;EACEC,WAAW,GAAG,WAAW;EACzBxC,KAAK;EACLyC,QAAQ;EACRC,OAAO;EACPjC,SAAS;EACTkC,OAAO;EACPC,MAAM;EACNC,QAAQ;EACRb,KAAK;EACLc,YAAY;EACZZ,IAAI,GAAG,SAAS;EAChBD,QAAQ;EACR,GAAGc;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAAC,EAAE,CAAC;EACtD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EACjD,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAJ,eAAQ,EAAC,KAAK,CAAC;EAC/C,MAAMK,aAAa,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EACpD,MAAMC,YAAY,GAAG1D,KAAK,KAAK2D,SAAS,GAAG3D,KAAK,GAAGiD,aAAa;EAChE,MAAMW,QAAQ,GAAGF,YAAY,CAACG,MAAM,GAAG,CAAC;;EAExC;EACA,MAAMC,YAAY,GAAG,IAAAC,cAAO,EAAC,MAAM;IACjC,IAAI/B,KAAK,EAAE,OAAO,OAAO;IACzB,IAAIC,QAAQ,EAAE,OAAO,UAAU;IAC/B,IAAImB,SAAS,EAAE,OAAO,OAAO;IAC7B,IAAIQ,QAAQ,EAAE,OAAON,QAAQ,GAAG,QAAQ,GAAG,SAAS;IACpD,OAAO,SAAS;EAClB,CAAC,EAAE,CAACtB,KAAK,EAAEC,QAAQ,EAAEmB,SAAS,EAAEQ,QAAQ,EAAEN,QAAQ,CAAC,CAAC;EAEpD,MAAMU,YAAY,GAAIC,CAAsC,IAAK;IAC/D,MAAMC,QAAQ,GAAGD,CAAC,CAACE,MAAM,CAACnE,KAAK;IAC/B,IAAIyC,QAAQ,EAAE;MACZA,QAAQ,CAACyB,QAAQ,CAAC;IACpB,CAAC,MAAM;MACLhB,gBAAgB,CAACgB,QAAQ,CAAC;IAC5B;IACAX,WAAW,CAAC,IAAI,CAAC;EACnB,CAAC;EAED,MAAMa,WAAW,GAAIH,CAAqC,IAAK;IAC7D,IAAItB,OAAO,EAAE;MACXA,OAAO,CAACsB,CAAC,CAAC;IACZ;IACAZ,YAAY,CAAC,IAAI,CAAC;IAClBE,WAAW,CAAC,IAAI,CAAC;EACnB,CAAC;EAED,MAAMc,UAAU,GAAIJ,CAAqC,IAAK;IAC5D,IAAIrB,MAAM,EAAE;MACVA,MAAM,CAACqB,CAAC,CAAC;IACX;IACAZ,YAAY,CAAC,KAAK,CAAC;IACnBE,WAAW,CAAC,KAAK,CAAC;EACpB,CAAC;EAED,MAAMe,WAAW,GAAIL,CAAmB,IAAK;IAC3CA,CAAC,CAACM,cAAc,CAAC,CAAC;IAClBN,CAAC,CAACO,eAAe,CAAC,CAAC;IAEnB,IAAI/B,QAAQ,EAAE;MACZA,QAAQ,CAAC,EAAE,CAAC;IACd,CAAC,MAAM;MACLS,gBAAgB,CAAC,EAAE,CAAC;IACtB;IACA,IAAIR,OAAO,EAAE;MACXA,OAAO,CAAC,CAAC;IACX;IAEA,MAAM+B,UAAU,GAAG5B,QAAQ,IAAIW,aAAa;IAC5CiB,UAAU,CAACC,OAAO,EAAE5C,KAAK,CAAC,CAAC;EAC7B,CAAC;EAED,MAAM6C,YAAY,GAAG,IAAAC,MAAE,EACrBlD,aAAa,CAAC;IAAEG,KAAK,EAAEiC,YAAY;IAAE5B;EAAK,CAAC,CAAC,EAC5CzB,SACF,CAAC;EAED,MAAMoE,YAAY,GAAG3C,IAAI,KAAK,QAAQ;EAEtC,oBACE,IAAA3B,WAAA,CAAAU,GAAA;IAAKR,SAAS,EAAC,qBAAqB;IAAAO,QAAA,eAClC,IAAAT,WAAA,CAAAG,IAAA;MACED,SAAS,EAAEkE,YAAa;MACxB3B,GAAG,EAAEA,GAAI;MACT,oBAAkBc,YAAa;MAC/B,mBAAiB5B,IAAK;MAAAlB,QAAA,gBAEtB,IAAAT,WAAA,CAAAU,GAAA;QAAKR,SAAS,EAAC,kBAAkB;QAAAO,QAAA,EAC9B6D,YAAY,iBAAI,IAAAtE,WAAA,CAAAU,GAAA,EAACZ,MAAA,CAAAyE,eAAe,IAAE;MAAC,CACjC,CAAC,eACN,IAAAvE,WAAA,CAAAU,GAAA;QACE8D,IAAI,EAAC,MAAM;QACX/E,KAAK,EAAE0D,YAAa;QACpBjB,QAAQ,EAAEuB,YAAa;QACvBrB,OAAO,EAAEyB,WAAY;QACrBxB,MAAM,EAAEyB,UAAW;QACnB7B,WAAW,EAAEA,WAAY;QACzB/B,SAAS,EAAE,IAAAmE,MAAE,EACX,8IAA8I,EAC9IC,YAAY,IAAI,kBAClB,CAAE;QACF,oBACE/B,YAAY,GAAG,GAAGC,KAAK,CAACiC,EAAE,IAAI,OAAO,QAAQ,GAAGrB,SACjD;QACD,gBAAc,CAAC,CAACb,YAAa;QAC7BE,GAAG,EAAEH,QAAQ,IAAIW,aAAc;QAC/BvB,QAAQ,EAAEA,QAAS;QAAA,GACfc;MAAK,CACV,CAAC,EACDD,YAAY,iBACX,IAAAvC,WAAA,CAAAU,GAAA;QACER,SAAS,EAAC,yDAAyD;QACnEuE,EAAE,EAAE,GAAGjC,KAAK,CAACiC,EAAE,IAAI,OAAO,QAAS;QACnCC,IAAI,EAAC,OAAO;QAAAjE,QAAA,EAEX8B;MAAY,CACZ,CACJ,EAEA+B,YAAY,IAAIjB,QAAQ,iBACvB,IAAArD,WAAA,CAAAU,GAAA;QACE8D,IAAI,EAAC,QAAQ;QACbG,OAAO,EAAEZ,WAAY;QACrB7D,SAAS,EAAC,oIAAoI;QAC9I,cAAW,aAAa;QAAAO,QAAA,eAExB,IAAAT,WAAA,CAAAU,GAAA,EAACT,SAAS,IAAE;MAAC,CACP,CACT;IAAA,CACE;EAAC,CACH,CAAC;AAEV,CACF,CAAC;AAAA,IAAA2E,QAAA,GAAApF,OAAA,CAAAE,OAAA,GAEcqC,KAAK","ignoreList":[]}
|