@chayns-components/core 5.0.0-beta.230 → 5.0.0-beta.232

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.
@@ -41,8 +41,10 @@ const StyledAccordion = _styledComponents.default.div`
41
41
  ${_ref4 => {
42
42
  let {
43
43
  isOpen,
44
- isWrapped
44
+ isWrapped,
45
+ shouldForceBackground
45
46
  } = _ref4;
47
+ if (shouldForceBackground) return undefined;
46
48
  if (isWrapped) {
47
49
  return (0, _styledComponents.css)`
48
50
  :not(:last-child) {
@@ -69,49 +71,34 @@ const StyledAccordion = _styledComponents.default.div`
69
71
  }}
70
72
 
71
73
  ${_ref7 => {
72
- let {
73
- isOpen,
74
- isWrapped
75
- } = _ref7;
76
- return !isOpen && !isWrapped && (0, _styledComponents.css)`
77
- border-bottom-color: ${_ref8 => {
78
- let {
79
- theme
80
- } = _ref8;
81
- return theme.headline;
82
- }};
83
- `;
84
- }}
85
-
86
- ${_ref9 => {
87
74
  let {
88
75
  isParentWrapped
89
- } = _ref9;
76
+ } = _ref7;
90
77
  return isParentWrapped && (0, _styledComponents.css)`
91
78
  padding-left: 17px;
92
79
  `;
93
80
  }}
94
81
 
95
- ${_ref10 => {
82
+ ${_ref8 => {
96
83
  let {
97
84
  isWrapped
98
- } = _ref10;
85
+ } = _ref8;
99
86
  return !isWrapped && (0, _styledComponents.css)`
100
87
  margin-top: 10px;
101
88
  `;
102
89
  }}
103
90
 
104
- ${_ref11 => {
91
+ ${_ref9 => {
105
92
  let {
106
93
  isWrapped,
107
94
  shouldHideBackground
108
- } = _ref11;
95
+ } = _ref9;
109
96
  return !isWrapped && !shouldHideBackground && (0, _styledComponents.css)`
110
97
  &:hover {
111
- background-color: ${_ref12 => {
98
+ background-color: ${_ref10 => {
112
99
  let {
113
100
  theme
114
- } = _ref12;
101
+ } = _ref10;
115
102
  return theme['100'];
116
103
  }}; // ToDo: Add opacity here
117
104
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledAccordion","styled","div","_ref","isOpen","isWrapped","shouldForceBackground","shouldHideBackground","css","_ref2","theme","_ref3","_ref4","_ref5","headline","_ref6","undefined","_ref7","_ref8","_ref9","isParentWrapped","_ref10","_ref11","_ref12","exports"],"sources":["../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { AccordionProps } from './Accordion';\n\ntype StyledMotionAccordionProps = WithTheme<{\n isOpen: boolean;\n isParentWrapped: boolean;\n}> &\n Pick<AccordionProps, 'isWrapped' | 'shouldForceBackground' | 'shouldHideBackground'>;\n\nexport const StyledAccordion = styled.div<StyledMotionAccordionProps>`\n ${({ isOpen, isWrapped, shouldForceBackground, shouldHideBackground }) =>\n (isOpen || shouldForceBackground) &&\n !isWrapped &&\n !shouldHideBackground &&\n css`\n background-color: ${({ theme }: StyledMotionAccordionProps) =>\n theme['100']}; // ToDo: Add opacity here\n border-radius: 3px; // ToDo: Add correct border-radius here\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n `}\n\n border-bottom: 1px solid transparent;\n margin-bottom: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '30px' : '0px')};\n transition: background-color 0.3s ease, border-bottom-color 0.3s ease, border-radius 0.3s ease,\n box-shadow 0.3s ease, margin-bottom 0.3s ease;\n\n ${({ isOpen, isWrapped }) => {\n if (isWrapped) {\n return css`\n :not(:last-child) {\n border-bottom-color: ${({ theme }: StyledMotionAccordionProps) =>\n theme.headline};\n }\n `;\n }\n\n if (!isOpen) {\n return css`\n border-bottom-color: ${({ theme }: StyledMotionAccordionProps) => theme.headline};\n `;\n }\n\n return undefined;\n }}\n\n ${({ isOpen, isWrapped }) =>\n !isOpen &&\n !isWrapped &&\n css`\n border-bottom-color: ${({ theme }: StyledMotionAccordionProps) => theme.headline};\n `}\n\n ${({ isParentWrapped }) =>\n isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n\n ${({ isWrapped }) =>\n !isWrapped &&\n css`\n margin-top: 10px;\n `}\n\n ${({ isWrapped, shouldHideBackground }) =>\n !isWrapped &&\n !shouldHideBackground &&\n css`\n &:hover {\n background-color: ${({ theme }: StyledMotionAccordionProps) =>\n theme['100']}; // ToDo: Add opacity here\n }\n `}\n`;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Accordion.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledAccordion","styled","div","_ref","isOpen","isWrapped","shouldForceBackground","shouldHideBackground","css","_ref2","theme","_ref3","_ref4","undefined","_ref5","headline","_ref6","_ref7","isParentWrapped","_ref8","_ref9","_ref10","exports"],"sources":["../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { AccordionProps } from './Accordion';\n\ntype StyledMotionAccordionProps = WithTheme<{\n isOpen: boolean;\n isParentWrapped: boolean;\n}> &\n Pick<AccordionProps, 'isWrapped' | 'shouldForceBackground' | 'shouldHideBackground'>;\n\nexport const StyledAccordion = styled.div<StyledMotionAccordionProps>`\n ${({ isOpen, isWrapped, shouldForceBackground, shouldHideBackground }) =>\n (isOpen || shouldForceBackground) &&\n !isWrapped &&\n !shouldHideBackground &&\n css`\n background-color: ${({ theme }: StyledMotionAccordionProps) =>\n theme['100']}; // ToDo: Add opacity here\n border-radius: 3px; // ToDo: Add correct border-radius here\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n `}\n\n border-bottom: 1px solid transparent;\n margin-bottom: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '30px' : '0px')};\n transition: background-color 0.3s ease, border-bottom-color 0.3s ease, border-radius 0.3s ease,\n box-shadow 0.3s ease, margin-bottom 0.3s ease;\n\n ${({ isOpen, isWrapped, shouldForceBackground }) => {\n if (shouldForceBackground) return undefined;\n\n if (isWrapped) {\n return css`\n :not(:last-child) {\n border-bottom-color: ${({ theme }: StyledMotionAccordionProps) =>\n theme.headline};\n }\n `;\n }\n\n if (!isOpen) {\n return css`\n border-bottom-color: ${({ theme }: StyledMotionAccordionProps) => theme.headline};\n `;\n }\n\n return undefined;\n }}\n\n ${({ isParentWrapped }) =>\n isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n\n ${({ isWrapped }) =>\n !isWrapped &&\n css`\n margin-top: 10px;\n `}\n\n ${({ isWrapped, shouldHideBackground }) =>\n !isWrapped &&\n !shouldHideBackground &&\n css`\n &:hover {\n background-color: ${({ theme }: StyledMotionAccordionProps) =>\n theme['100']}; // ToDo: Add opacity here\n }\n `}\n`;\n"],"mappings":"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"}
@@ -3,6 +3,10 @@ export type InputRef = {
3
3
  focus: VoidFunction;
4
4
  };
5
5
  export type InputProps = {
6
+ /**
7
+ * Icon element to be displayed on the left side of the input field
8
+ */
9
+ iconElement?: ReactNode;
6
10
  /**
7
11
  * Disables the input so that it cannot be changed anymore
8
12
  */
@@ -31,6 +35,10 @@ export type InputProps = {
31
35
  * Element to be displayed next to or instead of the "placeholder"
32
36
  */
33
37
  placeholderElement?: ReactNode;
38
+ /**
39
+ * If true, a clear icon is displayed at the end of the input field
40
+ */
41
+ shouldShowClearIcon?: boolean;
34
42
  /**
35
43
  * Input type set for input element (e.g. 'text', 'number' or 'password')
36
44
  */
@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
+ var _Icon = _interopRequireDefault(require("../icon/Icon"));
8
9
  var _Input = require("./Input.styles");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
11
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
10
12
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
11
13
  const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
12
14
  let {
15
+ iconElement,
13
16
  isDisabled,
14
17
  onBlur,
15
18
  onChange,
@@ -17,11 +20,22 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
17
20
  onKeyDown,
18
21
  placeholder,
19
22
  placeholderElement,
23
+ shouldShowClearIcon = false,
20
24
  type = 'text',
21
25
  value
22
26
  } = _ref;
23
27
  const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
24
28
  const inputRef = (0, _react.useRef)(null);
29
+ const handleClearIconClick = (0, _react.useCallback)(() => {
30
+ if (inputRef.current) {
31
+ inputRef.current.value = '';
32
+ if (typeof onChange === 'function') {
33
+ onChange({
34
+ target: inputRef.current
35
+ });
36
+ }
37
+ }
38
+ }, [onChange]);
25
39
  const handleInputFieldChange = (0, _react.useCallback)(event => {
26
40
  setHasValue(event.target.value !== '');
27
41
  if (typeof onChange === 'function') {
@@ -54,7 +68,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
54
68
  return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
55
69
  className: "beta-chayns-input",
56
70
  isDisabled: isDisabled
57
- }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, null, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
71
+ }, iconElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputIconWrapper, null, iconElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, null, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
58
72
  disabled: isDisabled,
59
73
  onBlur: onBlur,
60
74
  onChange: handleInputFieldChange,
@@ -77,7 +91,11 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
77
91
  transition: {
78
92
  type: 'tween'
79
93
  }
80
- }, placeholderElement, placeholder)));
94
+ }, placeholderElement, placeholder)), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledInputClearIcon, {
95
+ onClick: handleClearIconClick
96
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
97
+ icons: ['fa fa-times']
98
+ })));
81
99
  });
82
100
  Input.displayName = 'Input';
83
101
  var _default = Input;
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_Input","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Input","forwardRef","_ref","ref","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","type","value","hasValue","setHasValue","useState","inputRef","useRef","handleInputFieldChange","useCallback","event","target","useImperativeHandle","focus","_inputRef$current","current","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputContent","StyledInputField","disabled","StyledMotionInputLabel","animate","scale","initial","layout","style","originX","originY","transition","displayName","_default","exports"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputField,\n StyledMotionInputLabel,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\nexport type InputProps = {\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Function that is executed when the input field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Element to be displayed next to or instead of the \"placeholder\"\n */\n placeholderElement?: ReactNode;\n /**\n * Input type set for input element (e.g. 'text', 'number' or 'password')\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n placeholderElement,\n type = 'text',\n value,\n },\n ref\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange]\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n []\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue) {\n return { bottom: -8, right: -6 };\n }\n\n return { left: 0, top: 0 };\n }, [hasValue]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" isDisabled={isDisabled}>\n <StyledInputContent>\n <StyledInputField\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n />\n <StyledMotionInputLabel\n animate={{ scale: hasValue ? 0.6 : 1 }}\n initial={false}\n layout\n style={{ ...labelPosition, originX: 1, originY: 1 }}\n transition={{ type: 'tween' }}\n >\n {placeholderElement}\n {placeholder}\n </StyledMotionInputLabel>\n </StyledInputContent>\n </StyledInput>\n );\n }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Input","forwardRef","_ref","ref","iconElement","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","shouldShowClearIcon","type","value","hasValue","setHasValue","useState","inputRef","useRef","handleClearIconClick","useCallback","current","target","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputIconWrapper","StyledInputContent","StyledInputField","disabled","StyledMotionInputLabel","animate","scale","initial","layout","style","originX","originY","transition","StyledInputClearIcon","onClick","icons","displayName","_default","exports"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputClearIcon,\n StyledInputContent,\n StyledInputField,\n StyledInputIconWrapper,\n StyledMotionInputLabel,\n} from './Input.styles';\n\nexport type InputRef = {\n focus: VoidFunction;\n};\n\nexport type InputProps = {\n /**\n * Icon element to be displayed on the left side of the input field\n */\n iconElement?: ReactNode;\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Function that is executed when the input field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Element to be displayed next to or instead of the \"placeholder\"\n */\n placeholderElement?: ReactNode;\n /**\n * If true, a clear icon is displayed at the end of the input field\n */\n shouldShowClearIcon?: boolean;\n /**\n * Input type set for input element (e.g. 'text', 'number' or 'password')\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n iconElement,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n placeholderElement,\n shouldShowClearIcon = false,\n type = 'text',\n value,\n },\n ref\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange]\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n []\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue) {\n return { bottom: -8, right: -6 };\n }\n\n return { left: 0, top: 0 };\n }, [hasValue]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" isDisabled={isDisabled}>\n {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n <StyledInputContent>\n <StyledInputField\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n ref={inputRef}\n type={type}\n value={value}\n />\n <StyledMotionInputLabel\n animate={{ scale: hasValue ? 0.6 : 1 }}\n initial={false}\n layout\n style={{ ...labelPosition, originX: 1, originY: 1 }}\n transition={{ type: 'tween' }}\n >\n {placeholderElement}\n {placeholder}\n </StyledMotionInputLabel>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledInputClearIcon onClick={handleClearIconClick}>\n <Icon icons={['fa fa-times']} />\n </StyledInputClearIcon>\n )}\n </StyledInput>\n );\n }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
@@ -5,3 +5,5 @@ export declare const StyledInput: import("styled-components").StyledComponent<"d
5
5
  export declare const StyledInputContent: import("styled-components").StyledComponent<"div", any, {}, never>;
6
6
  export declare const StyledInputField: import("styled-components").StyledComponent<"input", any, {}, never>;
7
7
  export declare const StyledMotionInputLabel: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, any, {}, never>;
8
+ export declare const StyledInputClearIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const StyledInputIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledMotionInputLabel = exports.StyledInputField = exports.StyledInputContent = exports.StyledInput = void 0;
6
+ exports.StyledMotionInputLabel = exports.StyledInputIconWrapper = exports.StyledInputField = exports.StyledInputContent = exports.StyledInputClearIcon = exports.StyledInput = void 0;
7
7
  var _framerMotion = require("framer-motion");
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -32,7 +32,6 @@ const StyledInput = _styledComponents.default.div`
32
32
  } = _ref3;
33
33
  return isDisabled ? 0.5 : 1;
34
34
  }};
35
- padding: 8px 10px;
36
35
  transition: opacity 0.3s ease;
37
36
  width: 100%;
38
37
  `;
@@ -40,9 +39,9 @@ exports.StyledInput = StyledInput;
40
39
  const StyledInputContent = _styledComponents.default.div`
41
40
  display: flex;
42
41
  flex: 1 1 auto;
43
- flex-direction: column;
44
- position: relative;
45
42
  min-width: 0;
43
+ margin: 8px 10px;
44
+ position: relative;
46
45
  `;
47
46
  exports.StyledInputContent = StyledInputContent;
48
47
  const StyledInputField = _styledComponents.default.input`
@@ -55,6 +54,7 @@ const StyledInputField = _styledComponents.default.input`
55
54
  return theme.text;
56
55
  }};
57
56
  padding: 0;
57
+ width: 100%;
58
58
  `;
59
59
  exports.StyledInputField = StyledInputField;
60
60
  const StyledMotionInputLabel = (0, _styledComponents.default)(_framerMotion.motion.label)`
@@ -62,10 +62,35 @@ const StyledMotionInputLabel = (0, _styledComponents.default)(_framerMotion.moti
62
62
  display: flex;
63
63
  flex: 0 0 auto;
64
64
  gap: 4px;
65
- line-height: 1.15;
65
+ line-height: 1.3;
66
66
  pointer-events: none;
67
67
  position: absolute;
68
68
  user-select: none;
69
69
  `;
70
70
  exports.StyledMotionInputLabel = StyledMotionInputLabel;
71
+ const StyledInputClearIcon = _styledComponents.default.div`
72
+ align-items: center;
73
+ border-left: 1px solid rgba(160, 160, 160, 0.3);
74
+ color: ${_ref5 => {
75
+ let {
76
+ theme
77
+ } = _ref5;
78
+ return theme.headline;
79
+ }};
80
+ cursor: pointer;
81
+ display: flex;
82
+ flex: 0 0 auto;
83
+ height: 40px;
84
+ justify-content: center;
85
+ width: 40px;
86
+ `;
87
+ exports.StyledInputClearIcon = StyledInputClearIcon;
88
+ const StyledInputIconWrapper = _styledComponents.default.div`
89
+ align-items: baseline;
90
+ display: flex;
91
+ flex: 0 0 auto;
92
+ justify-content: center;
93
+ margin-left: 10px;
94
+ `;
95
+ exports.StyledInputIconWrapper = StyledInputIconWrapper;
71
96
  //# sourceMappingURL=Input.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledInput","styled","div","_ref","theme","_ref2","_ref3","isDisabled","exports","StyledInputContent","StyledInputField","input","_ref4","text","StyledMotionInputLabel","motion","label"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from './Input';\n\ntype StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n align-items: center;\n background-color: ${({ theme }: StyledInputProps) => theme['100']};\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-radius: 3px;\n color: ${({ theme }: StyledInputProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n min-height: 42px;\n opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n padding: 8px 10px;\n transition: opacity 0.3s ease;\n width: 100%;\n`;\n\nexport const StyledInputContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n position: relative;\n min-width: 0;\n`;\n\nexport const StyledInputField = styled.input`\n background: none;\n border: none;\n color: ${({ theme }: StyledInputProps) => theme.text};\n padding: 0;\n`;\n\nexport const StyledMotionInputLabel = styled(motion.label)`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.15;\n pointer-events: none;\n position: absolute;\n user-select: none;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMhC,MAAMG,WAAW,GAAGC,yBAAM,CAACC,GAAsB;AACxD;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAwB,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAR,WAAA,GAAAA,WAAA;AAEK,MAAMS,kBAAkB,GAAGR,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CAAC;AAACM,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAEK,MAAMC,gBAAgB,GAAGT,yBAAM,CAACU,KAAM;AAC7C;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAER;EAAwB,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAACS,IAAI;AAAA,CAAC;AACzD;AACA,CAAC;AAACL,OAAA,CAAAE,gBAAA,GAAAA,gBAAA;AAEK,MAAMI,sBAAsB,GAAG,IAAAb,yBAAM,EAACc,oBAAM,CAACC,KAAK,CAAE;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACR,OAAA,CAAAM,sBAAA,GAAAA,sBAAA"}
1
+ {"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledInput","styled","div","_ref","theme","_ref2","_ref3","isDisabled","exports","StyledInputContent","StyledInputField","input","_ref4","text","StyledMotionInputLabel","motion","label","StyledInputClearIcon","_ref5","headline","StyledInputIconWrapper"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from './Input';\n\ntype StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n align-items: center;\n background-color: ${({ theme }: StyledInputProps) => theme['100']};\n border: 1px solid rgba(160, 160, 160, 0.3);\n border-radius: 3px;\n color: ${({ theme }: StyledInputProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n min-height: 42px;\n opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n transition: opacity 0.3s ease;\n width: 100%;\n`;\n\nexport const StyledInputContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: 8px 10px;\n position: relative;\n`;\n\nexport const StyledInputField = styled.input`\n background: none;\n border: none;\n color: ${({ theme }: StyledInputProps) => theme.text};\n padding: 0;\n width: 100%;\n`;\n\nexport const StyledMotionInputLabel = styled(motion.label)`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n`;\n\nexport const StyledInputClearIcon = styled.div`\n align-items: center;\n border-left: 1px solid rgba(160, 160, 160, 0.3);\n color: ${({ theme }: StyledInputProps) => theme.headline};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMhC,MAAMG,WAAW,GAAGC,yBAAM,CAACC,GAAsB;AACxD;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAwB,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA,CAAC;AAACC,OAAA,CAAAR,WAAA,GAAAA,WAAA;AAEK,MAAMS,kBAAkB,GAAGR,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CAAC;AAACM,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAEK,MAAMC,gBAAgB,GAAGT,yBAAM,CAACU,KAAM;AAC7C;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAER;EAAwB,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAACS,IAAI;AAAA,CAAC;AACzD;AACA;AACA,CAAC;AAACL,OAAA,CAAAE,gBAAA,GAAAA,gBAAA;AAEK,MAAMI,sBAAsB,GAAG,IAAAb,yBAAM,EAACc,oBAAM,CAACC,KAAK,CAAE;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACR,OAAA,CAAAM,sBAAA,GAAAA,sBAAA;AAEK,MAAMG,oBAAoB,GAAGhB,yBAAM,CAACC,GAAI;AAC/C;AACA;AACA,aAAagB,KAAA;EAAA,IAAC;IAAEd;EAAwB,CAAC,GAAAc,KAAA;EAAA,OAAKd,KAAK,CAACe,QAAQ;AAAA,CAAC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACX,OAAA,CAAAS,oBAAA,GAAAA,oBAAA;AAEK,MAAMG,sBAAsB,GAAGnB,yBAAM,CAACC,GAAI;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACM,OAAA,CAAAY,sBAAA,GAAAA,sBAAA"}
@@ -79,14 +79,14 @@ const SearchInput = _ref => {
79
79
  duration: 0.3
80
80
  }
81
81
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
82
- onChange: onChange,
83
- placeholder: placeholder,
84
- placeholderElement: /*#__PURE__*/_react.default.createElement(_Icon.default, {
82
+ iconElement: /*#__PURE__*/_react.default.createElement(_Icon.default, {
85
83
  color: theme.text,
86
- icons: ['far fa-search'],
87
- size: 14
84
+ icons: ['far fa-search']
88
85
  }),
86
+ onChange: onChange,
87
+ placeholder: placeholder,
89
88
  ref: inputRef,
89
+ shouldShowClearIcon: true,
90
90
  value: value
91
91
  }))));
92
92
  };
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_Icon","_interopRequireDefault","_Input","_SearchInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SearchInput","_ref","iconColor","onActiveChange","onChange","placeholder","value","isActive","setIsActive","useState","trim","inputRef","useRef","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","StyledMotionSearchInputIconWrapper","AnimatePresence","initial","StyledMotionSearchInputIconWrapperContent","animate","opacity","exit","position","transition","duration","color","icons","onClick","size","StyledMotionSearchInputContentWrapper","width","placeholderElement","text","ref","displayName","_default","exports"],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n /**\n * Color of the icon\n */\n iconColor?: CSSProperties['color'];\n /**\n * Function that is executed when the active state of the input changes\n */\n onActiveChange?: (isActive: boolean) => void;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange: ChangeEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n onActiveChange,\n onChange,\n placeholder,\n value,\n}) => {\n const [isActive, setIsActive] = useState(typeof value === 'string' && value.trim() !== '');\n\n const inputRef = useRef<InputRef>(null);\n\n const theme = useTheme() as Theme;\n\n const handleBackIconClick = useCallback(() => setIsActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isActive);\n }\n\n if (isActive) {\n inputRef.current?.focus();\n }\n }, [isActive, onActiveChange]);\n\n return (\n <StyledSearchInput className=\"beta-chayns-search-input\">\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n >\n <Icon\n color={iconColor}\n icons={isActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n onClick={isActive ? handleBackIconClick : handleSearchIconClick}\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isActive && (\n <StyledMotionSearchInputContentWrapper\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n onChange={onChange}\n placeholder={placeholder}\n placeholderElement={\n <Icon color={theme.text} icons={['far fa-search']} size={14} />\n }\n ref={inputRef}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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"}
1
+ {"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_Icon","_interopRequireDefault","_Input","_SearchInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SearchInput","_ref","iconColor","onActiveChange","onChange","placeholder","value","isActive","setIsActive","useState","trim","inputRef","useRef","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","StyledMotionSearchInputIconWrapper","AnimatePresence","initial","StyledMotionSearchInputIconWrapperContent","animate","opacity","exit","position","transition","duration","color","icons","onClick","size","StyledMotionSearchInputContentWrapper","width","iconElement","text","ref","shouldShowClearIcon","displayName","_default","exports"],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n /**\n * Color of the icon\n */\n iconColor?: CSSProperties['color'];\n /**\n * Function that is executed when the active state of the input changes\n */\n onActiveChange?: (isActive: boolean) => void;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange: ChangeEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n onActiveChange,\n onChange,\n placeholder,\n value,\n}) => {\n const [isActive, setIsActive] = useState(typeof value === 'string' && value.trim() !== '');\n\n const inputRef = useRef<InputRef>(null);\n\n const theme = useTheme() as Theme;\n\n const handleBackIconClick = useCallback(() => setIsActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isActive);\n }\n\n if (isActive) {\n inputRef.current?.focus();\n }\n }, [isActive, onActiveChange]);\n\n return (\n <StyledSearchInput className=\"beta-chayns-search-input\">\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n >\n <Icon\n color={iconColor}\n icons={isActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n onClick={isActive ? handleBackIconClick : handleSearchIconClick}\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isActive && (\n <StyledMotionSearchInputContentWrapper\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n iconElement={<Icon color={theme.text} icons={['far fa-search']} />}\n onChange={onChange}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.230",
3
+ "version": "5.0.0-beta.232",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "keywords": [
6
6
  "chayns",
@@ -65,5 +65,5 @@
65
65
  "publishConfig": {
66
66
  "access": "public"
67
67
  },
68
- "gitHead": "60a9bcfe28da913ef51b63992e5ec2418479e453"
68
+ "gitHead": "c0512a6aa56c6112e8f5eb2b208bd80fbe55c2ff"
69
69
  }