@manuscripts/style-guide 3.5.28 → 3.5.30

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.
Files changed (17) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/components/DateInput.js +118 -0
  3. package/dist/cjs/components/DatePicker.js +0 -202
  4. package/dist/cjs/components/icons/index.js +3 -1
  5. package/dist/cjs/components/icons/notifications.js +5 -0
  6. package/dist/cjs/index.js +1 -1
  7. package/dist/es/components/DateInput.js +82 -0
  8. package/dist/es/components/DatePicker.js +1 -196
  9. package/dist/es/components/icons/index.js +1 -0
  10. package/dist/es/components/icons/notifications.js +3 -0
  11. package/dist/es/index.js +1 -1
  12. package/dist/types/components/DateInput.d.ts +24 -0
  13. package/dist/types/components/DatePicker.d.ts +0 -28
  14. package/dist/types/components/icons/index.d.ts +1 -0
  15. package/dist/types/components/icons/notifications.d.ts +4 -0
  16. package/dist/types/index.d.ts +1 -1
  17. package/package.json +1 -3
package/README.md CHANGED
@@ -7,7 +7,7 @@ React components for Manuscripts applications.
7
7
  ```tsx
8
8
  import { PrimaryButton } from '@manuscripts/style-guide'
9
9
 
10
- const Example: React.FunctionComponent<{
10
+ const Example: React.FunctionComponent<{
11
11
  handleClick: React.MouseEventHandler<HTMLButtonElement>
12
12
  }> = ({ handleClick }) => (
13
13
  <div>
package/dist/cjs/components/DateInput.js ADDED
@@ -0,0 +1,118 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ Object.defineProperty(exports, "__esModule", { value: true });
36
+ exports.DateTimeInput = exports.DateInput = void 0;
37
+ const jsx_runtime_1 = require("react/jsx-runtime");
38
+ const styled_components_1 = __importStar(require("styled-components"));
39
+ const icons_1 = require("./icons");
40
+ const inputStyles = (0, styled_components_1.css) `
41
+ box-sizing: border-box;
42
+ width: 100%;
43
+ min-height: ${(props) => (props.variant === 'small' ? '32px' : '40px')};
44
+ padding: 0 36px 0 12px;
45
+ border: 1px solid
46
+ ${(props) => props.error
47
+ ? props.theme.colors.border.error
48
+ : props.theme.colors.border.field.default};
49
+ border-radius: 3px;
50
+ background-color: #fff;
51
+ color: ${(props) => props.theme.colors.text.primary};
52
+ font: ${(props) => props.theme.font.weight.normal}
53
+ ${(props) => props.theme.font.size.medium} / 1
54
+ ${(props) => props.theme.font.family.sans};
55
+ line-height: ${(props) => props.theme.font.lineHeight.large};
56
+ outline: none;
57
+
58
+ &::-webkit-calendar-picker-indicator {
59
+ opacity: 0;
60
+ position: absolute;
61
+ right: 0;
62
+ width: 36px;
63
+ height: 100%;
64
+ cursor: pointer;
65
+ }
66
+
67
+ &::placeholder {
68
+ color: ${(props) => props.theme.colors.text.greyMuted || '#6E6E6E'};
69
+ opacity: 1;
70
+ font-style: italic;
71
+ }
72
+
73
+ &:hover:not(:disabled) {
74
+ background-color: #f2fbfc;
75
+ border-color: ${(props) => props.theme.colors.text.greyMuted};
76
+ }
77
+
78
+ &:focus:not(:disabled) {
79
+ border: 2px solid
80
+ ${(props) => props.error
81
+ ? props.theme.colors.border.error
82
+ : props.theme.colors.brand.default};
83
+ background-color: #f2fbfc;
84
+ padding: 0 35px 0 11px;
85
+ }
86
+
87
+ &:disabled {
88
+ background-color: #f5f5f5;
89
+ border-color: #e4e4e4;
90
+ color: #b3b3b3;
91
+ cursor: not-allowed;
92
+ }
93
+ `;
94
+ const StyledDateInput = styled_components_1.default.input `
95
+ ${inputStyles}
96
+ `;
97
+ const Wrapper = styled_components_1.default.div `
98
+ position: relative;
99
+ display: block;
100
+ width: 100%;
101
+ `;
102
+ const IconWrapper = styled_components_1.default.div `
103
+ position: absolute;
104
+ right: ${(props) => props.theme.grid.unit * 3}px;
105
+ top: 50%;
106
+ transform: translateY(-50%);
107
+ display: flex;
108
+ align-items: center;
109
+ pointer-events: none;
110
+ color: ${(props) => props.theme.colors.border.secondary};
111
+ `;
112
+ const makeComponent = (type, displayName) => {
113
+ const Component = (props) => ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(StyledDateInput, { ...props, type: type }), (0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIcon, { width: 16, height: 16 }) })] }));
114
+ Component.displayName = displayName;
115
+ return Component;
116
+ };
117
+ exports.DateInput = makeComponent('date', 'DateInput');
118
+ exports.DateTimeInput = makeComponent('datetime-local', 'DateTimeInput');
package/dist/cjs/components/DatePicker.js CHANGED
@@ -1,203 +1 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.DatePicker = void 0;
7
- const jsx_runtime_1 = require("react/jsx-runtime");
8
- require("react-datepicker/dist/react-datepicker.css");
9
- const react_1 = require("react");
10
- const react_datepicker_1 = __importDefault(require("react-datepicker"));
11
- const styled_components_1 = __importDefault(require("styled-components"));
12
- const icons_1 = require("./icons");
13
- const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, disabled, }) => {
14
- const [selectedDate, setSelectedDate] = (0, react_1.useState)(date || null);
15
- (0, react_1.useEffect)(() => {
16
- setSelectedDate(date ?? null);
17
- }, [date]);
18
- const handleChange = (date) => {
19
- setSelectedDate(date);
20
- handleDateChange(date);
21
- };
22
- const format = showTimeSelect
23
- ? 'd MMM yyyy, EEEE h:mm aa'
24
- : 'd MMM yyyy, EEEE';
25
- return ((0, jsx_runtime_1.jsxs)(Calendar, { children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { id: id, selected: selectedDate, onChange: handleChange, placeholderText: placeholder, minDate: originalDate, showTimeSelect: showTimeSelect, dateFormat: format, className: "calendar-input", popperPlacement: "bottom", required: required, disabled: disabled }), (0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icons_1.CalendarIcon, { width: 16, height: 16 }) })] }));
26
- };
27
- exports.DatePicker = DatePicker;
28
- const Calendar = styled_components_1.default.div `
29
- width: 100%;
30
- position: relative;
31
- display: block;
32
-
33
- .react-datepicker {
34
- display: flex;
35
- padding: ${(props) => props.theme.grid.unit * 5}px;
36
- font-size: ${(props) => props.theme.font.size.normal};
37
- }
38
-
39
- .react-datepicker-wrapper,
40
- .react-datepicker__input-container {
41
- display: block;
42
- width: 100% !important;
43
-
44
- input::placeholder {
45
- color: ${(props) => props.theme.colors.text.greyMuted ||
46
- props.theme.colors.text.secondary ||
47
- '#6E6E6E'};
48
- opacity: 1;
49
- font-family: 'PT Sans', sans-serif;
50
- font-size: ${(props) => props.theme.font.size.medium};
51
- font-style: italic;
52
- font-weight: ${(props) => props.theme.font.weight.normal};
53
- line-height: ${(props) => props.theme.font.lineHeight.large};
54
- }
55
-
56
- input:focus::placeholder {
57
- color: ${(props) => props.theme.colors.text.greyLight || '#C9C9C9'} !important;
58
- opacity: 1 !important;
59
- }
60
- }
61
-
62
- .react-datepicker__header {
63
- background-color: unset;
64
- border: unset;
65
- }
66
-
67
- .react-datepicker__day.react-datepicker__day--disabled {
68
- color: #ccc;
69
- }
70
-
71
- .react-datepicker__day-name,
72
- .react-datepicker__day,
73
- .react-datepicker__time-name {
74
- color: #000000cc;
75
- padding: ${(props) => props.theme.grid.unit}px;
76
- }
77
-
78
- .react-datepicker__day-names .react-datepicker__day-name {
79
- color: #d4d4d4;
80
- }
81
-
82
- .react-datepicker__time {
83
- .react-datepicker__time-box {
84
- width: 95px;
85
-
86
- .react-datepicker__time-list {
87
- overflow-y: unset;
88
- }
89
- }
90
- }
91
-
92
- h2.react-datepicker__current-month {
93
- padding-bottom: ${(props) => props.theme.grid.unit * 5}px;
94
- font-weight: 400;
95
- font-size: ${(props) => props.theme.font.size.medium};
96
- }
97
-
98
- .react-datepicker[aria-label='Choose Date and Time'] {
99
- .react-datepicker__navigation--next {
100
- right: 150px;
101
- }
102
- }
103
-
104
- .react-datepicker__navigation--next {
105
- right: 65px;
106
- top: 24px;
107
- }
108
-
109
- .react-datepicker__navigation--previous {
110
- left: 65px;
111
- top: 24px;
112
- }
113
-
114
- .react-datepicker__day--selected {
115
- border: 1px solid rgb(188, 231, 246);
116
- background-color: rgb(242, 251, 252);
117
- border-radius: 50%;
118
- }
119
-
120
- .react-datepicker__day:not(.-selected):hover {
121
- border-radius: 50%;
122
- background-color: rgb(242, 251, 252);
123
- }
124
-
125
- .react-datepicker-popper[data-placement^='bottom']
126
- .react-datepicker__triangle {
127
- fill: white;
128
- color: white;
129
- }
130
-
131
- .react-datepicker__day--outside-month {
132
- visibility: hidden;
133
- }
134
-
135
- .react-datepicker__day--keyboard-selected {
136
- background-color: unset;
137
- }
138
-
139
- .calendar-input {
140
- width: 100%;
141
- box-sizing: border-box;
142
- min-height: 40px;
143
- border-radius: 3px;
144
- font: ${(props) => props.theme.font.weight.normal}
145
- ${(props) => props.theme.font.size.medium} / 1
146
- ${(props) => props.theme.font.family.sans};
147
- line-height: ${(props) => props.theme.font.lineHeight.large};
148
- padding: 0 ${(props) => props.theme.grid.unit * 10}px 0
149
- ${(props) => props.theme.grid.unit * 4}px;
150
- text-align: start;
151
- border: 1px solid ${(props) => props.theme.colors.border.field.default};
152
- color: ${(props) => props.theme.colors.text.primary};
153
- outline: 0;
154
- background-color: #fff;
155
-
156
- &::placeholder {
157
- color: ${(props) => props.theme.colors.text.greyMuted ||
158
- props.theme.colors.text.secondary ||
159
- '#6E6E6E'};
160
- opacity: 1;
161
- font-family: 'PT Sans', sans-serif;
162
- font-size: ${(props) => props.theme.font.size.medium};
163
- font-style: italic;
164
- font-weight: ${(props) => props.theme.font.weight.normal};
165
- line-height: ${(props) => props.theme.font.lineHeight.large};
166
- }
167
-
168
- &:focus {
169
- border: 2px solid ${(props) => props.theme.colors.brand.default};
170
- background-color: #f2fbfc;
171
- padding: 0 ${(props) => props.theme.grid.unit * 10 - 1}px 0
172
- ${(props) => props.theme.grid.unit * 4 - 1}px;
173
- outline: none;
174
- }
175
-
176
- &:hover {
177
- border-color: ${(props) => props.theme.colors.text.greyMuted};
178
- background-color: #f2fbfc;
179
- }
180
-
181
- &:disabled {
182
- cursor: not-allowed;
183
- background-color: ${(props) => props.theme.colors.background.disabled};
184
- border-color: ${(props) => props.theme.colors.border.field.default};
185
- color: ${(props) => props.theme.colors.text.secondary};
186
-
187
- &:hover {
188
- border-color: ${(props) => props.theme.colors.border.field.default};
189
- background-color: ${(props) => props.theme.colors.background.disabled};
190
- }
191
- }
192
- }
193
- `;
194
- const IconWrapper = styled_components_1.default.div `
195
- position: absolute;
196
- right: ${(props) => props.theme.grid.unit * 3}px;
197
- top: 50%;
198
- transform: translateY(-50%);
199
- display: flex;
200
- align-items: center;
201
- pointer-events: none;
202
- color: ${(props) => props.theme.colors.border.secondary};
203
- `;
package/dist/cjs/components/icons/index.js CHANGED
@@ -20,7 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  exports.FileUnknownIcon = exports.FileTableIcon = exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DraggableIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.ChatIcon = exports.CalendarIcon = exports.BookIcon = exports.AffiliationPlaceholderIcon = exports.AuthorPlaceholderIcon = exports.AffiliationIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddRoleIcon = exports.AddIcon = exports.AddOutlineIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddFigureIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
22
22
  exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoxedTextIcon = exports.ToolbarBoldIcon = exports.TickIcon = exports.TaskStepDoneIcon = exports.SupplementsIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusErrorIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.ORCIDIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEmbedIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.ManuscriptIcon = exports.LogoutIcon = exports.LockIcon = exports.LinkIcon = exports.InspectorPluginIcon = exports.InfoCircleIcon = exports.ImageRightIcon = exports.ImageDefaultIcon = exports.ImageLeftIcon = exports.HelpIcon = exports.GlobeIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = exports.FileVideoIcon = void 0;
23
- exports.PencilIcon = exports.EyeIcon = exports.XIcon = exports.DangerIcon = exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.TranslateIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = void 0;
23
+ exports.PencilIcon = exports.NotificationsIcon = exports.EyeIcon = exports.XIcon = exports.DangerIcon = exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.TranslateIcon = exports.ToolbarUnindentIcon = exports.ToolbarIndentIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarSpecialCharactersIcon = void 0;
24
24
  var add_author_1 = require("./add-author");
25
25
  Object.defineProperty(exports, "AddAuthorIcon", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
26
26
  var add_comment_1 = require("./add-comment");
@@ -263,5 +263,7 @@ var x_1 = require("./x");
263
263
  Object.defineProperty(exports, "XIcon", { enumerable: true, get: function () { return __importDefault(x_1).default; } });
264
264
  var eye_icon_1 = require("./eye-icon");
265
265
  Object.defineProperty(exports, "EyeIcon", { enumerable: true, get: function () { return __importDefault(eye_icon_1).default; } });
266
+ var notifications_1 = require("./notifications");
267
+ Object.defineProperty(exports, "NotificationsIcon", { enumerable: true, get: function () { return __importDefault(notifications_1).default; } });
266
268
  var pencil_icon_1 = require("./pencil-icon");
267
269
  Object.defineProperty(exports, "PencilIcon", { enumerable: true, get: function () { return __importDefault(pencil_icon_1).default; } });
package/dist/cjs/components/icons/notifications.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const jsx_runtime_1 = require("react/jsx-runtime");
4
+ const NotificationsIcon = (props) => ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", color: "#6E6E6E", xmlns: "http://www.w3.org/2000/svg", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M28.5761 26.3435L26.4001 22.7529C25.3973 21.0976 24.8667 19.1994 24.866 17.264V14.1176C24.866 9.2753 20.8876 5.33365 16.0001 5.33365C11.1126 5.33365 7.13422 9.2753 7.13422 14.1176V17.264C7.13422 19.1972 6.60339 21.0946 5.6001 22.7529L3.4241 26.3435C3.36648 26.4383 3.33522 26.5467 3.33357 26.6575C3.33191 26.7684 3.35992 26.8777 3.41469 26.9741C3.52763 27.1718 3.73939 27.2941 3.96716 27.2941H28.033C28.2608 27.2941 28.4726 27.1718 28.5855 26.9741C28.6403 26.8777 28.6683 26.7684 28.6666 26.6575C28.665 26.5467 28.6337 26.4383 28.5761 26.3435ZM5.08527 26.0395L6.68527 23.3976C7.80654 21.5482 8.39962 19.4268 8.4001 17.264V14.1176C8.4001 9.96518 11.809 6.58824 16.0001 6.58824C20.1912 6.58824 23.6001 9.96518 23.6001 14.1176V17.264C23.6001 19.4249 24.193 21.5454 25.313 23.3976L26.9149 26.0395H5.08527Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.0001 0.941177C14.6034 0.941177 13.4664 2.06682 13.4664 3.4513V5.96047C13.4668 6.04328 13.4835 6.12521 13.5155 6.20157C13.5475 6.27794 13.5943 6.34725 13.6531 6.40554C13.7119 6.46383 13.7817 6.50997 13.8583 6.54132C13.9349 6.57266 14.017 6.58861 14.0998 6.58824C14.1826 6.58861 14.2647 6.57266 14.3414 6.54132C14.418 6.50997 14.4877 6.46383 14.5466 6.40554C14.6054 6.34725 14.6521 6.27794 14.6842 6.20157C14.7162 6.12521 14.7329 6.04328 14.7332 5.96047V3.4513C14.734 3.28567 14.7673 3.12182 14.8314 2.96909C14.8955 2.81636 14.989 2.67775 15.1066 2.56116C15.2243 2.44457 15.3637 2.3523 15.517 2.2896C15.6703 2.22691 15.8344 2.19502 16.0001 2.19577C16.1657 2.19502 16.3298 2.22691 16.4831 2.2896C16.6364 2.3523 16.7759 2.44457 16.8935 2.56116C17.0111 2.67775 17.1047 2.81636 17.1687 2.96909C17.2328 3.12182 17.2661 3.28567 17.2669 3.4513V5.96047C17.2673 6.04328 17.2839 6.12521 17.316 6.20157C17.348 6.27794 17.3948 6.34725 17.4536 6.40554C17.5124 6.46383 17.5821 6.50997 17.6588 6.54132C17.7354 6.57266 17.8175 6.58861 17.9003 6.58824C17.9831 6.58861 18.0652 6.57266 18.1418 6.54132C18.2185 6.50997 18.2882 6.46383 18.347 6.40554C18.4058 6.34725 18.4526 6.27794 18.4846 6.20157C18.5167 6.12521 18.5333 6.04328 18.5337 5.96047V3.4513C18.5337 2.06682 17.3968 0.941177 16.0001 0.941177ZM18.7408 26.3492C18.6541 26.2059 18.5148 26.1022 18.3527 26.0601C18.1905 26.0181 18.0184 26.0411 17.873 26.1242C17.8013 26.1655 17.7385 26.2206 17.6883 26.2863C17.638 26.3521 17.6013 26.4271 17.5803 26.5072C17.5593 26.5872 17.5544 26.6706 17.5658 26.7525C17.5773 26.8344 17.6049 26.9133 17.6471 26.9845C17.8109 27.2612 17.9012 27.5944 17.9012 27.9219C17.9012 28.9591 17.0485 29.8042 16.001 29.8042C15.4998 29.8057 15.0184 29.6084 14.6623 29.2556C14.3063 28.9027 14.1047 28.4231 14.1017 27.9219C14.1017 27.5944 14.1911 27.2612 14.3558 26.9845C14.3978 26.9132 14.4252 26.8344 14.4365 26.7525C14.4479 26.6706 14.4429 26.5873 14.4219 26.5074C14.4009 26.4274 14.3643 26.3524 14.3142 26.2866C14.2641 26.2209 14.2015 26.1657 14.1299 26.1242C13.9846 26.0403 13.8121 26.0169 13.6496 26.059C13.4871 26.101 13.3476 26.2053 13.2612 26.3492C12.9807 26.8255 12.8328 27.3682 12.833 27.9209C12.833 29.6527 14.2542 31.0588 16.0001 31.0588C17.7469 31.0588 19.1662 29.6518 19.169 27.9219C19.169 27.3666 19.0212 26.8235 18.7408 26.3492Z", fill: "currentColor" })] }));
5
+ exports.default = NotificationsIcon;
package/dist/cjs/index.js CHANGED
@@ -88,7 +88,7 @@ __exportStar(require("./components/Text"), exports);
88
88
  __exportStar(require("./components/RelativeDate"), exports);
89
89
  __exportStar(require("./components/Menus"), exports);
90
90
  __exportStar(require("./components/Drawer"), exports);
91
- __exportStar(require("./components/DatePicker"), exports);
91
+ __exportStar(require("./components/DateInput"), exports);
92
92
  __exportStar(require("./components/SelectField"), exports);
93
93
  __exportStar(require("./components/SelectedItemsBox"), exports);
94
94
  __exportStar(require("./components/ExpandableSection"), exports);
package/dist/es/components/DateInput.js ADDED
@@ -0,0 +1,82 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import styled, { css } from 'styled-components';
3
+ import { CalendarIcon } from './icons';
4
+ const inputStyles = css `
5
+ box-sizing: border-box;
6
+ width: 100%;
7
+ min-height: ${(props) => (props.variant === 'small' ? '32px' : '40px')};
8
+ padding: 0 36px 0 12px;
9
+ border: 1px solid
10
+ ${(props) => props.error
11
+ ? props.theme.colors.border.error
12
+ : props.theme.colors.border.field.default};
13
+ border-radius: 3px;
14
+ background-color: #fff;
15
+ color: ${(props) => props.theme.colors.text.primary};
16
+ font: ${(props) => props.theme.font.weight.normal}
17
+ ${(props) => props.theme.font.size.medium} / 1
18
+ ${(props) => props.theme.font.family.sans};
19
+ line-height: ${(props) => props.theme.font.lineHeight.large};
20
+ outline: none;
21
+
22
+ &::-webkit-calendar-picker-indicator {
23
+ opacity: 0;
24
+ position: absolute;
25
+ right: 0;
26
+ width: 36px;
27
+ height: 100%;
28
+ cursor: pointer;
29
+ }
30
+
31
+ &::placeholder {
32
+ color: ${(props) => props.theme.colors.text.greyMuted || '#6E6E6E'};
33
+ opacity: 1;
34
+ font-style: italic;
35
+ }
36
+
37
+ &:hover:not(:disabled) {
38
+ background-color: #f2fbfc;
39
+ border-color: ${(props) => props.theme.colors.text.greyMuted};
40
+ }
41
+
42
+ &:focus:not(:disabled) {
43
+ border: 2px solid
44
+ ${(props) => props.error
45
+ ? props.theme.colors.border.error
46
+ : props.theme.colors.brand.default};
47
+ background-color: #f2fbfc;
48
+ padding: 0 35px 0 11px;
49
+ }
50
+
51
+ &:disabled {
52
+ background-color: #f5f5f5;
53
+ border-color: #e4e4e4;
54
+ color: #b3b3b3;
55
+ cursor: not-allowed;
56
+ }
57
+ `;
58
+ const StyledDateInput = styled.input `
59
+ ${inputStyles}
60
+ `;
61
+ const Wrapper = styled.div `
62
+ position: relative;
63
+ display: block;
64
+ width: 100%;
65
+ `;
66
+ const IconWrapper = styled.div `
67
+ position: absolute;
68
+ right: ${(props) => props.theme.grid.unit * 3}px;
69
+ top: 50%;
70
+ transform: translateY(-50%);
71
+ display: flex;
72
+ align-items: center;
73
+ pointer-events: none;
74
+ color: ${(props) => props.theme.colors.border.secondary};
75
+ `;
76
+ const makeComponent = (type, displayName) => {
77
+ const Component = (props) => (_jsxs(Wrapper, { children: [_jsx(StyledDateInput, { ...props, type: type }), _jsx(IconWrapper, { children: _jsx(CalendarIcon, { width: 16, height: 16 }) })] }));
78
+ Component.displayName = displayName;
79
+ return Component;
80
+ };
81
+ export const DateInput = makeComponent('date', 'DateInput');
82
+ export const DateTimeInput = makeComponent('datetime-local', 'DateTimeInput');
package/dist/es/components/DatePicker.js CHANGED
@@ -1,196 +1 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import 'react-datepicker/dist/react-datepicker.css';
3
- import { useEffect, useState } from 'react';
4
- import ReactDatePicker from 'react-datepicker';
5
- import styled from 'styled-components';
6
- import { CalendarIcon } from './icons';
7
- export const DatePicker = ({ id, originalDate, date, handleDateChange, placeholder, showTimeSelect, required, disabled, }) => {
8
- const [selectedDate, setSelectedDate] = useState(date || null);
9
- useEffect(() => {
10
- setSelectedDate(date ?? null);
11
- }, [date]);
12
- const handleChange = (date) => {
13
- setSelectedDate(date);
14
- handleDateChange(date);
15
- };
16
- const format = showTimeSelect
17
- ? 'd MMM yyyy, EEEE h:mm aa'
18
- : 'd MMM yyyy, EEEE';
19
- return (_jsxs(Calendar, { children: [_jsx(ReactDatePicker, { id: id, selected: selectedDate, onChange: handleChange, placeholderText: placeholder, minDate: originalDate, showTimeSelect: showTimeSelect, dateFormat: format, className: "calendar-input", popperPlacement: "bottom", required: required, disabled: disabled }), _jsx(IconWrapper, { children: _jsx(CalendarIcon, { width: 16, height: 16 }) })] }));
20
- };
21
- const Calendar = styled.div `
22
- width: 100%;
23
- position: relative;
24
- display: block;
25
-
26
- .react-datepicker {
27
- display: flex;
28
- padding: ${(props) => props.theme.grid.unit * 5}px;
29
- font-size: ${(props) => props.theme.font.size.normal};
30
- }
31
-
32
- .react-datepicker-wrapper,
33
- .react-datepicker__input-container {
34
- display: block;
35
- width: 100% !important;
36
-
37
- input::placeholder {
38
- color: ${(props) => props.theme.colors.text.greyMuted ||
39
- props.theme.colors.text.secondary ||
40
- '#6E6E6E'};
41
- opacity: 1;
42
- font-family: 'PT Sans', sans-serif;
43
- font-size: ${(props) => props.theme.font.size.medium};
44
- font-style: italic;
45
- font-weight: ${(props) => props.theme.font.weight.normal};
46
- line-height: ${(props) => props.theme.font.lineHeight.large};
47
- }
48
-
49
- input:focus::placeholder {
50
- color: ${(props) => props.theme.colors.text.greyLight || '#C9C9C9'} !important;
51
- opacity: 1 !important;
52
- }
53
- }
54
-
55
- .react-datepicker__header {
56
- background-color: unset;
57
- border: unset;
58
- }
59
-
60
- .react-datepicker__day.react-datepicker__day--disabled {
61
- color: #ccc;
62
- }
63
-
64
- .react-datepicker__day-name,
65
- .react-datepicker__day,
66
- .react-datepicker__time-name {
67
- color: #000000cc;
68
- padding: ${(props) => props.theme.grid.unit}px;
69
- }
70
-
71
- .react-datepicker__day-names .react-datepicker__day-name {
72
- color: #d4d4d4;
73
- }
74
-
75
- .react-datepicker__time {
76
- .react-datepicker__time-box {
77
- width: 95px;
78
-
79
- .react-datepicker__time-list {
80
- overflow-y: unset;
81
- }
82
- }
83
- }
84
-
85
- h2.react-datepicker__current-month {
86
- padding-bottom: ${(props) => props.theme.grid.unit * 5}px;
87
- font-weight: 400;
88
- font-size: ${(props) => props.theme.font.size.medium};
89
- }
90
-
91
- .react-datepicker[aria-label='Choose Date and Time'] {
92
- .react-datepicker__navigation--next {
93
- right: 150px;
94
- }
95
- }
96
-
97
- .react-datepicker__navigation--next {
98
- right: 65px;
99
- top: 24px;
100
- }
101
-
102
- .react-datepicker__navigation--previous {
103
- left: 65px;
104
- top: 24px;
105
- }
106
-
107
- .react-datepicker__day--selected {
108
- border: 1px solid rgb(188, 231, 246);
109
- background-color: rgb(242, 251, 252);
110
- border-radius: 50%;
111
- }
112
-
113
- .react-datepicker__day:not(.-selected):hover {
114
- border-radius: 50%;
115
- background-color: rgb(242, 251, 252);
116
- }
117
-
118
- .react-datepicker-popper[data-placement^='bottom']
119
- .react-datepicker__triangle {
120
- fill: white;
121
- color: white;
122
- }
123
-
124
- .react-datepicker__day--outside-month {
125
- visibility: hidden;
126
- }
127
-
128
- .react-datepicker__day--keyboard-selected {
129
- background-color: unset;
130
- }
131
-
132
- .calendar-input {
133
- width: 100%;
134
- box-sizing: border-box;
135
- min-height: 40px;
136
- border-radius: 3px;
137
- font: ${(props) => props.theme.font.weight.normal}
138
- ${(props) => props.theme.font.size.medium} / 1
139
- ${(props) => props.theme.font.family.sans};
140
- line-height: ${(props) => props.theme.font.lineHeight.large};
141
- padding: 0 ${(props) => props.theme.grid.unit * 10}px 0
142
- ${(props) => props.theme.grid.unit * 4}px;
143
- text-align: start;
144
- border: 1px solid ${(props) => props.theme.colors.border.field.default};
145
- color: ${(props) => props.theme.colors.text.primary};
146
- outline: 0;
147
- background-color: #fff;
148
-
149
- &::placeholder {
150
- color: ${(props) => props.theme.colors.text.greyMuted ||
151
- props.theme.colors.text.secondary ||
152
- '#6E6E6E'};
153
- opacity: 1;
154
- font-family: 'PT Sans', sans-serif;
155
- font-size: ${(props) => props.theme.font.size.medium};
156
- font-style: italic;
157
- font-weight: ${(props) => props.theme.font.weight.normal};
158
- line-height: ${(props) => props.theme.font.lineHeight.large};
159
- }
160
-
161
- &:focus {
162
- border: 2px solid ${(props) => props.theme.colors.brand.default};
163
- background-color: #f2fbfc;
164
- padding: 0 ${(props) => props.theme.grid.unit * 10 - 1}px 0
165
- ${(props) => props.theme.grid.unit * 4 - 1}px;
166
- outline: none;
167
- }
168
-
169
- &:hover {
170
- border-color: ${(props) => props.theme.colors.text.greyMuted};
171
- background-color: #f2fbfc;
172
- }
173
-
174
- &:disabled {
175
- cursor: not-allowed;
176
- background-color: ${(props) => props.theme.colors.background.disabled};
177
- border-color: ${(props) => props.theme.colors.border.field.default};
178
- color: ${(props) => props.theme.colors.text.secondary};
179
-
180
- &:hover {
181
- border-color: ${(props) => props.theme.colors.border.field.default};
182
- background-color: ${(props) => props.theme.colors.background.disabled};
183
- }
184
- }
185
- }
186
- `;
187
- const IconWrapper = styled.div `
188
- position: absolute;
189
- right: ${(props) => props.theme.grid.unit * 3}px;
190
- top: 50%;
191
- transform: translateY(-50%);
192
- display: flex;
193
- align-items: center;
194
- pointer-events: none;
195
- color: ${(props) => props.theme.colors.border.secondary};
196
- `;
1
+ "use strict";
package/dist/es/components/icons/index.js CHANGED
@@ -134,4 +134,5 @@ export { default as AddInstitutionIcon } from './add-institution';
134
134
  export { default as DangerIcon } from './danger';
135
135
  export { default as XIcon } from './x';
136
136
  export { default as EyeIcon } from './eye-icon';
137
+ export { default as NotificationsIcon } from './notifications';
137
138
  export { default as PencilIcon } from './pencil-icon';
package/dist/es/components/icons/notifications.js ADDED
@@ -0,0 +1,3 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ const NotificationsIcon = (props) => (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", color: "#6E6E6E", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M28.5761 26.3435L26.4001 22.7529C25.3973 21.0976 24.8667 19.1994 24.866 17.264V14.1176C24.866 9.2753 20.8876 5.33365 16.0001 5.33365C11.1126 5.33365 7.13422 9.2753 7.13422 14.1176V17.264C7.13422 19.1972 6.60339 21.0946 5.6001 22.7529L3.4241 26.3435C3.36648 26.4383 3.33522 26.5467 3.33357 26.6575C3.33191 26.7684 3.35992 26.8777 3.41469 26.9741C3.52763 27.1718 3.73939 27.2941 3.96716 27.2941H28.033C28.2608 27.2941 28.4726 27.1718 28.5855 26.9741C28.6403 26.8777 28.6683 26.7684 28.6666 26.6575C28.665 26.5467 28.6337 26.4383 28.5761 26.3435ZM5.08527 26.0395L6.68527 23.3976C7.80654 21.5482 8.39962 19.4268 8.4001 17.264V14.1176C8.4001 9.96518 11.809 6.58824 16.0001 6.58824C20.1912 6.58824 23.6001 9.96518 23.6001 14.1176V17.264C23.6001 19.4249 24.193 21.5454 25.313 23.3976L26.9149 26.0395H5.08527Z", fill: "currentColor" }), _jsx("path", { d: "M16.0001 0.941177C14.6034 0.941177 13.4664 2.06682 13.4664 3.4513V5.96047C13.4668 6.04328 13.4835 6.12521 13.5155 6.20157C13.5475 6.27794 13.5943 6.34725 13.6531 6.40554C13.7119 6.46383 13.7817 6.50997 13.8583 6.54132C13.9349 6.57266 14.017 6.58861 14.0998 6.58824C14.1826 6.58861 14.2647 6.57266 14.3414 6.54132C14.418 6.50997 14.4877 6.46383 14.5466 6.40554C14.6054 6.34725 14.6521 6.27794 14.6842 6.20157C14.7162 6.12521 14.7329 6.04328 14.7332 5.96047V3.4513C14.734 3.28567 14.7673 3.12182 14.8314 2.96909C14.8955 2.81636 14.989 2.67775 15.1066 2.56116C15.2243 2.44457 15.3637 2.3523 15.517 2.2896C15.6703 2.22691 15.8344 2.19502 16.0001 2.19577C16.1657 2.19502 16.3298 2.22691 16.4831 2.2896C16.6364 2.3523 16.7759 2.44457 16.8935 2.56116C17.0111 2.67775 17.1047 2.81636 17.1687 2.96909C17.2328 3.12182 17.2661 3.28567 17.2669 3.4513V5.96047C17.2673 6.04328 17.2839 6.12521 17.316 6.20157C17.348 6.27794 17.3948 6.34725 17.4536 6.40554C17.5124 6.46383 17.5821 6.50997 17.6588 6.54132C17.7354 6.57266 17.8175 6.58861 17.9003 6.58824C17.9831 6.58861 18.0652 6.57266 18.1418 6.54132C18.2185 6.50997 18.2882 6.46383 18.347 6.40554C18.4058 6.34725 18.4526 6.27794 18.4846 6.20157C18.5167 6.12521 18.5333 6.04328 18.5337 5.96047V3.4513C18.5337 2.06682 17.3968 0.941177 16.0001 0.941177ZM18.7408 26.3492C18.6541 26.2059 18.5148 26.1022 18.3527 26.0601C18.1905 26.0181 18.0184 26.0411 17.873 26.1242C17.8013 26.1655 17.7385 26.2206 17.6883 26.2863C17.638 26.3521 17.6013 26.4271 17.5803 26.5072C17.5593 26.5872 17.5544 26.6706 17.5658 26.7525C17.5773 26.8344 17.6049 26.9133 17.6471 26.9845C17.8109 27.2612 17.9012 27.5944 17.9012 27.9219C17.9012 28.9591 17.0485 29.8042 16.001 29.8042C15.4998 29.8057 15.0184 29.6084 14.6623 29.2556C14.3063 28.9027 14.1047 28.4231 14.1017 27.9219C14.1017 27.5944 14.1911 27.2612 14.3558 26.9845C14.3978 26.9132 14.4252 26.8344 14.4365 26.7525C14.4479 26.6706 14.4429 26.5873 14.4219 26.5074C14.4009 26.4274 14.3643 26.3524 14.3142 26.2866C14.2641 26.2209 14.2015 26.1657 14.1299 26.1242C13.9846 26.0403 13.8121 26.0169 13.6496 26.059C13.4871 26.101 13.3476 26.2053 13.2612 26.3492C12.9807 26.8255 12.8328 27.3682 12.833 27.9209C12.833 29.6527 14.2542 31.0588 16.0001 31.0588C17.7469 31.0588 19.1662 29.6518 19.169 27.9219C19.169 27.3666 19.0212 26.8235 18.7408 26.3492Z", fill: "currentColor" })] }));
3
+ export default NotificationsIcon;
package/dist/es/index.js CHANGED
@@ -47,7 +47,7 @@ export * from './components/Text';
47
47
  export * from './components/RelativeDate';
48
48
  export * from './components/Menus';
49
49
  export * from './components/Drawer';
50
- export * from './components/DatePicker';
50
+ export * from './components/DateInput';
51
51
  export * from './components/SelectField';
52
52
  export * from './components/SelectedItemsBox';
53
53
  export * from './components/ExpandableSection';
package/dist/types/components/DateInput.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ /*!
2
+ * © 2026 Atypon Systems LLC
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+ import React from 'react';
17
+ export interface BaseDateInputProps {
18
+ error?: boolean | string;
19
+ variant?: 'small' | 'large';
20
+ }
21
+ export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>, BaseDateInputProps {
22
+ }
23
+ export declare const DateInput: React.FC<DateInputProps>;
24
+ export declare const DateTimeInput: React.FC<DateInputProps>;
package/dist/types/components/DatePicker.d.ts CHANGED
@@ -1,28 +0,0 @@
1
- /*!
2
- * © 2026 Atypon Systems LLC
3
- *
4
- * Licensed under the Apache License, Version 2.0 (the "License");
5
- * you may not use this file except in compliance with the License.
6
- * You may obtain a copy of the License at
7
- *
8
- * http://www.apache.org/licenses/LICENSE-2.0
9
- *
10
- * Unless required by applicable law or agreed to in writing, software
11
- * distributed under the License is distributed on an "AS IS" BASIS,
12
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- * See the License for the specific language governing permissions and
14
- * limitations under the License.
15
- */
16
- import 'react-datepicker/dist/react-datepicker.css';
17
- import React from 'react';
18
- export interface DatePickerProps {
19
- id?: string;
20
- date?: Date;
21
- originalDate?: Date;
22
- handleDateChange: (date: Date | null) => void;
23
- placeholder?: string;
24
- showTimeSelect?: boolean;
25
- required?: boolean;
26
- disabled?: boolean;
27
- }
28
- export declare const DatePicker: React.FC<DatePickerProps>;
package/dist/types/components/icons/index.d.ts CHANGED
@@ -134,4 +134,5 @@ export { default as AddInstitutionIcon } from './add-institution';
134
134
  export { default as DangerIcon } from './danger';
135
135
  export { default as XIcon } from './x';
136
136
  export { default as EyeIcon } from './eye-icon';
137
+ export { default as NotificationsIcon } from './notifications';
137
138
  export { default as PencilIcon } from './pencil-icon';
package/dist/types/components/icons/notifications.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IconProps } from './types';
3
+ declare const NotificationsIcon: React.FC<IconProps>;
4
+ export default NotificationsIcon;
package/dist/types/index.d.ts CHANGED
@@ -48,7 +48,7 @@ export * from './components/Text';
48
48
  export * from './components/RelativeDate';
49
49
  export * from './components/Menus';
50
50
  export * from './components/Drawer';
51
- export * from './components/DatePicker';
51
+ export * from './components/DateInput';
52
52
  export * from './components/SelectField';
53
53
  export * from './components/SelectedItemsBox';
54
54
  export * from './components/ExpandableSection';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "3.5.28",
4
+ "version": "3.5.30",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -45,7 +45,6 @@
45
45
  "prosemirror-state": "1.4.3",
46
46
  "prosemirror-view": "1.41.0",
47
47
  "react": "19.2.0",
48
- "react-datepicker": "^7.6.0",
49
48
  "react-dnd": "16.0.1",
50
49
  "react-dnd-html5-backend": "16.0.1",
51
50
  "react-dom": "19.2.0",
@@ -75,7 +74,6 @@
75
74
  "@types/lodash": "4.17.16",
76
75
  "@types/node": "^20.19.25",
77
76
  "@types/react": "19.2.3",
78
- "@types/react-datepicker": "^7.0.0",
79
77
  "@types/react-dom": "19.2.3",
80
78
  "@types/react-router-dom": "5.3.3",
81
79
  "@types/styled-components": "5.1.34",