glints-aries 4.0.257 → 4.0.258

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.
@@ -0,0 +1,13 @@
1
+ import React, { TextareaHTMLAttributes } from 'react';
2
+ export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
3
+ value: string;
4
+ onChange: (value: string) => void;
5
+ error?: boolean;
6
+ width?: string;
7
+ };
8
+ export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
9
+ value: string;
10
+ onChange: (value: string) => void;
11
+ error?: boolean;
12
+ width?: string;
13
+ } & React.RefAttributes<HTMLTextAreaElement>>;
@@ -0,0 +1,75 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange"];
4
+ import React, { useEffect, useRef, useState } from 'react';
5
+ import { StyledTextAreaContainer, StyledTextArea, StyledWordCountContainer } from './TextAreaStyle';
6
+ import { Typography } from '../Typography';
7
+ export var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
8
+ var value = _ref.value,
9
+ _ref$rows = _ref.rows,
10
+ rows = _ref$rows === void 0 ? 3 : _ref$rows,
11
+ maxLength = _ref.maxLength,
12
+ _ref$error = _ref.error,
13
+ error = _ref$error === void 0 ? false : _ref$error,
14
+ _ref$disabled = _ref.disabled,
15
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
16
+ _ref$width = _ref.width,
17
+ width = _ref$width === void 0 ? '520px' : _ref$width,
18
+ onChange = _ref.onChange,
19
+ props = _objectWithoutPropertiesLoose(_ref, _excluded);
20
+ var _useState = useState(0),
21
+ charCount = _useState[0],
22
+ setCharCount = _useState[1];
23
+ var _useState2 = useState(false),
24
+ isFocused = _useState2[0],
25
+ setIsFocused = _useState2[1];
26
+ var isError = error || !!maxLength && charCount > maxLength;
27
+ var localRef = useRef(null);
28
+ var setRefs = function setRefs(node) {
29
+ localRef.current = node;
30
+ if (typeof ref === 'function') {
31
+ ref(node);
32
+ } else if (ref) {
33
+ ref.current = node;
34
+ }
35
+ };
36
+ useEffect(function () {
37
+ setCharCount(value.length);
38
+ }, [value]);
39
+ var handleContainerClick = function handleContainerClick() {
40
+ if (localRef.current) {
41
+ localRef.current.focus();
42
+ }
43
+ };
44
+ var handleChange = function handleChange(e) {
45
+ var val = e.currentTarget.value;
46
+ onChange(val);
47
+ };
48
+ return /*#__PURE__*/React.createElement(StyledTextAreaContainer, {
49
+ "data-error": isError,
50
+ "data-disabled": disabled,
51
+ "data-focus": isFocused,
52
+ "data-has-counter": !!maxLength,
53
+ width: width,
54
+ onClick: handleContainerClick
55
+ }, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
56
+ ref: setRefs,
57
+ value: value,
58
+ rows: rows,
59
+ width: width,
60
+ onChange: handleChange,
61
+ disabled: disabled,
62
+ onFocus: function onFocus() {
63
+ return setIsFocused(true);
64
+ },
65
+ onBlur: function onBlur() {
66
+ return setIsFocused(false);
67
+ }
68
+ }, props)), !!maxLength && /*#__PURE__*/React.createElement(StyledWordCountContainer, {
69
+ "data-disabled": disabled,
70
+ "data-error": isError
71
+ }, /*#__PURE__*/React.createElement(Typography, {
72
+ as: "span",
73
+ variant: "overline"
74
+ }, charCount, " / ", maxLength)));
75
+ });
@@ -0,0 +1,4 @@
1
+ import { Meta } from '@storybook/react';
2
+ declare const _default: Meta<import("@storybook/react").Args>;
3
+ export default _default;
4
+ export declare const Interactive: any;
@@ -0,0 +1,7 @@
1
+ interface TextAreaProp {
2
+ width: string;
3
+ }
4
+ export declare const StyledTextAreaContainer: import("styled-components").StyledComponent<"div", any, TextAreaProp, never>;
5
+ export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", any, TextAreaProp, never>;
6
+ export declare const StyledWordCountContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export {};
@@ -0,0 +1,18 @@
1
+ import styled from 'styled-components';
2
+ import { borderRadius4 } from '../utilities/borderRadius';
3
+ import { Neutral, Red } from '../utilities/colors';
4
+ import { body1 as typographyBody1 } from '../Typography/TypographyStyles';
5
+ export var StyledTextAreaContainer = styled.div.withConfig({
6
+ displayName: "TextAreaStyle__StyledTextAreaContainer",
7
+ componentId: "sc-1cq0fhw-0"
8
+ })(["position:relative;width:", ";border:1px solid ", ";border-radius:", ";padding:8px 12px 25px 12px;cursor:text;&:not([data-has-counter='true']){padding-bottom:8px;}&[data-focus='true']{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}&[data-error='true']{border:1px solid ", ";&[data-focus='true']{box-shadow:none;}}&[data-disabled='true']{border:1px solid ", ";background:", ";}"], function (props) {
9
+ return props.width;
10
+ }, Neutral.B68, borderRadius4, Neutral.B100, Red.B93, Neutral.B85, Neutral.B95);
11
+ export var StyledTextArea = styled.textarea.withConfig({
12
+ displayName: "TextAreaStyle__StyledTextArea",
13
+ componentId: "sc-1cq0fhw-1"
14
+ })(["background:", ";box-sizing:border-box;border:none;", " color:", ";resize:none;width:100%;::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}::-webkit-scrollbar-thumb:hover{background-color:", ";}&::placeholder{color:", ";}&:focus{outline:none;}:disabled{background:", ";::placeholder{color:", ";}}"], Neutral.B100, typographyBody1, Neutral.B18, Neutral.B68, Neutral.B40, Neutral.B40, Neutral.B95, Neutral.B85);
15
+ export var StyledWordCountContainer = styled.div.withConfig({
16
+ displayName: "TextAreaStyle__StyledWordCountContainer",
17
+ componentId: "sc-1cq0fhw-2"
18
+ })(["position:absolute;bottom:8px;right:12px;color:", ";&[data-error='true']{color:", ";}&[data-disabled='true']{color:", ";}"], Neutral.B40, Red.B93, Neutral.B85);
@@ -0,0 +1 @@
1
+ export * from './TextArea';
@@ -0,0 +1 @@
1
+ export * from './TextArea';
@@ -1,2 +1,19 @@
1
- import { TypographyProps } from './Typography';
1
+ import { FlattenSimpleInterpolation } from 'styled-components';
2
+ import { TypographyProps, Variant } from './Typography';
3
+ export declare const headline1: FlattenSimpleInterpolation;
4
+ export declare const headline2: FlattenSimpleInterpolation;
5
+ export declare const headline3: FlattenSimpleInterpolation;
6
+ export declare const headline4: FlattenSimpleInterpolation;
7
+ export declare const headline5: FlattenSimpleInterpolation;
8
+ export declare const headline6: FlattenSimpleInterpolation;
9
+ export declare const subtitle1: FlattenSimpleInterpolation;
10
+ export declare const subtitle2: FlattenSimpleInterpolation;
11
+ export declare const body1: FlattenSimpleInterpolation;
12
+ export declare const body2: FlattenSimpleInterpolation;
13
+ export declare const button: FlattenSimpleInterpolation;
14
+ export declare const caption: FlattenSimpleInterpolation;
15
+ export declare const overline: FlattenSimpleInterpolation;
16
+ export declare const variantCssMapping: {
17
+ [variant in Variant]: FlattenSimpleInterpolation;
18
+ };
2
19
  export declare const StyledTypography: import("styled-components").StyledComponent<"p", any, TypographyProps, never>;
@@ -2,20 +2,20 @@ var _variantCssMapping;
2
2
  import styled, { css } from 'styled-components';
3
3
  import * as Breakpoints from '../utilities/breakpoints';
4
4
  import { NotoSans, Poppins } from '../utilities/fonts';
5
- var headline1 = css(["font-family:", ",sans-serif;font-weight:700;font-size:60px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-size:36px;}"], Poppins, Breakpoints.large);
6
- var headline2 = css(["font-family:", ",sans-serif;font-weight:700;font-size:50px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:32px;line-height:140%;}"], Poppins, Breakpoints.large);
7
- var headline3 = css(["font-family:", ",sans-serif;font-weight:700;font-size:36px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:28px;line-height:140%;}"], Poppins, Breakpoints.large);
8
- var headline4 = css(["font-family:", ",sans-serif;font-weight:700;font-size:30px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:24px;line-height:150%;}"], Poppins, Breakpoints.large);
9
- var headline5 = css(["font-weight:700;font-size:26px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:20px;}"], Breakpoints.large);
10
- var headline6 = css(["font-family:", ",sans-serif;font-weight:600;font-size:24px;line-height:150%;letter-spacing:0;@media (max-width:", "){font-weight:700;font-size:18px;letter-spacing:0.15px;}"], NotoSans, Breakpoints.large);
11
- var subtitle1 = css(["font-family:", ",sans-serif;font-weight:600;font-size:20px;line-height:150%;letter-spacing:0.15px;@media (max-width:", "){font-size:16px;}"], NotoSans, Breakpoints.large);
12
- var subtitle2 = css(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0;}"], NotoSans, Breakpoints.large);
13
- var body1 = css(["font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}"], NotoSans, Breakpoints.large);
14
- var body2 = css(["font-family:", ",sans-serif;font-weight:600;font-size:16px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:14px;line-height:140%;letter-spacing:0;}"], NotoSans, Breakpoints.large);
15
- var button = css(["font-family:", ",sans-serif;font-weight:700;font-size:14px;line-height:150%;letter-spacing:1.25px;@media (max-width:", "){font-weight:600;line-height:150%;letter-spacing:0.25px;}"], NotoSans, Breakpoints.large);
16
- var caption = css(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:140%;letter-spacing:0.4px;@media (max-width:", "){font-weight:500;font-size:12px;letter-spacing:0.2px;}"], NotoSans, Breakpoints.large);
17
- var overline = css(["font-family:", ",sans-serif;font-weight:500;font-size:12px;line-height:140%;letter-spacing:1.5px;@media (max-width:", "){font-size:10px;letter-spacing:0.2px;}"], NotoSans, Breakpoints.large);
18
- var variantCssMapping = (_variantCssMapping = {}, _variantCssMapping['headline1'] = headline1, _variantCssMapping['headline2'] = headline2, _variantCssMapping['headline3'] = headline3, _variantCssMapping['headline4'] = headline4, _variantCssMapping['headline5'] = headline5, _variantCssMapping['headline6'] = headline6, _variantCssMapping['subtitle1'] = subtitle1, _variantCssMapping['subtitle2'] = subtitle2, _variantCssMapping['body1'] = body1, _variantCssMapping['body2'] = body2, _variantCssMapping['button'] = button, _variantCssMapping['caption'] = caption, _variantCssMapping['overline'] = overline, _variantCssMapping);
5
+ export var headline1 = css(["font-family:", ",sans-serif;font-weight:700;font-size:60px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-size:36px;}"], Poppins, Breakpoints.large);
6
+ export var headline2 = css(["font-family:", ",sans-serif;font-weight:700;font-size:50px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:32px;line-height:140%;}"], Poppins, Breakpoints.large);
7
+ export var headline3 = css(["font-family:", ",sans-serif;font-weight:700;font-size:36px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:28px;line-height:140%;}"], Poppins, Breakpoints.large);
8
+ export var headline4 = css(["font-family:", ",sans-serif;font-weight:700;font-size:30px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:24px;line-height:150%;}"], Poppins, Breakpoints.large);
9
+ export var headline5 = css(["font-weight:700;font-size:26px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:20px;}"], Breakpoints.large);
10
+ export var headline6 = css(["font-family:", ",sans-serif;font-weight:600;font-size:24px;line-height:150%;letter-spacing:0;@media (max-width:", "){font-weight:700;font-size:18px;letter-spacing:0.15px;}"], NotoSans, Breakpoints.large);
11
+ export var subtitle1 = css(["font-family:", ",sans-serif;font-weight:600;font-size:20px;line-height:150%;letter-spacing:0.15px;@media (max-width:", "){font-size:16px;}"], NotoSans, Breakpoints.large);
12
+ export var subtitle2 = css(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0;}"], NotoSans, Breakpoints.large);
13
+ export var body1 = css(["font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}"], NotoSans, Breakpoints.large);
14
+ export var body2 = css(["font-family:", ",sans-serif;font-weight:600;font-size:16px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:14px;line-height:140%;letter-spacing:0;}"], NotoSans, Breakpoints.large);
15
+ export var button = css(["font-family:", ",sans-serif;font-weight:700;font-size:14px;line-height:150%;letter-spacing:1.25px;@media (max-width:", "){font-weight:600;line-height:150%;letter-spacing:0.25px;}"], NotoSans, Breakpoints.large);
16
+ export var caption = css(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:140%;letter-spacing:0.4px;@media (max-width:", "){font-weight:500;font-size:12px;letter-spacing:0.2px;}"], NotoSans, Breakpoints.large);
17
+ export var overline = css(["font-family:", ",sans-serif;font-weight:500;font-size:12px;line-height:140%;letter-spacing:1.5px;@media (max-width:", "){font-size:10px;letter-spacing:0.2px;}"], NotoSans, Breakpoints.large);
18
+ export var variantCssMapping = (_variantCssMapping = {}, _variantCssMapping['headline1'] = headline1, _variantCssMapping['headline2'] = headline2, _variantCssMapping['headline3'] = headline3, _variantCssMapping['headline4'] = headline4, _variantCssMapping['headline5'] = headline5, _variantCssMapping['headline6'] = headline6, _variantCssMapping['subtitle1'] = subtitle1, _variantCssMapping['subtitle2'] = subtitle2, _variantCssMapping['body1'] = body1, _variantCssMapping['body2'] = body2, _variantCssMapping['button'] = button, _variantCssMapping['caption'] = caption, _variantCssMapping['overline'] = overline, _variantCssMapping);
19
19
  export var StyledTypography = styled.p.withConfig({
20
20
  displayName: "TypographyStyles__StyledTypography",
21
21
  componentId: "sc-ro16eu-0"
@@ -30,10 +30,12 @@ export { Pagination, PaginationProps, SimplePagination } from './Pagination';
30
30
  export { Popover, PopoverProps } from './Popover';
31
31
  export { RadioButton, RadioButtonProps } from './RadioButton';
32
32
  export { Select, SelectProps } from './Select';
33
+ export { SideSheet, SideSheetProps } from './SideSheet';
33
34
  export { SkeletonImageCircle, SkeletonImageCircleProps, SkeletonImageSquare, SkeletonImageSquareProps, SkeletonText, SkeletonTextProps, } from './Skeleton';
34
35
  export { Spinner, SpinnerProps } from './Spinner';
35
36
  export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
36
37
  export { Tag, TagProps } from './Tag';
38
+ export { TextArea, TextAreaProps } from './TextArea';
37
39
  export { TextInput, TextInputProps } from './TextInput';
38
40
  export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
39
41
  export { Typography, TypographyProps } from './Typography';
package/es/@next/index.js CHANGED
@@ -31,10 +31,12 @@ export { Pagination, PaginationProps, SimplePagination } from './Pagination';
31
31
  export { Popover, PopoverProps } from './Popover';
32
32
  export { RadioButton, RadioButtonProps } from './RadioButton';
33
33
  export { Select, SelectProps } from './Select';
34
+ export { SideSheet, SideSheetProps } from './SideSheet';
34
35
  export { SkeletonImageCircle, SkeletonImageCircleProps, SkeletonImageSquare, SkeletonImageSquareProps, SkeletonText, SkeletonTextProps } from './Skeleton';
35
36
  export { Spinner, SpinnerProps } from './Spinner';
36
37
  export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
37
38
  export { Tag, TagProps } from './Tag';
39
+ export { TextArea, TextAreaProps } from './TextArea';
38
40
  export { TextInput, TextInputProps } from './TextInput';
39
41
  export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
40
42
  export { Typography, TypographyProps } from './Typography';
@@ -0,0 +1,13 @@
1
+ import React, { TextareaHTMLAttributes } from 'react';
2
+ export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
3
+ value: string;
4
+ onChange: (value: string) => void;
5
+ error?: boolean;
6
+ width?: string;
7
+ };
8
+ export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
9
+ value: string;
10
+ onChange: (value: string) => void;
11
+ error?: boolean;
12
+ width?: string;
13
+ } & React.RefAttributes<HTMLTextAreaElement>>;
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports.TextArea = void 0;
6
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
7
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _TextAreaStyle = require("./TextAreaStyle");
10
+ var _Typography = require("../Typography");
11
+ var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange"];
12
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
+ 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; }
14
+ var TextArea = /*#__PURE__*/_react["default"].forwardRef(function TextArea(_ref, ref) {
15
+ var value = _ref.value,
16
+ _ref$rows = _ref.rows,
17
+ rows = _ref$rows === void 0 ? 3 : _ref$rows,
18
+ maxLength = _ref.maxLength,
19
+ _ref$error = _ref.error,
20
+ error = _ref$error === void 0 ? false : _ref$error,
21
+ _ref$disabled = _ref.disabled,
22
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
23
+ _ref$width = _ref.width,
24
+ width = _ref$width === void 0 ? '520px' : _ref$width,
25
+ onChange = _ref.onChange,
26
+ props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
27
+ var _useState = (0, _react.useState)(0),
28
+ charCount = _useState[0],
29
+ setCharCount = _useState[1];
30
+ var _useState2 = (0, _react.useState)(false),
31
+ isFocused = _useState2[0],
32
+ setIsFocused = _useState2[1];
33
+ var isError = error || !!maxLength && charCount > maxLength;
34
+ var localRef = (0, _react.useRef)(null);
35
+ var setRefs = function setRefs(node) {
36
+ localRef.current = node;
37
+ if (typeof ref === 'function') {
38
+ ref(node);
39
+ } else if (ref) {
40
+ ref.current = node;
41
+ }
42
+ };
43
+ (0, _react.useEffect)(function () {
44
+ setCharCount(value.length);
45
+ }, [value]);
46
+ var handleContainerClick = function handleContainerClick() {
47
+ if (localRef.current) {
48
+ localRef.current.focus();
49
+ }
50
+ };
51
+ var handleChange = function handleChange(e) {
52
+ var val = e.currentTarget.value;
53
+ onChange(val);
54
+ };
55
+ return /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledTextAreaContainer, {
56
+ "data-error": isError,
57
+ "data-disabled": disabled,
58
+ "data-focus": isFocused,
59
+ "data-has-counter": !!maxLength,
60
+ width: width,
61
+ onClick: handleContainerClick
62
+ }, /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledTextArea, (0, _extends2["default"])({
63
+ ref: setRefs,
64
+ value: value,
65
+ rows: rows,
66
+ width: width,
67
+ onChange: handleChange,
68
+ disabled: disabled,
69
+ onFocus: function onFocus() {
70
+ return setIsFocused(true);
71
+ },
72
+ onBlur: function onBlur() {
73
+ return setIsFocused(false);
74
+ }
75
+ }, props)), !!maxLength && /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledWordCountContainer, {
76
+ "data-disabled": disabled,
77
+ "data-error": isError
78
+ }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
79
+ as: "span",
80
+ variant: "overline"
81
+ }, charCount, " / ", maxLength)));
82
+ });
83
+ exports.TextArea = TextArea;
@@ -0,0 +1,4 @@
1
+ import { Meta } from '@storybook/react';
2
+ declare const _default: Meta<import("@storybook/react").Args>;
3
+ export default _default;
4
+ export declare const Interactive: any;
@@ -0,0 +1,7 @@
1
+ interface TextAreaProp {
2
+ width: string;
3
+ }
4
+ export declare const StyledTextAreaContainer: import("styled-components").StyledComponent<"div", any, TextAreaProp, never>;
5
+ export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", any, TextAreaProp, never>;
6
+ export declare const StyledWordCountContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export {};
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports.StyledWordCountContainer = exports.StyledTextAreaContainer = exports.StyledTextArea = void 0;
6
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
7
+ var _borderRadius = require("../utilities/borderRadius");
8
+ var _colors = require("../utilities/colors");
9
+ var _TypographyStyles = require("../Typography/TypographyStyles");
10
+ var StyledTextAreaContainer = _styledComponents["default"].div.withConfig({
11
+ displayName: "TextAreaStyle__StyledTextAreaContainer",
12
+ componentId: "sc-1cq0fhw-0"
13
+ })(["position:relative;width:", ";border:1px solid ", ";border-radius:", ";padding:8px 12px 25px 12px;cursor:text;&:not([data-has-counter='true']){padding-bottom:8px;}&[data-focus='true']{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}&[data-error='true']{border:1px solid ", ";&[data-focus='true']{box-shadow:none;}}&[data-disabled='true']{border:1px solid ", ";background:", ";}"], function (props) {
14
+ return props.width;
15
+ }, _colors.Neutral.B68, _borderRadius.borderRadius4, _colors.Neutral.B100, _colors.Red.B93, _colors.Neutral.B85, _colors.Neutral.B95);
16
+ exports.StyledTextAreaContainer = StyledTextAreaContainer;
17
+ var StyledTextArea = _styledComponents["default"].textarea.withConfig({
18
+ displayName: "TextAreaStyle__StyledTextArea",
19
+ componentId: "sc-1cq0fhw-1"
20
+ })(["background:", ";box-sizing:border-box;border:none;", " color:", ";resize:none;width:100%;::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}::-webkit-scrollbar-thumb:hover{background-color:", ";}&::placeholder{color:", ";}&:focus{outline:none;}:disabled{background:", ";::placeholder{color:", ";}}"], _colors.Neutral.B100, _TypographyStyles.body1, _colors.Neutral.B18, _colors.Neutral.B68, _colors.Neutral.B40, _colors.Neutral.B40, _colors.Neutral.B95, _colors.Neutral.B85);
21
+ exports.StyledTextArea = StyledTextArea;
22
+ var StyledWordCountContainer = _styledComponents["default"].div.withConfig({
23
+ displayName: "TextAreaStyle__StyledWordCountContainer",
24
+ componentId: "sc-1cq0fhw-2"
25
+ })(["position:absolute;bottom:8px;right:12px;color:", ";&[data-error='true']{color:", ";}&[data-disabled='true']{color:", ";}"], _colors.Neutral.B40, _colors.Red.B93, _colors.Neutral.B85);
26
+ exports.StyledWordCountContainer = StyledWordCountContainer;
@@ -0,0 +1 @@
1
+ export * from './TextArea';
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ var _TextArea = require("./TextArea");
5
+ Object.keys(_TextArea).forEach(function (key) {
6
+ if (key === "default" || key === "__esModule") return;
7
+ if (key in exports && exports[key] === _TextArea[key]) return;
8
+ exports[key] = _TextArea[key];
9
+ });
@@ -1,2 +1,19 @@
1
- import { TypographyProps } from './Typography';
1
+ import { FlattenSimpleInterpolation } from 'styled-components';
2
+ import { TypographyProps, Variant } from './Typography';
3
+ export declare const headline1: FlattenSimpleInterpolation;
4
+ export declare const headline2: FlattenSimpleInterpolation;
5
+ export declare const headline3: FlattenSimpleInterpolation;
6
+ export declare const headline4: FlattenSimpleInterpolation;
7
+ export declare const headline5: FlattenSimpleInterpolation;
8
+ export declare const headline6: FlattenSimpleInterpolation;
9
+ export declare const subtitle1: FlattenSimpleInterpolation;
10
+ export declare const subtitle2: FlattenSimpleInterpolation;
11
+ export declare const body1: FlattenSimpleInterpolation;
12
+ export declare const body2: FlattenSimpleInterpolation;
13
+ export declare const button: FlattenSimpleInterpolation;
14
+ export declare const caption: FlattenSimpleInterpolation;
15
+ export declare const overline: FlattenSimpleInterpolation;
16
+ export declare const variantCssMapping: {
17
+ [variant in Variant]: FlattenSimpleInterpolation;
18
+ };
2
19
  export declare const StyledTypography: import("styled-components").StyledComponent<"p", any, TypographyProps, never>;
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.StyledTypography = void 0;
4
+ exports.variantCssMapping = exports.subtitle2 = exports.subtitle1 = exports.overline = exports.headline6 = exports.headline5 = exports.headline4 = exports.headline3 = exports.headline2 = exports.headline1 = exports.caption = exports.button = exports.body2 = exports.body1 = exports.StyledTypography = void 0;
5
5
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
6
6
  var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
7
7
  var _fonts = require("../utilities/fonts");
@@ -9,19 +9,33 @@ var _variantCssMapping;
9
9
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
10
10
  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
11
  var headline1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:60px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-size:36px;}"], _fonts.Poppins, Breakpoints.large);
12
+ exports.headline1 = headline1;
12
13
  var headline2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:50px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:32px;line-height:140%;}"], _fonts.Poppins, Breakpoints.large);
14
+ exports.headline2 = headline2;
13
15
  var headline3 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:36px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:28px;line-height:140%;}"], _fonts.Poppins, Breakpoints.large);
16
+ exports.headline3 = headline3;
14
17
  var headline4 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:30px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:24px;line-height:150%;}"], _fonts.Poppins, Breakpoints.large);
18
+ exports.headline4 = headline4;
15
19
  var headline5 = (0, _styledComponents.css)(["font-weight:700;font-size:26px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:20px;}"], Breakpoints.large);
20
+ exports.headline5 = headline5;
16
21
  var headline6 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:24px;line-height:150%;letter-spacing:0;@media (max-width:", "){font-weight:700;font-size:18px;letter-spacing:0.15px;}"], _fonts.NotoSans, Breakpoints.large);
22
+ exports.headline6 = headline6;
17
23
  var subtitle1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:20px;line-height:150%;letter-spacing:0.15px;@media (max-width:", "){font-size:16px;}"], _fonts.NotoSans, Breakpoints.large);
24
+ exports.subtitle1 = subtitle1;
18
25
  var subtitle2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0;}"], _fonts.NotoSans, Breakpoints.large);
26
+ exports.subtitle2 = subtitle2;
19
27
  var body1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}"], _fonts.NotoSans, Breakpoints.large);
28
+ exports.body1 = body1;
20
29
  var body2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:16px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:14px;line-height:140%;letter-spacing:0;}"], _fonts.NotoSans, Breakpoints.large);
30
+ exports.body2 = body2;
21
31
  var button = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:14px;line-height:150%;letter-spacing:1.25px;@media (max-width:", "){font-weight:600;line-height:150%;letter-spacing:0.25px;}"], _fonts.NotoSans, Breakpoints.large);
32
+ exports.button = button;
22
33
  var caption = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:140%;letter-spacing:0.4px;@media (max-width:", "){font-weight:500;font-size:12px;letter-spacing:0.2px;}"], _fonts.NotoSans, Breakpoints.large);
34
+ exports.caption = caption;
23
35
  var overline = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:500;font-size:12px;line-height:140%;letter-spacing:1.5px;@media (max-width:", "){font-size:10px;letter-spacing:0.2px;}"], _fonts.NotoSans, Breakpoints.large);
36
+ exports.overline = overline;
24
37
  var variantCssMapping = (_variantCssMapping = {}, _variantCssMapping['headline1'] = headline1, _variantCssMapping['headline2'] = headline2, _variantCssMapping['headline3'] = headline3, _variantCssMapping['headline4'] = headline4, _variantCssMapping['headline5'] = headline5, _variantCssMapping['headline6'] = headline6, _variantCssMapping['subtitle1'] = subtitle1, _variantCssMapping['subtitle2'] = subtitle2, _variantCssMapping['body1'] = body1, _variantCssMapping['body2'] = body2, _variantCssMapping['button'] = button, _variantCssMapping['caption'] = caption, _variantCssMapping['overline'] = overline, _variantCssMapping);
38
+ exports.variantCssMapping = variantCssMapping;
25
39
  var StyledTypography = _styledComponents["default"].p.withConfig({
26
40
  displayName: "TypographyStyles__StyledTypography",
27
41
  componentId: "sc-ro16eu-0"
@@ -30,10 +30,12 @@ export { Pagination, PaginationProps, SimplePagination } from './Pagination';
30
30
  export { Popover, PopoverProps } from './Popover';
31
31
  export { RadioButton, RadioButtonProps } from './RadioButton';
32
32
  export { Select, SelectProps } from './Select';
33
+ export { SideSheet, SideSheetProps } from './SideSheet';
33
34
  export { SkeletonImageCircle, SkeletonImageCircleProps, SkeletonImageSquare, SkeletonImageSquareProps, SkeletonText, SkeletonTextProps, } from './Skeleton';
34
35
  export { Spinner, SpinnerProps } from './Spinner';
35
36
  export { Tab, TabModel, TabProps, Tabs, TabsProps } from './Tabs';
36
37
  export { Tag, TagProps } from './Tag';
38
+ export { TextArea, TextAreaProps } from './TextArea';
37
39
  export { TextInput, TextInputProps } from './TextInput';
38
40
  export { Tooltip, TooltipPosition, TooltipProps } from './Tooltip';
39
41
  export { Typography, TypographyProps } from './Typography';
@@ -1,7 +1,8 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SkeletonTextProps = exports.SkeletonText = exports.SkeletonImageSquareProps = exports.SkeletonImageSquare = exports.SkeletonImageCircleProps = exports.SkeletonImageCircle = exports.SimplePagination = exports.SelectProps = exports.Select = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.ComboboxProps = exports.Combobox = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CarouselProps = exports.Carousel = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BarProps = exports.Bar = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
4
+ exports.Typography = exports.TooltipProps = exports.TooltipPosition = exports.Tooltip = exports.TextInputProps = exports.TextInput = exports.TextAreaProps = exports.TextArea = exports.TagProps = exports.Tag = exports.TabsProps = exports.Tabs = exports.TableRowProps = exports.TableHeaderProps = exports.TableCellProps = exports.TabProps = exports.TabModel = exports.Tab = exports.Switch = exports.SpinnerProps = exports.Spinner = exports.Spacing = exports.SkeletonTextProps = exports.SkeletonText = exports.SkeletonImageSquareProps = exports.SkeletonImageSquare = exports.SkeletonImageCircleProps = exports.SkeletonImageCircle = exports.SimplePagination = exports.SideSheetProps = exports.SideSheet = exports.SelectProps = exports.Select = exports.RadioButtonProps = exports.RadioButton = exports.PrimaryButton = exports.PopoverProps = exports.Popover = exports.PaginationProps = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInputProps = exports.NumberInput = exports.ModalProvider = exports.ModalProps = exports.ModalContext = exports.Modal = exports.MenuProps = exports.Menu = exports.LinkProps = exports.Link = exports.InlineErrorProps = exports.InlineError = exports.IndexTableProps = exports.IndexTable = exports.IconProps = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTableProps = exports.DataTable = exports.CurrencyInputProps = exports.CurrencyInput = exports.ComboboxProps = exports.Combobox = exports.Colors = exports.CheckboxProps = exports.Checkbox = exports.CarouselProps = exports.Carousel = exports.CardProps = exports.Card = exports.ButtonProps = exports.ButtonGroupProps = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.BarProps = exports.Bar = exports.BannerProps = exports.Banner = exports.BadgeProps = exports.Badge = exports.AvatarProps = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertProps = exports.AlertContextProps = exports.AlertContext = exports.Alert = exports.ActionListSection = exports.ActionListProps = exports.ActionListItem = exports.ActionList = void 0;
5
+ exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.TypographyProps = void 0;
5
6
  var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
6
7
  exports.BorderRadius = BorderRadius;
7
8
  var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -109,6 +110,9 @@ exports.RadioButtonProps = _RadioButton.RadioButtonProps;
109
110
  var _Select = require("./Select");
110
111
  exports.Select = _Select.Select;
111
112
  exports.SelectProps = _Select.SelectProps;
113
+ var _SideSheet = require("./SideSheet");
114
+ exports.SideSheet = _SideSheet.SideSheet;
115
+ exports.SideSheetProps = _SideSheet.SideSheetProps;
112
116
  var _Skeleton = require("./Skeleton");
113
117
  exports.SkeletonImageCircle = _Skeleton.SkeletonImageCircle;
114
118
  exports.SkeletonImageCircleProps = _Skeleton.SkeletonImageCircleProps;
@@ -128,6 +132,9 @@ exports.TabsProps = _Tabs.TabsProps;
128
132
  var _Tag = require("./Tag");
129
133
  exports.Tag = _Tag.Tag;
130
134
  exports.TagProps = _Tag.TagProps;
135
+ var _TextArea = require("./TextArea");
136
+ exports.TextArea = _TextArea.TextArea;
137
+ exports.TextAreaProps = _TextArea.TextAreaProps;
131
138
  var _TextInput = require("./TextInput");
132
139
  exports.TextInput = _TextInput.TextInput;
133
140
  exports.TextInputProps = _TextInput.TextInputProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.257",
3
+ "version": "4.0.258",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",