@chayns-components/core 5.5.3 → 5.5.4
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.
|
@@ -46,7 +46,8 @@ const Checkbox = ({
|
|
|
46
46
|
}, [shouldShowCentered]);
|
|
47
47
|
const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
|
|
48
48
|
return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, {
|
|
49
|
-
ref: checkboxRootRef
|
|
49
|
+
ref: checkboxRootRef,
|
|
50
|
+
className: "beta-chayns-checkbox"
|
|
50
51
|
}, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
|
|
51
52
|
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
|
|
52
53
|
checked: isChecked,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_useKeyboardFocusHighlighting","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","useState","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","useRef","checkboxRootRef","handleChange","useCallback","event","target","checked","uuid","useUuid","useEffect","current","_checkboxBoxRef$curre","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","createElement","StyledCheckbox","ref","StyledCheckboxInput","$shouldShowKeyboardHighlighting","disabled","id","type","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","style","top","transform","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","StyledCheckboxLabel","className","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n KeyboardEvent,\n ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n StyledCheckbox,\n StyledCheckboxBox,\n StyledCheckboxBoxWrapper,\n StyledCheckboxInput,\n StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n /**\n * Background color for the checked state.\n */\n checkedBackgroundColor?: CSSProperties['backgroundColor'];\n /**\n * Background color for the unchecked state.\n */\n uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n /**\n * Border color for the checkbox or switch indicator.\n */\n borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n /**\n * Text for checkbox or switch\n */\n children?: ReactElement | string;\n /**\n * Indicates whether the checkbox or switch is selected\n */\n isChecked?: boolean;\n /**\n * Disables the checkbox or switch so it cannot be toggled\n */\n isDisabled?: boolean;\n /**\n * Classname for the label\n */\n labelClassName?: string;\n /**\n * Function to be executed if the checked value changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Whether the label should change the state of the checkbox\n */\n shouldChangeOnLabelClick?: boolean;\n /**\n * Changes the design to use switch instead of checkbox\n */\n shouldShowAsSwitch?: boolean;\n /**\n * Border radius for the checkbox or switch indicator.\n */\n borderRadius?: CSSProperties['borderRadius'];\n colors?: CheckboxColors;\n /**\n * Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n borderRadius,\n colors,\n shouldShowCentered = false,\n shouldChangeOnLabelClick = true,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n useEffect(() => {\n if (checkboxRootRef.current && !shouldShowCentered) {\n const singleLineHeight = getHeightOfSingleTextLine({\n container: checkboxRootRef.current,\n });\n\n const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n setCheckboxTop((singleLineHeight - boxHeight) / 2);\n }\n }, [shouldShowCentered]);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n return (\n <StyledCheckbox ref={checkboxRootRef}>\n <StyledCheckboxInput\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n\n <StyledCheckboxBoxWrapper\n $shouldShowAsSwitch={shouldShowAsSwitch}\n style={{\n top: shouldShowCentered ? '50%' : checkboxTop,\n transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n }}\n >\n <StyledCheckboxBox\n htmlFor={uuid}\n ref={checkboxBoxRef}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $checkedBackgroundColor={colors?.checkedBackgroundColor}\n $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n $borderRadius={borderRadius}\n $borderColor={colors?.borderColor}\n />\n </StyledCheckboxBoxWrapper>\n <StyledCheckboxLabel\n className={labelClassName}\n $isDisabled={isDisabled}\n $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_useKeyboardFocusHighlighting","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","useState","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","useRef","checkboxRootRef","handleChange","useCallback","event","target","checked","uuid","useUuid","useEffect","current","_checkboxBoxRef$curre","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","createElement","StyledCheckbox","ref","className","StyledCheckboxInput","$shouldShowKeyboardHighlighting","disabled","id","type","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","style","top","transform","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","StyledCheckboxLabel","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n KeyboardEvent,\n ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n StyledCheckbox,\n StyledCheckboxBox,\n StyledCheckboxBoxWrapper,\n StyledCheckboxInput,\n StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n /**\n * Background color for the checked state.\n */\n checkedBackgroundColor?: CSSProperties['backgroundColor'];\n /**\n * Background color for the unchecked state.\n */\n uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n /**\n * Border color for the checkbox or switch indicator.\n */\n borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n /**\n * Text for checkbox or switch\n */\n children?: ReactElement | string;\n /**\n * Indicates whether the checkbox or switch is selected\n */\n isChecked?: boolean;\n /**\n * Disables the checkbox or switch so it cannot be toggled\n */\n isDisabled?: boolean;\n /**\n * Classname for the label\n */\n labelClassName?: string;\n /**\n * Function to be executed if the checked value changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Whether the label should change the state of the checkbox\n */\n shouldChangeOnLabelClick?: boolean;\n /**\n * Changes the design to use switch instead of checkbox\n */\n shouldShowAsSwitch?: boolean;\n /**\n * Border radius for the checkbox or switch indicator.\n */\n borderRadius?: CSSProperties['borderRadius'];\n colors?: CheckboxColors;\n /**\n * Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n borderRadius,\n colors,\n shouldShowCentered = false,\n shouldChangeOnLabelClick = true,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n useEffect(() => {\n if (checkboxRootRef.current && !shouldShowCentered) {\n const singleLineHeight = getHeightOfSingleTextLine({\n container: checkboxRootRef.current,\n });\n\n const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n setCheckboxTop((singleLineHeight - boxHeight) / 2);\n }\n }, [shouldShowCentered]);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n return (\n <StyledCheckbox ref={checkboxRootRef} className=\"beta-chayns-checkbox\">\n <StyledCheckboxInput\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n\n <StyledCheckboxBoxWrapper\n $shouldShowAsSwitch={shouldShowAsSwitch}\n style={{\n top: shouldShowCentered ? '50%' : checkboxTop,\n transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n }}\n >\n <StyledCheckboxBox\n htmlFor={uuid}\n ref={checkboxBoxRef}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $checkedBackgroundColor={colors?.checkedBackgroundColor}\n $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n $borderRadius={borderRadius}\n $borderColor={colors?.borderColor}\n />\n </StyledCheckboxBoxWrapper>\n <StyledCheckboxLabel\n className={labelClassName}\n $isDisabled={isDisabled}\n $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -38,7 +38,8 @@ const Checkbox = ({
|
|
|
38
38
|
}, [shouldShowCentered]);
|
|
39
39
|
const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
|
|
40
40
|
return /*#__PURE__*/React.createElement(StyledCheckbox, {
|
|
41
|
-
ref: checkboxRootRef
|
|
41
|
+
ref: checkboxRootRef,
|
|
42
|
+
className: "beta-chayns-checkbox"
|
|
42
43
|
}, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
|
|
43
44
|
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
|
|
44
45
|
checked: isChecked,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useKeyboardFocusHighlighting","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","createElement","ref","$shouldShowKeyboardHighlighting","disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useKeyboardFocusHighlighting","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","createElement","ref","className","$shouldShowKeyboardHighlighting","disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n KeyboardEvent,\n ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n StyledCheckbox,\n StyledCheckboxBox,\n StyledCheckboxBoxWrapper,\n StyledCheckboxInput,\n StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n /**\n * Background color for the checked state.\n */\n checkedBackgroundColor?: CSSProperties['backgroundColor'];\n /**\n * Background color for the unchecked state.\n */\n uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n /**\n * Border color for the checkbox or switch indicator.\n */\n borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n /**\n * Text for checkbox or switch\n */\n children?: ReactElement | string;\n /**\n * Indicates whether the checkbox or switch is selected\n */\n isChecked?: boolean;\n /**\n * Disables the checkbox or switch so it cannot be toggled\n */\n isDisabled?: boolean;\n /**\n * Classname for the label\n */\n labelClassName?: string;\n /**\n * Function to be executed if the checked value changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Whether the label should change the state of the checkbox\n */\n shouldChangeOnLabelClick?: boolean;\n /**\n * Changes the design to use switch instead of checkbox\n */\n shouldShowAsSwitch?: boolean;\n /**\n * Border radius for the checkbox or switch indicator.\n */\n borderRadius?: CSSProperties['borderRadius'];\n colors?: CheckboxColors;\n /**\n * Whether the Checkbox should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n borderRadius,\n colors,\n shouldShowCentered = false,\n shouldChangeOnLabelClick = true,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n useEffect(() => {\n if (checkboxRootRef.current && !shouldShowCentered) {\n const singleLineHeight = getHeightOfSingleTextLine({\n container: checkboxRootRef.current,\n });\n\n const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n setCheckboxTop((singleLineHeight - boxHeight) / 2);\n }\n }, [shouldShowCentered]);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n return (\n <StyledCheckbox ref={checkboxRootRef} className=\"beta-chayns-checkbox\">\n <StyledCheckboxInput\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n\n <StyledCheckboxBoxWrapper\n $shouldShowAsSwitch={shouldShowAsSwitch}\n style={{\n top: shouldShowCentered ? '50%' : checkboxTop,\n transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n }}\n >\n <StyledCheckboxBox\n htmlFor={uuid}\n ref={checkboxBoxRef}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $checkedBackgroundColor={colors?.checkedBackgroundColor}\n $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n $borderRadius={borderRadius}\n $borderColor={colors?.borderColor}\n />\n </StyledCheckboxBoxWrapper>\n <StyledCheckboxLabel\n className={labelClassName}\n $isDisabled={isDisabled}\n $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"AAAA,OAAOA,KAAK,IAORC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SACIC,cAAc,EACdC,iBAAiB,EACjBC,wBAAwB,EACxBC,mBAAmB,EACnBC,mBAAmB,QAChB,mBAAmB;AA8D1B,MAAMC,QAA2B,GAAGA,CAAC;EACjCC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,kBAAkB;EAClBC,YAAY;EACZC,MAAM;EACNC,kBAAkB,GAAG,KAAK;EAC1BC,wBAAwB,GAAG,IAAI;EAC/BC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGtB,QAAQ,CAACW,SAAS,IAAI,KAAK,CAAC;EAC5D,MAAM,CAACY,WAAW,EAAEC,cAAc,CAAC,GAAGxB,QAAQ,CAAqByB,SAAS,CAAC;EAE7E,MAAMC,cAAc,GAAG3B,MAAM,CAAmB,IAAI,CAAC;EACrD,MAAM4B,eAAe,GAAG5B,MAAM,CAAiB,IAAI,CAAC;EAEpD,MAAM6B,YAAY,GAAG/B,WAAW,CAC3BgC,KAAoC,IAAK;IACtCP,WAAW,CAACO,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOjB,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACe,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACf,QAAQ,CACb,CAAC;EAED,MAAMkB,IAAI,GAAG9B,OAAO,CAAC,CAAC;EAEtBJ,SAAS,CAAC,MAAM;IACZ,IAAI6B,eAAe,CAACM,OAAO,IAAI,CAACf,kBAAkB,EAAE;MAChD,MAAMgB,gBAAgB,GAAG/B,yBAAyB,CAAC;QAC/CgC,SAAS,EAAER,eAAe,CAACM;MAC/B,CAAC,CAAC;MAEF,MAAMG,SAAS,GAAGV,cAAc,CAACO,OAAO,EAAEI,qBAAqB,CAAC,CAAC,CAACC,MAAM,IAAI,CAAC;MAE7Ed,cAAc,CAAC,CAACU,gBAAgB,GAAGE,SAAS,IAAI,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAAClB,kBAAkB,CAAC,CAAC;EAExB,MAAMqB,8BAA8B,GAAGtC,4BAA4B,CAC/DmB,gCAAgC,IAAI,CAACR,UACzC,CAAC;EAED,oBACIhB,KAAA,CAAA4C,aAAA,CAACpC,cAAc;IAACqC,GAAG,EAAEd,eAAgB;IAACe,SAAS,EAAC;EAAsB,gBAClE9C,KAAA,CAAA4C,aAAA,CAACjC,mBAAmB;IAChBoC,+BAA+B,EAAEJ,8BAA+B;IAChER,OAAO,EAAEpB,SAAU;IACnBiC,QAAQ,EAAEhC,UAAW;IACrBiC,EAAE,EAAEb,IAAK;IACTlB,QAAQ,EAAEc,YAAa;IACvBkB,IAAI,EAAC;EAAU,CAClB,CAAC,eAEFlD,KAAA,CAAA4C,aAAA,CAAClC,wBAAwB;IACrByC,mBAAmB,EAAEhC,kBAAmB;IACxCiC,KAAK,EAAE;MACHC,GAAG,EAAE/B,kBAAkB,GAAG,KAAK,GAAGK,WAAW;MAC7C2B,SAAS,EAAEhC,kBAAkB,GAAG,kBAAkB,GAAGO;IACzD;EAAE,gBAEF7B,KAAA,CAAA4C,aAAA,CAACnC,iBAAiB;IACd8C,OAAO,EAAEnB,IAAK;IACdS,GAAG,EAAEf,cAAe;IACpB0B,UAAU,EAAEzC,SAAS,IAAIU,QAAS;IAClCgC,WAAW,EAAEzC,UAAW;IACxBmC,mBAAmB,EAAEhC,kBAAmB;IACxCuC,uBAAuB,EAAErC,MAAM,EAAEsC,sBAAuB;IACxDC,yBAAyB,EAAEvC,MAAM,EAAEwC,wBAAyB;IAC5DC,aAAa,EAAE1C,YAAa;IAC5B2C,YAAY,EAAE1C,MAAM,EAAE2C;EAAY,CACrC,CACqB,CAAC,eAC3BhE,KAAA,CAAA4C,aAAA,CAAChC,mBAAmB;IAChBkC,SAAS,EAAE7B,cAAe;IAC1BwC,WAAW,EAAEzC,UAAW;IACxBiD,yBAAyB,EAAE1C,wBAAyB;IACpD4B,mBAAmB,EAAEhC,kBAAmB;IACxCoC,OAAO,EAAEhC,wBAAwB,GAAGa,IAAI,GAAGP;EAAU,GAEpDf,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDD,QAAQ,CAACqD,WAAW,GAAG,UAAU;AAEjC,eAAerD,QAAQ","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.4",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -88,5 +88,5 @@
|
|
|
88
88
|
"publishConfig": {
|
|
89
89
|
"access": "public"
|
|
90
90
|
},
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "f26cbe2bd3cf9e257c3e05953dc4dfebac710101"
|
|
92
92
|
}
|