@seeqdev/qomponents 0.0.1 → 0.0.3
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.
- package/README.md +33 -13
- package/dist/Checkbox/Checkbox.d.ts +7 -0
- package/dist/Checkbox/Checkbox.stories.d.ts +5 -0
- package/dist/Checkbox/Checkbox.test.d.ts +1 -0
- package/dist/Checkbox/Checkbox.types.d.ts +15 -0
- package/dist/Checkbox/index.d.ts +1 -0
- package/dist/TextArea/TextArea.d.ts +7 -0
- package/dist/TextArea/TextArea.stories.d.ts +5 -0
- package/dist/TextArea/TextArea.test.d.ts +1 -0
- package/dist/TextArea/TextArea.types.d.ts +26 -0
- package/dist/TextArea/index.d.ts +1 -0
- package/dist/TextField/TextField.types.d.ts +0 -2
- package/dist/index.d.ts +6 -0
- package/dist/index.esm.js +93 -14
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +95 -13
- package/dist/index.js.map +1 -1
- package/dist/sharedTypes.d.ts +1 -0
- package/dist/styles.css +271 -0
- package/package.json +2 -1
- package/dist/Button/Button.js +0 -44
- package/dist/Button/Button.js.map +0 -1
- package/dist/Button/Button.stories.js +0 -49
- package/dist/Button/Button.stories.js.map +0 -1
- package/dist/Button/Button.test.js +0 -49
- package/dist/Button/Button.test.js.map +0 -1
- package/dist/Button/Button.types.js +0 -4
- package/dist/Button/Button.types.js.map +0 -1
- package/dist/Button/index.js +0 -2
- package/dist/Button/index.js.map +0 -1
- package/dist/Icon/Icon.js +0 -38
- package/dist/Icon/Icon.js.map +0 -1
- package/dist/Icon/Icon.stories.js +0 -35
- package/dist/Icon/Icon.stories.js.map +0 -1
- package/dist/Icon/Icon.test.js +0 -55
- package/dist/Icon/Icon.test.js.map +0 -1
- package/dist/Icon/Icon.types.js +0 -16
- package/dist/Icon/Icon.types.js.map +0 -1
- package/dist/Icon/index.js +0 -2
- package/dist/Icon/index.js.map +0 -1
- package/dist/TextField/TextField.js +0 -45
- package/dist/TextField/TextField.js.map +0 -1
- package/dist/TextField/TextField.stories.js +0 -25
- package/dist/TextField/TextField.stories.js.map +0 -1
- package/dist/TextField/TextField.test.js +0 -35
- package/dist/TextField/TextField.test.js.map +0 -1
- package/dist/TextField/TextField.types.js +0 -2
- package/dist/TextField/TextField.types.js.map +0 -1
- package/dist/TextField/index.js +0 -2
- package/dist/TextField/index.js.map +0 -1
- package/dist/Tooltip/Tooltip.js +0 -30
- package/dist/Tooltip/Tooltip.js.map +0 -1
- package/dist/Tooltip/Tooltip.stories.js +0 -32
- package/dist/Tooltip/Tooltip.stories.js.map +0 -1
- package/dist/Tooltip/Tooltip.types.js +0 -3
- package/dist/Tooltip/Tooltip.types.js.map +0 -1
- package/dist/Tooltip/index.js +0 -2
- package/dist/Tooltip/index.js.map +0 -1
- package/dist/utils/browserId.js +0 -29
- package/dist/utils/browserId.js.map +0 -1
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/utils/browserId.ts","../src/Tooltip/Tooltip.types.ts","../src/Tooltip/Tooltip.tsx","../src/Icon/Icon.tsx","../src/Button/Button.tsx","../src/TextField/TextField.tsx"],"sourcesContent":["/**\n * @exports the browser id (i.e., 'IE 11' 'Chrome 90')\n * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript\n */\nexport const browserId: string = (function () {\n let tem;\n const ua = navigator.userAgent;\n let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i) || [];\n if (/trident/i.test(M[1])) {\n tem = /\\brv[ :]+(\\d+)/g.exec(ua) || [];\n return `IE ${tem[1] || ''}`;\n }\n\n if (M[1] === 'Chrome') {\n tem = ua.match(/\\b(OPR|Edge?)\\/(\\d+)/);\n if (tem !== null) {\n return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');\n }\n }\n\n M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];\n if ((tem = ua.match(/version\\/(\\d+)/i)) !== null) {\n M.splice(1, 1, tem[1]);\n }\n\n return M.join(' ');\n})();\nexport const browserName = browserId && browserId.split(' ', 2)[0];\nexport const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);\nexport const browserIsFirefox = browserId && browserName === 'Firefox';\nexport const browserIsEdgeBeforeChromium =\n browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;\n","export const DEFAULT_TOOL_TIP_DELAY = 1000;\nexport const tooltipPositions = ['top', 'left', 'right', 'bottom'] as const;\n\nexport type TooltipPosition = typeof tooltipPositions[number];\n\nexport interface TooltipProps {\n position?: TooltipPosition;\n children?: JSX.Element | string;\n text: JSX.Element | string;\n delay?: number;\n}\n","import React from 'react';\nimport '../styles.css';\nimport { DEFAULT_TOOL_TIP_DELAY, TooltipProps } from './Tooltip.types';\n\n/**\n * This component displays a Tooltip for the provided children.\n */\nexport const Tooltip: React.FunctionComponent<TooltipProps> = ({\n position = 'bottom',\n children,\n text,\n delay = DEFAULT_TOOL_TIP_DELAY,\n}) => {\n const arrowBaseClasses = \"before:tw-content-[''] before:tw-absolute before:tw-border-8\";\n const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';\n const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';\n const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent \n before:tw-border-l-transparent before:tw-border-r-black`;\n\n const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent\n before:tw-border-l-black before:tw-border-r-transparent`;\n\n const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black \n before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;\n const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent \n before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;\n\n const placements = {\n top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,\n left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,\n right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,\n bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,\n };\n\n return (\n <div className=\"tw-group tw-relative tw-inline-block\">\n {children}\n <div\n className={`tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] \n tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}`}>\n {text}\n </div>\n </div>\n );\n};\n","import React from 'react';\nimport '../styles.css';\nimport { IconProps } from './Icon.types';\nimport Tooltip from '../Tooltip';\n\n/**\n * Icon:\n * - access to Seeq custom icons by providing the desired icon\n * - leverage \"type\" to style your icon\n */\nconst Icon: React.FunctionComponent<IconProps> = ({\n onClick,\n icon,\n type = 'theme',\n extraClassNames,\n id,\n large,\n small,\n color,\n testId,\n customId,\n tooltip,\n tooltipDelay,\n tooltipPlacement,\n number,\n hasExternalTooltipHandler = false,\n}) => {\n if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {\n const errorMessage =\n color === undefined || color === ''\n ? 'Icon with type=\"color\" must have prop color specified.'\n : 'Icon with prop color must have type=\"color\".';\n return <div className=\"tw-text-sq-danger-color\">{errorMessage}</div>;\n }\n\n const colorClasses = {\n 'theme': 'tw-text-sq-color-dark',\n 'white': 'tw-text-white',\n 'dark-gray': 'tw-text-sq-fairly-dark-gray',\n 'warning': 'tw-text-sq-warning-color',\n 'darkish-gray': 'tw-text-sq-darkish-gray',\n 'gray': 'tw-text-sq-disabled-gray',\n 'color': '',\n 'info': 'tw-text-sq-link',\n 'text': 'tw-text-sq-text-color',\n 'inherit': '',\n 'danger': 'tw-text-sq-danger-color',\n 'theme-light': 'tw-text-sq-color-light',\n 'success': 'tw-text-sq-success-color',\n };\n\n const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';\n const style = type === 'color' && color ? { color } : {};\n const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} ${\n colorClasses[type]\n } ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;\n\n const iconTag = (\n <i\n className={appliedClassNames}\n style={style}\n onClick={onClick}\n data-testid={testId}\n data-customid={customId}\n id={id}\n data-number={number}\n />\n );\n\n return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (\n <Tooltip text={tooltip} delay={tooltipDelay} position={tooltipPlacement}>\n {iconTag}\n </Tooltip>\n ) : (\n iconTag\n );\n};\nexport default Icon;\n","import React from 'react';\nimport { ButtonProps } from './Button.types';\nimport '../styles.css';\nimport { browserIsFirefox } from '../utils/browserId';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\n/**\n * All-in-one Button:\n * - use \"variant\" to achieve the desired style\n * - include tooltips and/or icons\n */\nconst Button: React.FunctionComponent<ButtonProps> = ({\n onClick,\n label,\n variant = 'outline',\n type = 'button',\n size = 'sm',\n disabled,\n extraClassNames,\n id,\n testId,\n stopPropagation = true,\n tooltip,\n tooltipOptions,\n iconStyle = 'text',\n icon,\n iconColor,\n}) => {\n const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';\n const textClassesByVariant = {\n 'outline': 'tw-text-sq-text-color',\n 'theme': 'tw-text-white',\n 'theme-light': 'tw-text-white',\n 'danger': 'tw-text-white',\n 'no-border': 'tw-text-sq-text-color',\n 'warning': 'tw-text-white',\n };\n const classesByVariant = {\n 'outline':\n 'tw-border-sq-disabled-gray tw-border-solid tw-border hover:tw-bg-sq-light-gray' +\n ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',\n 'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight disabled:tw-bg-opacity-50',\n 'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',\n 'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link disabled:tw-bg-opacity-50',\n 'no-border': '',\n 'warning': 'tw-bg-sq-warning-color',\n };\n const sizeClasses = {\n sm: 'tw-text-sm',\n lg: 'tw-text-xl',\n };\n const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${classesByVariant[variant]} ${textClassesByVariant[variant]} ${extraClassNames}`;\n\n const button = (\n <button\n id={id}\n disabled={disabled}\n data-testid={testId}\n type={type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type}\n onClick={(e) => {\n stopPropagation && e.stopPropagation();\n onClick && onClick();\n }}\n className={appliedClasses}>\n {icon && (\n <Icon\n icon={icon}\n type={iconStyle}\n color={iconColor}\n extraClassNames={label ? `tw-mr-1 ${textClassesByVariant[variant]}` : ''}\n testId={`${id}_spinner`}\n />\n )}\n {label}\n </button>\n );\n\n return tooltip ? (\n <Tooltip text={tooltip} {...tooltipOptions}>\n {button}\n </Tooltip>\n ) : (\n button\n );\n};\nexport default Button;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { TextFieldProps } from './TextField.types';\nimport '../styles.css';\n\n/**\n * Textfield.\n */\nexport const TextField: React.FunctionComponent<TextFieldProps> = React.forwardRef<HTMLInputElement, TextFieldProps>(\n (props, ref: any) => {\n const {\n readonly = false,\n onChange,\n onKeyUp,\n id,\n name,\n size = 'sm',\n value,\n placeholder,\n extraClassNames,\n testId,\n type = 'text',\n } = props;\n\n const internalRef = useRef<HTMLInputElement | null>(null);\n const [cursor, setCursor] = useState(null);\n\n const setAllRefs = (receivedRef: any) => {\n if (ref) ref.current = receivedRef;\n internalRef.current = receivedRef;\n };\n\n useEffect(() => {\n const input = internalRef.current! as unknown as HTMLInputElement;\n if (input) input.setSelectionRange(cursor, cursor);\n }, [ref, cursor, value]);\n\n const handleChange = (e: any) => {\n setCursor(e.target.selectionStart);\n onChange && onChange(e);\n };\n\n useEffect(() => {\n /**\n * we need to change the value only if it's different since the internal state of \"input\" will change it anyway\n * this will only be the case when the value has been changed externally via store (undo / redo)\n */\n if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {\n // we need to use this method because using the value props directly will switch the input to a \"controlled\"\n // component\n internalRef.current.value = `${value}`;\n }\n }, [value]);\n\n const baseClasses =\n 'tw-height-34 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm disabled:tw-pointer-events-none' +\n ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-sq-disabled-gray tw-border-solid tw-border' +\n ' tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';\n\n const sizeClasses = {\n sm: 'tw-text-sm',\n lg: 'tw-text-xl',\n };\n\n const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames}`;\n\n return (\n <input\n ref={setAllRefs}\n data-testid={testId}\n name={name}\n id={id}\n type={type}\n value={value}\n className={appliedClasses}\n placeholder={placeholder}\n disabled={readonly}\n autoComplete=\"none\"\n onChange={handleChange}\n onKeyUp={onKeyUp}\n />\n );\n },\n);\n"],"names":["useRef","useState","useEffect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/utils/browserId.ts","../src/Tooltip/Tooltip.types.ts","../src/Tooltip/Tooltip.tsx","../src/Icon/Icon.tsx","../src/Button/Button.tsx","../src/TextField/TextField.tsx","../src/Checkbox/Checkbox.tsx","../src/TextArea/TextArea.tsx"],"sourcesContent":["/**\n * @exports the browser id (i.e., 'IE 11' 'Chrome 90')\n * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript\n */\nexport const browserId: string = (function () {\n let tem;\n const ua = navigator.userAgent;\n let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i) || [];\n if (/trident/i.test(M[1])) {\n tem = /\\brv[ :]+(\\d+)/g.exec(ua) || [];\n return `IE ${tem[1] || ''}`;\n }\n\n if (M[1] === 'Chrome') {\n tem = ua.match(/\\b(OPR|Edge?)\\/(\\d+)/);\n if (tem !== null) {\n return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');\n }\n }\n\n M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];\n if ((tem = ua.match(/version\\/(\\d+)/i)) !== null) {\n M.splice(1, 1, tem[1]);\n }\n\n return M.join(' ');\n})();\nexport const browserName = browserId && browserId.split(' ', 2)[0];\nexport const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);\nexport const browserIsFirefox = browserId && browserName === 'Firefox';\nexport const browserIsEdgeBeforeChromium =\n browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;\n","export const DEFAULT_TOOL_TIP_DELAY = 1000;\nexport const tooltipPositions = ['top', 'left', 'right', 'bottom'] as const;\n\nexport type TooltipPosition = typeof tooltipPositions[number];\n\nexport interface TooltipProps {\n position?: TooltipPosition;\n children?: JSX.Element | string;\n text: JSX.Element | string;\n delay?: number;\n}\n","import React from 'react';\nimport '../styles.css';\nimport { DEFAULT_TOOL_TIP_DELAY, TooltipProps } from './Tooltip.types';\n\n/**\n * This component displays a Tooltip for the provided children.\n */\nexport const Tooltip: React.FunctionComponent<TooltipProps> = ({\n position = 'bottom',\n children,\n text,\n delay = DEFAULT_TOOL_TIP_DELAY,\n}) => {\n const arrowBaseClasses = \"before:tw-content-[''] before:tw-absolute before:tw-border-8\";\n const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';\n const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';\n const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent \n before:tw-border-l-transparent before:tw-border-r-black`;\n\n const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent\n before:tw-border-l-black before:tw-border-r-transparent`;\n\n const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black \n before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;\n const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent \n before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;\n\n const placements = {\n top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,\n left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,\n right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,\n bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,\n };\n\n return (\n <div className=\"tw-group tw-relative tw-inline-block\">\n {children}\n <div\n className={`tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] \n tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}`}>\n {text}\n </div>\n </div>\n );\n};\n","import React from 'react';\nimport '../styles.css';\nimport { IconProps } from './Icon.types';\nimport Tooltip from '../Tooltip';\n\n/**\n * Icon:\n * - access to Seeq custom icons by providing the desired icon\n * - leverage \"type\" to style your icon\n */\nconst Icon: React.FunctionComponent<IconProps> = ({\n onClick,\n icon,\n type = 'theme',\n extraClassNames,\n id,\n large,\n small,\n color,\n testId,\n customId,\n tooltip,\n tooltipDelay,\n tooltipPlacement,\n number,\n hasExternalTooltipHandler = false,\n}) => {\n if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {\n const errorMessage =\n color === undefined || color === ''\n ? 'Icon with type=\"color\" must have prop color specified.'\n : 'Icon with prop color must have type=\"color\".';\n return <div className=\"tw-text-sq-danger-color\">{errorMessage}</div>;\n }\n\n const colorClassesThemeLight = {\n 'theme': 'tw-text-sq-color-dark',\n 'white': 'tw-text-white',\n 'dark-gray': 'tw-text-sq-fairly-dark-gray',\n 'warning': 'tw-text-sq-warning-color',\n 'darkish-gray': 'tw-text-sq-darkish-gray',\n 'gray': 'tw-text-sq-disabled-gray',\n 'color': '',\n 'info': 'tw-text-sq-link',\n 'text': 'tw-text-sq-text-color',\n 'inherit': '',\n 'danger': 'tw-text-sq-danger-color',\n 'theme-light': 'tw-text-sq-color-light',\n 'success': 'tw-text-sq-success-color',\n };\n\n const colorClassesThemeDark = {\n 'theme': 'dark:tw-text-sq-color-dark-dark',\n 'white': '',\n 'dark-gray': 'tw-text-sq-fairly-dark-gray',\n 'warning': '',\n 'darkish-gray': 'tw-text-sq-darkish-gray',\n 'gray': 'dark:tw-text-sq-dark-disabled-gray',\n 'color': '',\n 'info': 'dark:tw-text-sq-link-dark',\n 'text': 'dark:tw-text-sq-dark-text',\n 'inherit': '',\n 'danger': 'tw-text-sq-danger-color',\n 'theme-light': 'tw-text-sq-color-light',\n 'success': 'tw-text-sq-success-color',\n };\n\n const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';\n const style = type === 'color' && color ? { color } : {};\n const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} \n ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;\n\n const iconTag = (\n <i\n className={appliedClassNames}\n style={style}\n onClick={onClick}\n data-testid={testId}\n data-customid={customId}\n id={id}\n data-number={number}\n />\n );\n\n return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (\n <Tooltip text={tooltip} delay={tooltipDelay} position={tooltipPlacement}>\n {iconTag}\n </Tooltip>\n ) : (\n iconTag\n );\n};\nexport default Icon;\n","import React from 'react';\nimport { ButtonProps } from './Button.types';\nimport '../styles.css';\nimport { browserIsFirefox } from '../utils/browserId';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\n/**\n * All-in-one Button:\n * - use \"variant\" to achieve the desired style\n * - include tooltips and/or icons\n */\nconst Button: React.FunctionComponent<ButtonProps> = ({\n onClick,\n label,\n variant = 'outline',\n type = 'button',\n size = 'sm',\n disabled,\n extraClassNames,\n id,\n testId,\n stopPropagation = true,\n tooltip,\n tooltipOptions,\n iconStyle = 'text',\n icon,\n iconColor,\n}) => {\n const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';\n const baseClassesByVariant = {\n 'outline':\n 'tw-border-solid tw-border',\n 'theme': 'disabled:tw-bg-opacity-50',\n 'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',\n 'theme-light': 'disabled:tw-bg-opacity-50',\n 'no-border': '',\n 'warning': 'tw-bg-sq-warning-color',\n };\n const textClassesByVariantLightTheme = {\n 'outline': 'tw-text-sq-text-color',\n 'theme': 'tw-text-white',\n 'theme-light': 'tw-text-white',\n 'danger': 'tw-text-white',\n 'no-border': 'tw-text-sq-text-color',\n 'warning': 'tw-text-white',\n };\n const textClassesByVariantDarkTheme = {\n 'outline': 'dark:tw-text-sq-dark-text',\n 'theme': 'dark:tw-text-white',\n 'theme-light': 'dark:tw-text-white',\n 'danger': 'dark:tw-text-white',\n 'no-border': 'dark:tw-text-sq-dark-text',\n 'warning': 'dark:tw-text-white',\n };\n\n const classesByVariantLightTheme = {\n 'outline':\n 'tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +\n ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',\n 'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight',\n 'danger': '',\n 'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link',\n 'no-border': '',\n 'warning': 'tw-bg-sq-warning-color',\n };\n\n const classesByVariantDarkTheme = {\n 'outline':\n 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +\n ' dark:focus:tw-bg-sq-dark-gray dark:active:tw-bg-sq-dark-gray dark:focus:tw-border-sq-color-dark' +\n ' dark:active:tw-border-sq-color-dark',\n 'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight',\n 'danger': '',\n 'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark',\n 'no-border': '',\n 'warning': '',\n };\n const sizeClasses = {\n sm: 'tw-text-sm',\n lg: 'tw-text-xl',\n };\n const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;\n\n const button = (\n <button\n id={id}\n disabled={disabled}\n data-testid={testId}\n type={type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type}\n onClick={(e) => {\n stopPropagation && e.stopPropagation();\n onClick && onClick();\n }}\n className={appliedClasses}>\n {icon && (\n <Icon\n icon={icon}\n type={iconStyle}\n color={iconColor}\n extraClassNames={label ?\n `tw-mr-1 ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : ''}\n testId={`${id}_spinner`}\n />\n )}\n {label}\n </button>\n );\n\n return tooltip ? (\n <Tooltip text={tooltip} {...tooltipOptions}>\n {button}\n </Tooltip>\n ) : (\n button\n );\n};\nexport default Button;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { TextFieldProps } from './TextField.types';\nimport '../styles.css';\n\n/**\n * Textfield.\n */\nexport const TextField: React.FunctionComponent<TextFieldProps> = React.forwardRef<HTMLInputElement, TextFieldProps>(\n (props, ref: any) => {\n const {\n readonly = false,\n onChange,\n onKeyUp,\n id,\n name,\n size = 'sm',\n value,\n placeholder,\n extraClassNames,\n testId,\n type = 'text',\n } = props;\n\n const internalRef = useRef<HTMLInputElement | null>(null);\n const [cursor, setCursor] = useState(null);\n\n const setAllRefs = (receivedRef: any) => {\n if (ref) ref.current = receivedRef;\n internalRef.current = receivedRef;\n };\n\n useEffect(() => {\n const input = internalRef.current! as unknown as HTMLInputElement;\n if (input) input.setSelectionRange(cursor, cursor);\n }, [ref, cursor, value]);\n\n const handleChange = (e: any) => {\n setCursor(e.target.selectionStart);\n onChange && onChange(e);\n };\n\n useEffect(() => {\n /**\n * we need to change the value only if it's different since the internal state of \"input\" will change it anyway\n * this will only be the case when the value has been changed externally via store (undo / redo)\n */\n if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {\n // we need to use this method because using the value props directly will switch the input to a \"controlled\"\n // component\n internalRef.current.value = `${value}`;\n }\n }, [value]);\n\n const baseClasses =\n 'tw-height-34 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm disabled:tw-pointer-events-none' +\n ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';\n\n const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +\n ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';\n const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';\n\n const sizeClasses = {\n sm: 'tw-text-sm',\n lg: 'tw-text-xl',\n };\n\n const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme}`;\n\n return (\n <input\n ref={setAllRefs}\n data-testid={testId}\n name={name}\n id={id}\n type={type}\n value={value}\n className={appliedClasses}\n placeholder={placeholder}\n disabled={readonly}\n autoComplete=\"none\"\n onChange={handleChange}\n onKeyUp={onKeyUp}\n />\n );\n },\n);\n","import React from 'react';\nimport { CheckboxProps } from './Checkbox.types';\nimport '../styles.css';\n\nconst alignment = 'tw-flex tw-items-center';\nconst labelClasses = 'tw-ml-1.5 tw-text-sm';\n\nconst baseClasses =\n 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +\n ' dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:checked:tw-bg-sq-dark-text' +\n ' checked:tw-text-sq-text-color' +\n ' disabled:tw-text-sq-fairly-dark-gray';\n\nconst checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;\n\nconst radioClasses = `tw-form-radio ${baseClasses}`;\n\n/**\n * Checkbox and Radio Box Component.\n */\nexport const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {\n const {\n type = 'checkbox',\n value,\n disabled = false,\n label,\n onChange,\n onClick,\n onKeyDown,\n checked,\n id,\n name,\n extraClassNames,\n extraLabelClassNames,\n testId,\n } = props;\n\n const assignedId = id ?? 'checkbox_' + Math.random();\n\n return (\n <span className={`${alignment} ${extraClassNames}`}>\n <input\n value={value}\n type={type}\n data-testid={testId}\n name={name}\n id={assignedId}\n checked={checked}\n className={`${type === 'checkbox' ? checkboxClasses : radioClasses} ${\n disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'\n }`}\n disabled={disabled}\n onClick={onClick}\n onChange={onChange}\n onKeyDown={onKeyDown}\n />\n <label\n htmlFor={assignedId}\n className={`${labelClasses} ${extraLabelClassNames} ${\n disabled\n ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'\n : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'\n }`}>\n {label}\n </label>\n </span>\n );\n};\n","import React from 'react';\nimport { TextAreaProps } from './TextArea.types';\nimport '../styles.css';\n\nconst baseClasses =\n 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +\n ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';\n\nconst darkTheme =\n 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +\n ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';\nconst lightTheme =\n 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';\n\n/**\n * TextArea.\n */\nexport const TextArea: React.FunctionComponent<TextAreaProps> = ({\n readonly = false,\n onChange,\n onKeyUp,\n id,\n name,\n rows = 3,\n cols = undefined,\n value,\n placeholder,\n extraClassNames,\n testId,\n autofocus = false,\n}) => {\n const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme}`;\n\n return (\n <textarea\n data-testid={testId}\n name={name}\n id={id}\n value={value}\n className={appliedClasses}\n placeholder={placeholder}\n disabled={readonly}\n onChange={onChange}\n onKeyUp={onKeyUp}\n rows={rows}\n cols={cols}\n autoFocus={autofocus}\n />\n );\n};\n"],"names":["useRef","useState","useEffect","baseClasses"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
declare type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
package/dist/styles.css
CHANGED
|
@@ -1457,6 +1457,7 @@ video {
|
|
|
1457
1457
|
|
|
1458
1458
|
:root {
|
|
1459
1459
|
--sq-color-dark: 42, 92, 132;
|
|
1460
|
+
--sq-color-dark-dark: 145, 180, 203;
|
|
1460
1461
|
--sq-white: 255, 255, 255;
|
|
1461
1462
|
--sq-color-highlight: 4, 145, 194;
|
|
1462
1463
|
--sq-text-color: 58, 58, 58;
|
|
@@ -1470,26 +1471,37 @@ video {
|
|
|
1470
1471
|
--sq-success-color: 114, 192, 44;
|
|
1471
1472
|
--sq-icon: 4, 145, 194;
|
|
1472
1473
|
--sq-link: 42, 92, 132;
|
|
1474
|
+
--sq-dark-background: 36, 37, 37;
|
|
1475
|
+
--sq-dark-text: 194, 188, 176;
|
|
1476
|
+
--sq-dark-disabled-gray: 70, 73, 73;
|
|
1477
|
+
--sq-highlight-color-dark: 36, 45, 49;
|
|
1473
1478
|
}
|
|
1474
1479
|
|
|
1475
1480
|
.color_topic {
|
|
1476
1481
|
--sq-color-dark: 42, 92, 132;
|
|
1482
|
+
--sq-color-dark-dark: 145, 180, 203;
|
|
1477
1483
|
--sq-color-light: 237, 247, 246;
|
|
1478
1484
|
--sq-color-highlight: 4, 145, 194;
|
|
1479
1485
|
--sq-icon: 4, 145, 194;
|
|
1480
1486
|
--sq-link: 42, 92, 132;
|
|
1487
|
+
--sq-link-dark: 145, 180, 203;
|
|
1488
|
+
--sq-icon-dark: 4, 145, 194;
|
|
1481
1489
|
}
|
|
1482
1490
|
|
|
1483
1491
|
.color_analysis {
|
|
1484
1492
|
--sq-color-dark: 0, 121, 96;
|
|
1493
|
+
--sq-color-dark-dark: 31, 207, 166;
|
|
1485
1494
|
--sq-color-light: 237, 247, 246;
|
|
1486
1495
|
--sq-color-highlight: 0, 153, 100;
|
|
1487
1496
|
--sq-icon: 0, 160, 89;
|
|
1488
1497
|
--sq-link: 0, 121, 96;
|
|
1498
|
+
--sq-link-dark: 21, 99, 81;
|
|
1499
|
+
--sq-icon-dark: 23, 126, 77;
|
|
1489
1500
|
}
|
|
1490
1501
|
|
|
1491
1502
|
.color_datalab {
|
|
1492
1503
|
--sq-color-dark: 242, 103, 34;
|
|
1504
|
+
--sq-color-dark-dark: 242, 103, 34;
|
|
1493
1505
|
--sq-color-light: 237, 247, 246;
|
|
1494
1506
|
--sq-color-highlight: 244, 123, 62;
|
|
1495
1507
|
--sq-icon: 242, 103, 34;
|
|
@@ -1590,6 +1602,84 @@ video {
|
|
|
1590
1602
|
--tw-backdrop-sepia: ;
|
|
1591
1603
|
}
|
|
1592
1604
|
|
|
1605
|
+
.tw-form-checkbox,.tw-form-radio {
|
|
1606
|
+
-webkit-appearance: none;
|
|
1607
|
+
-moz-appearance: none;
|
|
1608
|
+
appearance: none;
|
|
1609
|
+
padding: 0;
|
|
1610
|
+
-webkit-print-color-adjust: exact;
|
|
1611
|
+
print-color-adjust: exact;
|
|
1612
|
+
display: inline-block;
|
|
1613
|
+
vertical-align: middle;
|
|
1614
|
+
background-origin: border-box;
|
|
1615
|
+
-webkit-user-select: none;
|
|
1616
|
+
-moz-user-select: none;
|
|
1617
|
+
user-select: none;
|
|
1618
|
+
flex-shrink: 0;
|
|
1619
|
+
height: 1rem;
|
|
1620
|
+
width: 1rem;
|
|
1621
|
+
color: #2563eb;
|
|
1622
|
+
background-color: #fff;
|
|
1623
|
+
border-color: #6b7280;
|
|
1624
|
+
border-width: 1px;
|
|
1625
|
+
--tw-shadow: 0 0 #0000;
|
|
1626
|
+
}
|
|
1627
|
+
|
|
1628
|
+
.tw-form-checkbox {
|
|
1629
|
+
border-radius: 0px;
|
|
1630
|
+
}
|
|
1631
|
+
|
|
1632
|
+
.tw-form-radio {
|
|
1633
|
+
border-radius: 100%;
|
|
1634
|
+
}
|
|
1635
|
+
|
|
1636
|
+
.tw-form-checkbox:focus,.tw-form-radio:focus {
|
|
1637
|
+
outline: 2px solid transparent;
|
|
1638
|
+
outline-offset: 2px;
|
|
1639
|
+
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
|
|
1640
|
+
--tw-ring-offset-width: 2px;
|
|
1641
|
+
--tw-ring-offset-color: #fff;
|
|
1642
|
+
--tw-ring-color: #2563eb;
|
|
1643
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1644
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1645
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1646
|
+
}
|
|
1647
|
+
|
|
1648
|
+
.tw-form-checkbox:checked,.tw-form-radio:checked {
|
|
1649
|
+
border-color: transparent;
|
|
1650
|
+
background-color: currentColor;
|
|
1651
|
+
background-size: 100% 100%;
|
|
1652
|
+
background-position: center;
|
|
1653
|
+
background-repeat: no-repeat;
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
.tw-form-checkbox:checked {
|
|
1657
|
+
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
|
1658
|
+
}
|
|
1659
|
+
|
|
1660
|
+
.tw-form-radio:checked {
|
|
1661
|
+
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
|
1662
|
+
}
|
|
1663
|
+
|
|
1664
|
+
.tw-form-checkbox:checked:hover,.tw-form-checkbox:checked:focus,.tw-form-radio:checked:hover,.tw-form-radio:checked:focus {
|
|
1665
|
+
border-color: transparent;
|
|
1666
|
+
background-color: currentColor;
|
|
1667
|
+
}
|
|
1668
|
+
|
|
1669
|
+
.tw-form-checkbox:indeterminate {
|
|
1670
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
|
|
1671
|
+
border-color: transparent;
|
|
1672
|
+
background-color: currentColor;
|
|
1673
|
+
background-size: 100% 100%;
|
|
1674
|
+
background-position: center;
|
|
1675
|
+
background-repeat: no-repeat;
|
|
1676
|
+
}
|
|
1677
|
+
|
|
1678
|
+
.tw-form-checkbox:indeterminate:hover,.tw-form-checkbox:indeterminate:focus {
|
|
1679
|
+
border-color: transparent;
|
|
1680
|
+
background-color: currentColor;
|
|
1681
|
+
}
|
|
1682
|
+
|
|
1593
1683
|
.tw-absolute {
|
|
1594
1684
|
position: absolute;
|
|
1595
1685
|
}
|
|
@@ -1626,6 +1716,14 @@ video {
|
|
|
1626
1716
|
z-index: 50;
|
|
1627
1717
|
}
|
|
1628
1718
|
|
|
1719
|
+
.tw-ml-1 {
|
|
1720
|
+
margin-left: 0.25rem;
|
|
1721
|
+
}
|
|
1722
|
+
|
|
1723
|
+
.tw-ml-1\.5 {
|
|
1724
|
+
margin-left: 0.375rem;
|
|
1725
|
+
}
|
|
1726
|
+
|
|
1629
1727
|
.tw-mr-1 {
|
|
1630
1728
|
margin-right: 0.25rem;
|
|
1631
1729
|
}
|
|
@@ -1634,6 +1732,10 @@ video {
|
|
|
1634
1732
|
display: inline-block;
|
|
1635
1733
|
}
|
|
1636
1734
|
|
|
1735
|
+
.tw-flex {
|
|
1736
|
+
display: flex;
|
|
1737
|
+
}
|
|
1738
|
+
|
|
1637
1739
|
.tw-grid {
|
|
1638
1740
|
display: grid;
|
|
1639
1741
|
}
|
|
@@ -1642,6 +1744,22 @@ video {
|
|
|
1642
1744
|
display: none;
|
|
1643
1745
|
}
|
|
1644
1746
|
|
|
1747
|
+
.tw-h-3 {
|
|
1748
|
+
height: 0.75rem;
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
.tw-h-3\.5 {
|
|
1752
|
+
height: 0.875rem;
|
|
1753
|
+
}
|
|
1754
|
+
|
|
1755
|
+
.tw-w-3 {
|
|
1756
|
+
width: 0.75rem;
|
|
1757
|
+
}
|
|
1758
|
+
|
|
1759
|
+
.tw-w-3\.5 {
|
|
1760
|
+
width: 0.875rem;
|
|
1761
|
+
}
|
|
1762
|
+
|
|
1645
1763
|
.-tw-translate-x-1\/2 {
|
|
1646
1764
|
--tw-translate-x: -50%;
|
|
1647
1765
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1672,6 +1790,18 @@ video {
|
|
|
1672
1790
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1673
1791
|
}
|
|
1674
1792
|
|
|
1793
|
+
.tw-cursor-not-allowed {
|
|
1794
|
+
cursor: not-allowed;
|
|
1795
|
+
}
|
|
1796
|
+
|
|
1797
|
+
.tw-cursor-pointer {
|
|
1798
|
+
cursor: pointer;
|
|
1799
|
+
}
|
|
1800
|
+
|
|
1801
|
+
.tw-grid-cols-2 {
|
|
1802
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1803
|
+
}
|
|
1804
|
+
|
|
1675
1805
|
.tw-grid-cols-3 {
|
|
1676
1806
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1677
1807
|
}
|
|
@@ -1680,6 +1810,10 @@ video {
|
|
|
1680
1810
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
1681
1811
|
}
|
|
1682
1812
|
|
|
1813
|
+
.tw-items-center {
|
|
1814
|
+
align-items: center;
|
|
1815
|
+
}
|
|
1816
|
+
|
|
1683
1817
|
.tw-gap-4 {
|
|
1684
1818
|
gap: 1rem;
|
|
1685
1819
|
}
|
|
@@ -1724,6 +1858,11 @@ video {
|
|
|
1724
1858
|
background-color: rgba(var(--sq-danger-color), var(--tw-bg-opacity));
|
|
1725
1859
|
}
|
|
1726
1860
|
|
|
1861
|
+
.tw-bg-sq-dark-background {
|
|
1862
|
+
--tw-bg-opacity: 1;
|
|
1863
|
+
background-color: rgba(var(--sq-dark-background), var(--tw-bg-opacity));
|
|
1864
|
+
}
|
|
1865
|
+
|
|
1727
1866
|
.tw-bg-sq-icon {
|
|
1728
1867
|
--tw-bg-opacity: 1;
|
|
1729
1868
|
background-color: rgba(var(--sq-icon), var(--tw-bg-opacity));
|
|
@@ -1857,6 +1996,14 @@ video {
|
|
|
1857
1996
|
|
|
1858
1997
|
/* Make sure to keep these colors in sync with the webserver/_custom_variables.scss values to ensure cohesive UIs */
|
|
1859
1998
|
|
|
1999
|
+
[type='checkbox']:checked, [type='radio']:checked {
|
|
2000
|
+
background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
|
|
2001
|
+
}
|
|
2002
|
+
|
|
2003
|
+
.tw-dark [type='checkbox']:checked, .tw-dark [type='radio']:checked {
|
|
2004
|
+
background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
|
|
2005
|
+
}
|
|
2006
|
+
|
|
1860
2007
|
.before\:tw-absolute::before {
|
|
1861
2008
|
content: var(--tw-content);
|
|
1862
2009
|
position: absolute;
|
|
@@ -1964,6 +2111,11 @@ video {
|
|
|
1964
2111
|
content: var(--tw-content);
|
|
1965
2112
|
}
|
|
1966
2113
|
|
|
2114
|
+
.checked\:tw-text-sq-text-color:checked {
|
|
2115
|
+
--tw-text-opacity: 1;
|
|
2116
|
+
color: rgba(var(--sq-text-color), var(--tw-text-opacity));
|
|
2117
|
+
}
|
|
2118
|
+
|
|
1967
2119
|
.hover\:tw-bg-sq-color-highlight:hover {
|
|
1968
2120
|
--tw-bg-opacity: 1;
|
|
1969
2121
|
background-color: rgba(var(--sq-color-highlight), var(--tw-bg-opacity));
|
|
@@ -1994,6 +2146,11 @@ video {
|
|
|
1994
2146
|
background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
|
|
1995
2147
|
}
|
|
1996
2148
|
|
|
2149
|
+
.focus\:tw-outline-none:focus {
|
|
2150
|
+
outline: 2px solid transparent;
|
|
2151
|
+
outline-offset: 2px;
|
|
2152
|
+
}
|
|
2153
|
+
|
|
1997
2154
|
.focus\:tw-ring-0:focus {
|
|
1998
2155
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1999
2156
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
@@ -2001,6 +2158,10 @@ video {
|
|
|
2001
2158
|
--tw-ring-color: r;
|
|
2002
2159
|
}
|
|
2003
2160
|
|
|
2161
|
+
.focus\:tw-ring-offset-0:focus {
|
|
2162
|
+
--tw-ring-offset-width: 0px;
|
|
2163
|
+
}
|
|
2164
|
+
|
|
2004
2165
|
.active\:tw-border-sq-color-dark:active {
|
|
2005
2166
|
--tw-border-opacity: 1;
|
|
2006
2167
|
border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
|
|
@@ -2023,6 +2184,11 @@ video {
|
|
|
2023
2184
|
--tw-bg-opacity: 0.5;
|
|
2024
2185
|
}
|
|
2025
2186
|
|
|
2187
|
+
.disabled\:tw-text-sq-fairly-dark-gray:disabled {
|
|
2188
|
+
--tw-text-opacity: 1;
|
|
2189
|
+
color: rgba(var(--sq-fairly-dark-gray), var(--tw-text-opacity));
|
|
2190
|
+
}
|
|
2191
|
+
|
|
2026
2192
|
.tw-group:hover .group-hover\:tw-inline-block {
|
|
2027
2193
|
display: inline-block;
|
|
2028
2194
|
}
|
|
@@ -2031,3 +2197,108 @@ video {
|
|
|
2031
2197
|
opacity: 1;
|
|
2032
2198
|
}
|
|
2033
2199
|
|
|
2200
|
+
.tw-dark .dark\:tw-border-sq-dark-disabled-gray {
|
|
2201
|
+
--tw-border-opacity: 1;
|
|
2202
|
+
border-color: rgba(var(--sq-dark-disabled-gray), var(--tw-border-opacity));
|
|
2203
|
+
}
|
|
2204
|
+
|
|
2205
|
+
.tw-dark .dark\:tw-border-sq-dark-text {
|
|
2206
|
+
--tw-border-opacity: 1;
|
|
2207
|
+
border-color: rgba(var(--sq-dark-text), var(--tw-border-opacity));
|
|
2208
|
+
}
|
|
2209
|
+
|
|
2210
|
+
.tw-dark .dark\:tw-bg-sq-color-dark {
|
|
2211
|
+
--tw-bg-opacity: 1;
|
|
2212
|
+
background-color: rgba(var(--sq-color-dark), var(--tw-bg-opacity));
|
|
2213
|
+
}
|
|
2214
|
+
|
|
2215
|
+
.tw-dark .dark\:tw-bg-sq-dark-background {
|
|
2216
|
+
--tw-bg-opacity: 1;
|
|
2217
|
+
background-color: rgba(var(--sq-dark-background), var(--tw-bg-opacity));
|
|
2218
|
+
}
|
|
2219
|
+
|
|
2220
|
+
.tw-dark .dark\:tw-bg-sq-icon-dark {
|
|
2221
|
+
--tw-bg-opacity: 1;
|
|
2222
|
+
background-color: rgba(var(--sq-icon-dark), var(--tw-bg-opacity));
|
|
2223
|
+
}
|
|
2224
|
+
|
|
2225
|
+
.tw-dark .dark\:tw-text-sq-color-dark-dark {
|
|
2226
|
+
--tw-text-opacity: 1;
|
|
2227
|
+
color: rgba(var(--sq-color-dark-dark), var(--tw-text-opacity));
|
|
2228
|
+
}
|
|
2229
|
+
|
|
2230
|
+
.tw-dark .dark\:tw-text-sq-dark-disabled-gray {
|
|
2231
|
+
--tw-text-opacity: 1;
|
|
2232
|
+
color: rgba(var(--sq-dark-disabled-gray), var(--tw-text-opacity));
|
|
2233
|
+
}
|
|
2234
|
+
|
|
2235
|
+
.tw-dark .dark\:tw-text-sq-dark-text {
|
|
2236
|
+
--tw-text-opacity: 1;
|
|
2237
|
+
color: rgba(var(--sq-dark-text), var(--tw-text-opacity));
|
|
2238
|
+
}
|
|
2239
|
+
|
|
2240
|
+
.tw-dark .dark\:tw-text-sq-fairly-dark-gray {
|
|
2241
|
+
--tw-text-opacity: 1;
|
|
2242
|
+
color: rgba(var(--sq-fairly-dark-gray), var(--tw-text-opacity));
|
|
2243
|
+
}
|
|
2244
|
+
|
|
2245
|
+
.tw-dark .dark\:tw-text-sq-link-dark {
|
|
2246
|
+
--tw-text-opacity: 1;
|
|
2247
|
+
color: rgba(var(--sq-link-dark), var(--tw-text-opacity));
|
|
2248
|
+
}
|
|
2249
|
+
|
|
2250
|
+
.tw-dark .dark\:tw-text-white {
|
|
2251
|
+
--tw-text-opacity: 1;
|
|
2252
|
+
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
2253
|
+
}
|
|
2254
|
+
|
|
2255
|
+
.tw-dark .dark\:checked\:tw-bg-sq-dark-text:checked {
|
|
2256
|
+
--tw-bg-opacity: 1;
|
|
2257
|
+
background-color: rgba(var(--sq-dark-text), var(--tw-bg-opacity));
|
|
2258
|
+
}
|
|
2259
|
+
|
|
2260
|
+
.tw-dark .dark\:hover\:tw-bg-sq-color-highlight:hover {
|
|
2261
|
+
--tw-bg-opacity: 1;
|
|
2262
|
+
background-color: rgba(var(--sq-color-highlight), var(--tw-bg-opacity));
|
|
2263
|
+
}
|
|
2264
|
+
|
|
2265
|
+
.tw-dark .dark\:hover\:tw-bg-sq-highlight-color-dark:hover {
|
|
2266
|
+
--tw-bg-opacity: 1;
|
|
2267
|
+
background-color: rgba(var(--sq-highlight-color-dark), var(--tw-bg-opacity));
|
|
2268
|
+
}
|
|
2269
|
+
|
|
2270
|
+
.tw-dark .dark\:hover\:tw-bg-sq-link-dark:hover {
|
|
2271
|
+
--tw-bg-opacity: 1;
|
|
2272
|
+
background-color: rgba(var(--sq-link-dark), var(--tw-bg-opacity));
|
|
2273
|
+
}
|
|
2274
|
+
|
|
2275
|
+
.tw-dark .dark\:focus\:tw-border-sq-color-dark:focus {
|
|
2276
|
+
--tw-border-opacity: 1;
|
|
2277
|
+
border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
|
|
2278
|
+
}
|
|
2279
|
+
|
|
2280
|
+
.tw-dark .dark\:focus\:tw-border-sq-color-dark-dark:focus {
|
|
2281
|
+
--tw-border-opacity: 1;
|
|
2282
|
+
border-color: rgba(var(--sq-color-dark-dark), var(--tw-border-opacity));
|
|
2283
|
+
}
|
|
2284
|
+
|
|
2285
|
+
.tw-dark .dark\:focus\:tw-bg-sq-dark-gray:focus {
|
|
2286
|
+
--tw-bg-opacity: 1;
|
|
2287
|
+
background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
|
|
2288
|
+
}
|
|
2289
|
+
|
|
2290
|
+
.tw-dark .dark\:active\:tw-border-sq-color-dark:active {
|
|
2291
|
+
--tw-border-opacity: 1;
|
|
2292
|
+
border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
|
|
2293
|
+
}
|
|
2294
|
+
|
|
2295
|
+
.tw-dark .dark\:active\:tw-border-sq-color-dark-dark:active {
|
|
2296
|
+
--tw-border-opacity: 1;
|
|
2297
|
+
border-color: rgba(var(--sq-color-dark-dark), var(--tw-border-opacity));
|
|
2298
|
+
}
|
|
2299
|
+
|
|
2300
|
+
.tw-dark .dark\:active\:tw-bg-sq-dark-gray:active {
|
|
2301
|
+
--tw-bg-opacity: 1;
|
|
2302
|
+
background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
|
|
2303
|
+
}
|
|
2304
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seeqdev/qomponents",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.esm.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"@ladle/react": "2.9.0",
|
|
37
37
|
"@rollup/plugin-commonjs": "24.0.1",
|
|
38
38
|
"@rollup/plugin-node-resolve": "15.0.1",
|
|
39
|
+
"@tailwindcss/forms": "0.5.3",
|
|
39
40
|
"@testing-library/jest-dom": "5.16.5",
|
|
40
41
|
"@testing-library/react": "14.0.0",
|
|
41
42
|
"@testing-library/user-event": "14.4.3",
|
package/dist/Button/Button.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import '../styles.css';
|
|
3
|
-
import { browserIsFirefox } from '../utils/browserId';
|
|
4
|
-
import Tooltip from '../Tooltip';
|
|
5
|
-
import Icon from '../Icon';
|
|
6
|
-
/**
|
|
7
|
-
* All-in-one Button:
|
|
8
|
-
* - use "variant" to achieve the desired style
|
|
9
|
-
* - include tooltips and/or icons
|
|
10
|
-
*/
|
|
11
|
-
const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, }) => {
|
|
12
|
-
const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
|
|
13
|
-
const textClassesByVariant = {
|
|
14
|
-
'outline': 'tw-text-sq-text-color',
|
|
15
|
-
'theme': 'tw-text-white',
|
|
16
|
-
'theme-light': 'tw-text-white',
|
|
17
|
-
'danger': 'tw-text-white',
|
|
18
|
-
'no-border': 'tw-text-sq-text-color',
|
|
19
|
-
'warning': 'tw-text-white',
|
|
20
|
-
};
|
|
21
|
-
const classesByVariant = {
|
|
22
|
-
'outline': 'tw-border-sq-disabled-gray tw-border-solid tw-border hover:tw-bg-sq-light-gray' +
|
|
23
|
-
' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
|
|
24
|
-
'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight disabled:tw-bg-opacity-50',
|
|
25
|
-
'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',
|
|
26
|
-
'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link disabled:tw-bg-opacity-50',
|
|
27
|
-
'no-border': '',
|
|
28
|
-
'warning': 'tw-bg-sq-warning-color',
|
|
29
|
-
};
|
|
30
|
-
const sizeClasses = {
|
|
31
|
-
sm: 'tw-text-sm',
|
|
32
|
-
lg: 'tw-text-xl',
|
|
33
|
-
};
|
|
34
|
-
const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${classesByVariant[variant]} ${textClassesByVariant[variant]} ${extraClassNames}`;
|
|
35
|
-
const button = (React.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
|
|
36
|
-
stopPropagation && e.stopPropagation();
|
|
37
|
-
onClick && onClick();
|
|
38
|
-
}, className: appliedClasses },
|
|
39
|
-
icon && (React.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariant[variant]}` : '', testId: `${id}_spinner` })),
|
|
40
|
-
label));
|
|
41
|
-
return tooltip ? (React.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
|
|
42
|
-
};
|
|
43
|
-
export default Button;
|
|
44
|
-
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B;;;;GAIG;AACH,MAAM,MAAM,GAAyC,CAAC,EACpD,OAAO,EACP,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,eAAe,EACf,EAAE,EACF,MAAM,EACN,eAAe,GAAG,IAAI,EACtB,OAAO,EACP,cAAc,EACd,SAAS,GAAG,MAAM,EAClB,IAAI,EACJ,SAAS,GACV,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,iFAAiF,CAAC;IACtG,MAAM,oBAAoB,GAAG;QAC3B,SAAS,EAAE,uBAAuB;QAClC,OAAO,EAAE,eAAe;QACxB,aAAa,EAAE,eAAe;QAC9B,QAAQ,EAAE,eAAe;QACzB,WAAW,EAAE,uBAAuB;QACpC,SAAS,EAAE,eAAe;KAC3B,CAAC;IACF,MAAM,gBAAgB,GAAG;QACvB,SAAS,EACP,gFAAgF;YAChF,kHAAkH;QACpH,OAAO,EAAE,8EAA8E;QACvF,QAAQ,EAAE,mFAAmF;QAC7F,aAAa,EAAE,6DAA6D;QAC5E,WAAW,EAAE,EAAE;QACf,SAAS,EAAE,wBAAwB;KACpC,CAAC;IACF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;KACjB,CAAC;IACF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,gBAAgB,CAAC,OAAO,CAAC,IAAI,oBAAoB,CAAC,OAAO,CAAC,IAAI,eAAe,EAAE,CAAC;IAE9I,MAAM,MAAM,GAAG,CACb,gCACE,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,iBACL,MAAM,EACnB,IAAI,EAAE,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAClF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,eAAe,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;YACvC,OAAO,IAAI,OAAO,EAAE,CAAC;QACvB,CAAC,EACD,SAAS,EAAE,cAAc;QACxB,IAAI,IAAI,CACP,oBAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,EAChB,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,WAAW,oBAAoB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACxE,MAAM,EAAE,GAAG,EAAE,UAAU,GACvB,CACH;QACA,KAAK,CACC,CACV,CAAC;IAEF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,oBAAC,OAAO,IAAC,IAAI,EAAE,OAAO,KAAM,cAAc,IACvC,MAAM,CACC,CACX,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,MAAM,CAAC"}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Button from './Button';
|
|
3
|
-
import { buttonVariants } from './Button.types';
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Button',
|
|
6
|
-
};
|
|
7
|
-
export const AllButtonVariants = () => {
|
|
8
|
-
const renderAllVariations = () => (React.createElement(React.Fragment, null, buttonVariants.map((variant) => (React.createElement("div", { key: `{variant_${variant}`, className: "tw-p-4" },
|
|
9
|
-
React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant }))))));
|
|
10
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
11
|
-
React.createElement("div", { className: "color_topic" },
|
|
12
|
-
React.createElement("b", null, "Topic Colors"),
|
|
13
|
-
renderAllVariations()),
|
|
14
|
-
React.createElement("div", { className: "color_analysis" },
|
|
15
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
16
|
-
renderAllVariations()),
|
|
17
|
-
React.createElement("div", { className: "color_datalab" },
|
|
18
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
19
|
-
renderAllVariations())));
|
|
20
|
-
};
|
|
21
|
-
export const ButtonWithTooltip = () => {
|
|
22
|
-
const renderButtonWithTooltip = () => (React.createElement("div", { className: "tw-p-4" },
|
|
23
|
-
React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" })));
|
|
24
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
25
|
-
React.createElement("div", { className: "color_topic" },
|
|
26
|
-
React.createElement("b", null, "Topic Colors"),
|
|
27
|
-
renderButtonWithTooltip()),
|
|
28
|
-
React.createElement("div", { className: "color_analysis" },
|
|
29
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
30
|
-
renderButtonWithTooltip()),
|
|
31
|
-
React.createElement("div", { className: "color_datalab" },
|
|
32
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
33
|
-
renderButtonWithTooltip())));
|
|
34
|
-
};
|
|
35
|
-
export const ButtonWithIcon = () => {
|
|
36
|
-
const renderButtonWithIcon = () => (React.createElement("div", { className: "tw-p-4" },
|
|
37
|
-
React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" })));
|
|
38
|
-
return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
|
|
39
|
-
React.createElement("div", { className: "color_topic" },
|
|
40
|
-
React.createElement("b", null, "Topic Colors"),
|
|
41
|
-
renderButtonWithIcon()),
|
|
42
|
-
React.createElement("div", { className: "color_analysis" },
|
|
43
|
-
React.createElement("b", null, "Analysis Colors"),
|
|
44
|
-
renderButtonWithIcon()),
|
|
45
|
-
React.createElement("div", { className: "color_datalab" },
|
|
46
|
-
React.createElement("b", null, "Datalab Colors"),
|
|
47
|
-
renderButtonWithIcon())));
|
|
48
|
-
};
|
|
49
|
-
//# sourceMappingURL=Button.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC,0CACG,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC/B,6BAAK,GAAG,EAAE,YAAY,OAAO,EAAE,EAAE,SAAS,EAAC,QAAQ;QACjD,oBAAC,MAAM,IAAC,KAAK,EAAE,YAAY,OAAO,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,OAAO,EAAE,OAAO,GAAI,CACzE,CACP,CAAC,CACD,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CACpC,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,GAAG,CACjE,CACP,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,uBAAuB,EAAE,CACtB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,uBAAuB,EAAE,CACtB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,uBAAuB,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACjC,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,MAAM,IAAC,IAAI,EAAC,iBAAiB,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,GAAG,CAC/D,CACP,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,oBAAoB,EAAE,CACnB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,oBAAoB,EAAE,CACnB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,oBAAoB,EAAE,CACnB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|