@citygross/components 0.7.1 → 0.7.5

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 (36) hide show
  1. package/build/@types/components/DeliverySlotItem/DeliverySlotItem.d.ts +1 -2
  2. package/build/@types/components/DeliveryTimeBlock/DeliveryTimeBlock.d.ts +1 -2
  3. package/build/@types/components/DeliveryTimeBlock/DeliveryTimeBlock.stories.d.ts +1 -2
  4. package/build/@types/components/FormElements/Input/Input.d.ts +1 -1
  5. package/build/@types/components/FormElements/Input/Input.styles.d.ts +1 -4
  6. package/build/@types/components/FormElements/TextArea/TextArea.d.ts +1 -1
  7. package/build/@types/components/FormElements/TextArea/TextArea.styles.d.ts +9 -10
  8. package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js +7 -6
  9. package/build/cjs/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
  10. package/build/cjs/components/src/components/DeliveryTimeBlock/DeliveryTimeBlock.js +14 -12
  11. package/build/cjs/components/src/components/DeliveryTimeBlock/DeliveryTimeBlock.js.map +1 -1
  12. package/build/cjs/components/src/components/FormElements/Input/Input.js +3 -2
  13. package/build/cjs/components/src/components/FormElements/Input/Input.js.map +1 -1
  14. package/build/cjs/components/src/components/FormElements/Input/Input.styles.js +2 -3
  15. package/build/cjs/components/src/components/FormElements/Input/Input.styles.js.map +1 -1
  16. package/build/cjs/components/src/components/FormElements/TextArea/TextArea.js +3 -2
  17. package/build/cjs/components/src/components/FormElements/TextArea/TextArea.js.map +1 -1
  18. package/build/cjs/components/src/components/FormElements/TextArea/TextArea.styles.js +6 -10
  19. package/build/cjs/components/src/components/FormElements/TextArea/TextArea.styles.js.map +1 -1
  20. package/build/cjs/design-tokens/build/index.js +3 -2
  21. package/build/cjs/design-tokens/build/index.js.map +1 -1
  22. package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js +7 -6
  23. package/build/es/components/src/components/DeliverySlotItem/DeliverySlotItem.js.map +1 -1
  24. package/build/es/components/src/components/DeliveryTimeBlock/DeliveryTimeBlock.js +14 -12
  25. package/build/es/components/src/components/DeliveryTimeBlock/DeliveryTimeBlock.js.map +1 -1
  26. package/build/es/components/src/components/FormElements/Input/Input.js +3 -2
  27. package/build/es/components/src/components/FormElements/Input/Input.js.map +1 -1
  28. package/build/es/components/src/components/FormElements/Input/Input.styles.js +2 -3
  29. package/build/es/components/src/components/FormElements/Input/Input.styles.js.map +1 -1
  30. package/build/es/components/src/components/FormElements/TextArea/TextArea.js +3 -2
  31. package/build/es/components/src/components/FormElements/TextArea/TextArea.js.map +1 -1
  32. package/build/es/components/src/components/FormElements/TextArea/TextArea.styles.js +7 -11
  33. package/build/es/components/src/components/FormElements/TextArea/TextArea.styles.js.map +1 -1
  34. package/build/es/design-tokens/build/index.js +3 -2
  35. package/build/es/design-tokens/build/index.js.map +1 -1
  36. package/package.json +4 -4
@@ -1,7 +1,6 @@
1
1
  /// <reference types="react" />
2
- import moment from 'moment';
3
2
  export declare type TDeliverySlotItem = {
4
- date: moment.Moment;
3
+ date: string;
5
4
  selected: boolean;
6
5
  disabledLabel?: string;
7
6
  showWarningIndicator?: boolean;
@@ -1,7 +1,6 @@
1
1
  import React from 'react';
2
- import moment from 'moment';
3
2
  export declare type TDeliveryTimeBlock = {
4
- deliveryDate: moment.Moment;
3
+ deliveryDate: string;
5
4
  deliveryFromTime?: string;
6
5
  deliveryToTime?: string;
7
6
  icon?: JSX.Element;
@@ -1,12 +1,11 @@
1
1
  import { Story } from '@storybook/react';
2
2
  import { DeliveryTimeBlock, TDeliveryTimeBlock } from './DeliveryTimeBlock';
3
- import { moment } from '@citygross/utils';
4
3
  declare const _default: {
5
4
  component: typeof DeliveryTimeBlock;
6
5
  title: string;
7
6
  args: {
8
7
  deliverOption: string;
9
- deliveryDate: moment.Moment;
8
+ deliveryDate: string;
10
9
  deliveryFromTime: string;
11
10
  deliveryToTime: string;
12
11
  localTimeVar: string;
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import * as styles from './Input.styles';
3
- export declare function Input({ flexGrow, name, type, placeholder, isValid, onChange }: styles.InputProps): JSX.Element;
3
+ export declare function Input({ flexGrow, isValid, fontSize, ...props }: styles.InputProps): JSX.Element;
@@ -3,8 +3,5 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
3
3
  readonly isValid?: boolean;
4
4
  flexGrow?: number;
5
5
  fontSize?: number;
6
- name: string;
7
- type?: string;
8
- placeholder?: string;
9
6
  }
10
- export declare const Input: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLInputElement, import("framer-motion").HTMLMotionProps<"input">>, import("styled-components").DefaultTheme, InputProps, never>;
7
+ export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputProps, never>;
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import * as styles from './TextArea.styles';
3
- export declare function TextArea({ screenWidth, flexGrow, placeholder }: styles.TextAreaProps): JSX.Element;
3
+ export declare function TextArea({ flexGrow, fontSize, ...props }: styles.TextAreaProps): JSX.Element;
@@ -1,12 +1,11 @@
1
1
  import { TextareaHTMLAttributes } from 'react';
2
- export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
3
- flexGrow?: number;
4
- screenWidth?: TScreenWidth;
2
+ export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
5
3
  fontSize?: number;
6
- }
7
- export declare enum TScreenWidth {
8
- '1/2' = "calc(50% - 12px)",
9
- '1/3' = "calc(33% - 12px)",
10
- '1/4' = "calc(25% - 12px)"
11
- }
12
- export declare const TextArea: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLTextAreaElement, import("framer-motion").HTMLMotionProps<"textarea">>, import("styled-components").DefaultTheme, TextAreaProps, never>;
4
+ flexGrow?: number;
5
+ value?: string;
6
+ };
7
+ export declare const TextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & {
8
+ fontSize?: number | undefined;
9
+ flexGrow?: number | undefined;
10
+ value?: string | undefined;
11
+ }, never>;
@@ -3,11 +3,11 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var DeliverySlotItem_styles = require('./DeliverySlotItem.styles.js');
7
- var typography = require('@citygross/typography');
8
- var DotIndicator = require('../DotIndicator/DotIndicator.js');
9
6
  var designTokens = require('@citygross/design-tokens');
10
7
  var utils = require('@citygross/utils');
8
+ var typography = require('@citygross/typography');
9
+ var DeliverySlotItem_styles = require('./DeliverySlotItem.styles.js');
10
+ var DotIndicator = require('../DotIndicator/DotIndicator.js');
11
11
 
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
13
 
@@ -16,10 +16,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
16
  function DeliverySlotItem(_a) {
17
17
  var _b;
18
18
  var date = _a.date, disabledLabel = _a.disabledLabel, showWarningIndicator = _a.showWarningIndicator, selected = _a.selected, onSelect = _a.onSelect;
19
+ var momentDate = utils.moment(date);
19
20
  var isMobile = utils.useDetectDevice().isMobile;
20
- var weekDay = date.format(isMobile ? 'ddd' : 'dddd').toLocaleLowerCase();
21
- var dayNumber = date.format('D');
22
- var month = date.format(isMobile ? 'MMM' : 'MMMM').toLocaleLowerCase();
21
+ var weekDay = momentDate.format(isMobile ? 'ddd' : 'dddd').toLocaleLowerCase();
22
+ var dayNumber = momentDate.format('D');
23
+ var month = momentDate.format(isMobile ? 'MMM' : 'MMMM').toLocaleLowerCase();
23
24
  var disabled = disabledLabel !== undefined;
24
25
  var slotRef = React.useRef(null);
25
26
  var _c = React.useState(false), isVisible = _c[0], setIsVisible = _c[1];
@@ -1 +1 @@
1
- {"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
+ var utils = require('@citygross/utils');
6
7
  var typography = require('@citygross/typography');
7
8
  var DeliveryTimeBlock_styles = require('./DeliveryTimeBlock.styles.js');
8
9
 
@@ -12,25 +13,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
13
 
13
14
  function DeliveryTimeBlock(_a) {
14
15
  var deliveryDate = _a.deliveryDate, deliveryFromTime = _a.deliveryFromTime, deliveryToTime = _a.deliveryToTime, icon = _a.icon, _b = _a.localTimeVar, localTimeVar = _b === void 0 ? 'kl' : _b, deliverOption = _a.deliverOption, children = _a.children;
15
- var day = deliveryDate.format('dddd');
16
+ var momentDeliveryDate = utils.moment(deliveryDate);
17
+ var day = momentDeliveryDate.format('dddd');
16
18
  day = day.slice(0, 1).toLocaleUpperCase() + day.slice(1);
17
- var date = deliveryDate.format('Do');
18
- var month = deliveryDate.format('MMMM');
19
+ var date = momentDeliveryDate.format('D');
20
+ var month = momentDeliveryDate.format('MMMM');
19
21
  month = month.slice(0, 1).toLocaleUpperCase() + month.slice(1);
20
22
  return (React__default['default'].createElement(DeliveryTimeBlock_styles.DeliveryTimeBlock, null,
21
23
  React__default['default'].createElement(DeliveryTimeBlock_styles.DeliverOption, null,
22
24
  icon && icon,
23
25
  deliverOption && React__default['default'].createElement(typography.H3, null, deliverOption)),
24
26
  React__default['default'].createElement(typography.BodyText, null,
25
- day,
26
- " ",
27
- date,
28
- " ",
29
- month,
30
- ' ',
31
- deliveryFromTime &&
32
- deliveryToTime &&
33
- localTimeVar + " " + deliveryFromTime + " - " + deliveryToTime),
27
+ React__default['default'].createElement("div", null,
28
+ day,
29
+ " ",
30
+ date,
31
+ " ",
32
+ month,
33
+ ' ',
34
+ deliveryFromTime && deliveryToTime && localTimeVar + " ",
35
+ React__default['default'].createElement("span", { style: { whiteSpace: 'nowrap' } }, deliveryFromTime + " - " + deliveryToTime))),
34
36
  children));
35
37
  }
36
38
 
@@ -1 +1 @@
1
- {"version":3,"file":"DeliveryTimeBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"DeliveryTimeBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _tslib = require('../../../../../_virtual/_tslib.js');
5
6
  var Input_styles = require('./Input.styles.js');
6
7
  var React = require('react');
7
8
 
@@ -10,8 +11,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
12
 
12
13
  function Input(_a) {
13
- var flexGrow = _a.flexGrow, name = _a.name, _b = _a.type, type = _b === void 0 ? 'text' : _b, placeholder = _a.placeholder, isValid = _a.isValid, onChange = _a.onChange;
14
- return (React__default['default'].createElement(Input_styles.Input, { flexGrow: flexGrow, whileHover: { scale: 1.1 }, whileFocus: { scale: 1.1 }, placeholder: placeholder, name: name, type: type, isValid: isValid, onChange: onChange }));
14
+ var flexGrow = _a.flexGrow, isValid = _a.isValid, fontSize = _a.fontSize, props = _tslib.__rest(_a, ["flexGrow", "isValid", "fontSize"]);
15
+ return (React__default['default'].createElement(Input_styles.Input, _tslib.__assign({ flexGrow: flexGrow, fontSize: fontSize, isValid: isValid }, props)));
15
16
  }
16
17
 
17
18
  exports.Input = Input;
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
@@ -3,21 +3,20 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _tslib = require('../../../../../_virtual/_tslib.js');
6
- var framerMotion = require('framer-motion');
7
6
  var styled = require('styled-components');
8
7
 
9
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
9
 
11
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
11
 
13
- var Input = styled__default['default'](framerMotion.motion.input)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", ";\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n\n &:focus {\n border: 1px solid ", ";\n box-shadow: 0 2px 5px ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"], ["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", ";\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n\n &:focus {\n border: 1px solid ", ";\n box-shadow: 0 2px 5px ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
12
+ var Input = styled__default['default'].input(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", ";\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n transition: ", ";\n\n &:focus,\n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus {\n box-shadow: ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"], ["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", ";\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n transition: ", ";\n\n &:focus,\n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus {\n box-shadow: ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
14
13
  var _a, _b, _c, _d;
15
14
  return props.disabled
16
15
  ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
17
16
  : (props === null || props === void 0 ? void 0 : props.isValid) === false
18
17
  ? 'red'
19
18
  : (_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.dark;
20
- }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm) + "px"; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.boxShadowActive; }, function (props) {
19
+ }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm) + "px"; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition.inputTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) {
21
20
  var _a, _b, _c, _d;
22
21
  return props.disabled
23
22
  ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _tslib = require('../../../../../_virtual/_tslib.js');
5
6
  var TextArea_styles = require('./TextArea.styles.js');
6
7
  var React = require('react');
7
8
 
@@ -10,8 +11,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
12
 
12
13
  function TextArea(_a) {
13
- var screenWidth = _a.screenWidth, flexGrow = _a.flexGrow, placeholder = _a.placeholder;
14
- return (React__default['default'].createElement(TextArea_styles.TextArea, { placeholder: placeholder, screenWidth: screenWidth, flexGrow: flexGrow, whileHover: { scaleY: 1.1 }, whileFocus: { scaleY: 1.1 } }));
14
+ var flexGrow = _a.flexGrow, fontSize = _a.fontSize, props = _tslib.__rest(_a, ["flexGrow", "fontSize"]);
15
+ return React__default['default'].createElement(TextArea_styles.TextArea, _tslib.__assign({}, props, { flexGrow: flexGrow, fontSize: fontSize }));
15
16
  }
16
17
 
17
18
  exports.TextArea = TextArea;
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"TextArea.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
@@ -3,27 +3,23 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _tslib = require('../../../../../_virtual/_tslib.js');
6
- var framerMotion = require('framer-motion');
7
6
  var styled = require('styled-components');
8
7
 
9
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
9
 
11
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
11
 
13
- exports.TScreenWidth = void 0;
14
- (function (TScreenWidth) {
15
- TScreenWidth["1/2"] = "calc(50% - 12px)";
16
- TScreenWidth["1/3"] = "calc(33% - 12px)";
17
- TScreenWidth["1/4"] = "calc(25% - 12px)";
18
- })(exports.TScreenWidth || (exports.TScreenWidth = {}));
19
- var TextArea = styled__default['default'](framerMotion.motion.textarea)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", "px;\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n height: ", "px;\n\n @media (min-width: ", "px) {\n ", ";\n }\n\n &:focus {\n border: 1px solid ", ";\n box-shadow: 0 2px 5px ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"], ["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", "px;\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n height: ", "px;\n\n @media (min-width: ", "px) {\n ", ";\n }\n\n &:focus {\n border: 1px solid ", ";\n box-shadow: 0 2px 5px ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
12
+ var TextArea = styled__default['default'].textarea(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n z-index: 2;\n border: 1px solid\n ", ";\n outline: none;\n padding: ", "px;\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n resize: vertical;\n height: ", "px;\n\n width: 100%;\n ", ";\n\n transition: ", ";\n\n &:focus,\n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus {\n box-shadow: 0 1px 5px rgb(0, 0, 0, 0.35);\n }\n\n ::placeholder {\n color: ", ";\n }\n"], ["\n z-index: 2;\n border: 1px solid\n ", ";\n outline: none;\n padding: ", "px;\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n resize: vertical;\n height: ", "px;\n\n width: 100%;\n ", ";\n\n transition: ", ";\n\n &:focus,\n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus {\n box-shadow: 0 1px 5px rgb(0, 0, 0, 0.35);\n }\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
20
13
  var _a, _b, _c, _d;
21
14
  return props.disabled
22
15
  ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
23
16
  : (_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.dark;
24
17
  }, function (props) { var _a, _b, _c, _d; return ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs) + 'px' + ' ' + ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.spacings) === null || _d === void 0 ? void 0 : _d.sm); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) {
25
- return props.theme.typography ? props.theme.typography.size.s2 + 27 : 40;
26
- }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.screenWidth && "max-width: " + props.screenWidth; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.boxShadowActive; }, function (props) {
18
+ var _a, _b, _c, _d, _e;
19
+ return props.theme.typography &&
20
+ ((_c = (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3) +
21
+ ((_e = (_d = props === null || props === void 0 ? void 0 : props.theme.typography) === null || _d === void 0 ? void 0 : _d.lineHeight) === null || _e === void 0 ? void 0 : _e.m2);
22
+ }, function (props) { return props.flexGrow && "flex: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition.inputTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) {
27
23
  var _a, _b, _c, _d;
28
24
  return props.disabled
29
25
  ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"TextArea.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -18,7 +18,7 @@ var attributes = {
18
18
  hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',
19
19
  buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',
20
20
  buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',
21
- iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)'
21
+ iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',
22
22
  },
23
23
  zIndex: {
24
24
  modal: 5,
@@ -28,7 +28,8 @@ var attributes = {
28
28
  low: 1
29
29
  },
30
30
  transition: {
31
- t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)'
31
+ t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',
32
+ inputTransition: 'box-shadow 250ms ease'
32
33
  }
33
34
  };
34
35
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n infoBlockImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n infoBlockImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}
@@ -1,17 +1,18 @@
1
1
  import React, { useRef, useState, useEffect } from 'react';
2
- import { DeliverySlotItemContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotContainer, DeliverySlotBody, DisabledLabel, DotContainer } from './DeliverySlotItem.styles.js';
2
+ import { theme } from '@citygross/design-tokens';
3
+ import { moment, useDetectDevice } from '@citygross/utils';
3
4
  import { BodyText, H2, TextTypes } from '@citygross/typography';
5
+ import { DeliverySlotItemContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotContainer, DeliverySlotBody, DisabledLabel, DotContainer } from './DeliverySlotItem.styles.js';
4
6
  import { Dot } from '../DotIndicator/DotIndicator.js';
5
- import { theme } from '@citygross/design-tokens';
6
- import { useDetectDevice } from '@citygross/utils';
7
7
 
8
8
  function DeliverySlotItem(_a) {
9
9
  var _b;
10
10
  var date = _a.date, disabledLabel = _a.disabledLabel, showWarningIndicator = _a.showWarningIndicator, selected = _a.selected, onSelect = _a.onSelect;
11
+ var momentDate = moment(date);
11
12
  var isMobile = useDetectDevice().isMobile;
12
- var weekDay = date.format(isMobile ? 'ddd' : 'dddd').toLocaleLowerCase();
13
- var dayNumber = date.format('D');
14
- var month = date.format(isMobile ? 'MMM' : 'MMMM').toLocaleLowerCase();
13
+ var weekDay = momentDate.format(isMobile ? 'ddd' : 'dddd').toLocaleLowerCase();
14
+ var dayNumber = momentDate.format('D');
15
+ var month = momentDate.format(isMobile ? 'MMM' : 'MMMM').toLocaleLowerCase();
15
16
  var disabled = disabledLabel !== undefined;
16
17
  var slotRef = useRef(null);
17
18
  var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
@@ -1 +1 @@
1
- {"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"DeliverySlotItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,28 +1,30 @@
1
1
  import React from 'react';
2
+ import { moment } from '@citygross/utils';
2
3
  import { H3, BodyText } from '@citygross/typography';
3
4
  import { DeliveryTimeBlock as DeliveryTimeBlock$1, DeliverOption } from './DeliveryTimeBlock.styles.js';
4
5
 
5
6
  function DeliveryTimeBlock(_a) {
6
7
  var deliveryDate = _a.deliveryDate, deliveryFromTime = _a.deliveryFromTime, deliveryToTime = _a.deliveryToTime, icon = _a.icon, _b = _a.localTimeVar, localTimeVar = _b === void 0 ? 'kl' : _b, deliverOption = _a.deliverOption, children = _a.children;
7
- var day = deliveryDate.format('dddd');
8
+ var momentDeliveryDate = moment(deliveryDate);
9
+ var day = momentDeliveryDate.format('dddd');
8
10
  day = day.slice(0, 1).toLocaleUpperCase() + day.slice(1);
9
- var date = deliveryDate.format('Do');
10
- var month = deliveryDate.format('MMMM');
11
+ var date = momentDeliveryDate.format('D');
12
+ var month = momentDeliveryDate.format('MMMM');
11
13
  month = month.slice(0, 1).toLocaleUpperCase() + month.slice(1);
12
14
  return (React.createElement(DeliveryTimeBlock$1, null,
13
15
  React.createElement(DeliverOption, null,
14
16
  icon && icon,
15
17
  deliverOption && React.createElement(H3, null, deliverOption)),
16
18
  React.createElement(BodyText, null,
17
- day,
18
- " ",
19
- date,
20
- " ",
21
- month,
22
- ' ',
23
- deliveryFromTime &&
24
- deliveryToTime &&
25
- localTimeVar + " " + deliveryFromTime + " - " + deliveryToTime),
19
+ React.createElement("div", null,
20
+ day,
21
+ " ",
22
+ date,
23
+ " ",
24
+ month,
25
+ ' ',
26
+ deliveryFromTime && deliveryToTime && localTimeVar + " ",
27
+ React.createElement("span", { style: { whiteSpace: 'nowrap' } }, deliveryFromTime + " - " + deliveryToTime))),
26
28
  children));
27
29
  }
28
30
 
@@ -1 +1 @@
1
- {"version":3,"file":"DeliveryTimeBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"DeliveryTimeBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,9 +1,10 @@
1
+ import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
1
2
  import { Input as Input$1 } from './Input.styles.js';
2
3
  import React from 'react';
3
4
 
4
5
  function Input(_a) {
5
- var flexGrow = _a.flexGrow, name = _a.name, _b = _a.type, type = _b === void 0 ? 'text' : _b, placeholder = _a.placeholder, isValid = _a.isValid, onChange = _a.onChange;
6
- return (React.createElement(Input$1, { flexGrow: flexGrow, whileHover: { scale: 1.1 }, whileFocus: { scale: 1.1 }, placeholder: placeholder, name: name, type: type, isValid: isValid, onChange: onChange }));
6
+ var flexGrow = _a.flexGrow, isValid = _a.isValid, fontSize = _a.fontSize, props = __rest(_a, ["flexGrow", "isValid", "fontSize"]);
7
+ return (React.createElement(Input$1, __assign({ flexGrow: flexGrow, fontSize: fontSize, isValid: isValid }, props)));
7
8
  }
8
9
 
9
10
  export { Input };
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
1
+ {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
@@ -1,15 +1,14 @@
1
1
  import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
2
- import { motion } from 'framer-motion';
3
2
  import styled from 'styled-components';
4
3
 
5
- var Input = styled(motion.input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", ";\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n\n &:focus {\n border: 1px solid ", ";\n box-shadow: 0 2px 5px ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"], ["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", ";\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n\n &:focus {\n border: 1px solid ", ";\n box-shadow: 0 2px 5px ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
4
+ var Input = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", ";\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n transition: ", ";\n\n &:focus,\n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus {\n box-shadow: ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"], ["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", ";\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n transition: ", ";\n\n &:focus,\n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus {\n box-shadow: ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
6
5
  var _a, _b, _c, _d;
7
6
  return props.disabled
8
7
  ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
9
8
  : (props === null || props === void 0 ? void 0 : props.isValid) === false
10
9
  ? 'red'
11
10
  : (_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.dark;
12
- }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm) + "px"; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.boxShadowActive; }, function (props) {
11
+ }, function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm) + "px"; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition.inputTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) {
13
12
  var _a, _b, _c, _d;
14
13
  return props.disabled
15
14
  ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
@@ -1,9 +1,10 @@
1
+ import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
1
2
  import { TextArea as TextArea$1 } from './TextArea.styles.js';
2
3
  import React from 'react';
3
4
 
4
5
  function TextArea(_a) {
5
- var screenWidth = _a.screenWidth, flexGrow = _a.flexGrow, placeholder = _a.placeholder;
6
- return (React.createElement(TextArea$1, { placeholder: placeholder, screenWidth: screenWidth, flexGrow: flexGrow, whileHover: { scaleY: 1.1 }, whileFocus: { scaleY: 1.1 } }));
6
+ var flexGrow = _a.flexGrow, fontSize = _a.fontSize, props = __rest(_a, ["flexGrow", "fontSize"]);
7
+ return React.createElement(TextArea$1, __assign({}, props, { flexGrow: flexGrow, fontSize: fontSize }));
7
8
  }
8
9
 
9
10
  export { TextArea };
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
1
+ {"version":3,"file":"TextArea.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
@@ -1,21 +1,17 @@
1
1
  import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
2
- import { motion } from 'framer-motion';
3
2
  import styled from 'styled-components';
4
3
 
5
- var TScreenWidth;
6
- (function (TScreenWidth) {
7
- TScreenWidth["1/2"] = "calc(50% - 12px)";
8
- TScreenWidth["1/3"] = "calc(33% - 12px)";
9
- TScreenWidth["1/4"] = "calc(25% - 12px)";
10
- })(TScreenWidth || (TScreenWidth = {}));
11
- var TextArea = styled(motion.textarea)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", "px;\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n height: ", "px;\n\n @media (min-width: ", "px) {\n ", ";\n }\n\n &:focus {\n border: 1px solid ", ";\n box-shadow: 0 2px 5px ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"], ["\n border: 1px solid\n ", ";\n outline: none;\n padding: ", "px;\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n height: ", "px;\n\n @media (min-width: ", "px) {\n ", ";\n }\n\n &:focus {\n border: 1px solid ", ";\n box-shadow: 0 2px 5px ", ";\n }\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
4
+ var TextArea = styled.textarea(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n z-index: 2;\n border: 1px solid\n ", ";\n outline: none;\n padding: ", "px;\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n resize: vertical;\n height: ", "px;\n\n width: 100%;\n ", ";\n\n transition: ", ";\n\n &:focus,\n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus {\n box-shadow: 0 1px 5px rgb(0, 0, 0, 0.35);\n }\n\n ::placeholder {\n color: ", ";\n }\n"], ["\n z-index: 2;\n border: 1px solid\n ", ";\n outline: none;\n padding: ", "px;\n border-radius: 2px;\n background: ", ";\n color: ", ";\n flex-grow: ", ";\n font-size: ", "px;\n resize: vertical;\n height: ", "px;\n\n width: 100%;\n ", ";\n\n transition: ", ";\n\n &:focus,\n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus {\n box-shadow: 0 1px 5px rgb(0, 0, 0, 0.35);\n }\n\n ::placeholder {\n color: ", ";\n }\n"])), function (props) {
12
5
  var _a, _b, _c, _d;
13
6
  return props.disabled
14
7
  ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
15
8
  : (_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.dark;
16
9
  }, function (props) { var _a, _b, _c, _d; return ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs) + 'px' + ' ' + ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.spacings) === null || _d === void 0 ? void 0 : _d.sm); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.darkest; }, function (props) { var _a; return (_a = props.flexGrow) !== null && _a !== void 0 ? _a : 1; }, function (props) { var _a, _b, _c; return props.fontSize ? props.fontSize : (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3; }, function (props) {
17
- return props.theme.typography ? props.theme.typography.size.s2 + 27 : 40;
18
- }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.screenWidth && "max-width: " + props.screenWidth; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.boxShadowActive; }, function (props) {
10
+ var _a, _b, _c, _d, _e;
11
+ return props.theme.typography &&
12
+ ((_c = (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3) +
13
+ ((_e = (_d = props === null || props === void 0 ? void 0 : props.theme.typography) === null || _d === void 0 ? void 0 : _d.lineHeight) === null || _e === void 0 ? void 0 : _e.m2);
14
+ }, function (props) { return props.flexGrow && "flex: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition.inputTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) {
19
15
  var _a, _b, _c, _d;
20
16
  return props.disabled
21
17
  ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium
@@ -23,5 +19,5 @@ var TextArea = styled(motion.textarea)(templateObject_1 || (templateObject_1 = _
23
19
  });
24
20
  var templateObject_1;
25
21
 
26
- export { TScreenWidth, TextArea };
22
+ export { TextArea };
27
23
  //# sourceMappingURL=TextArea.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"TextArea.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
@@ -15,7 +15,7 @@ var attributes = {
15
15
  hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',
16
16
  buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',
17
17
  buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',
18
- iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)'
18
+ iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',
19
19
  },
20
20
  zIndex: {
21
21
  modal: 5,
@@ -25,7 +25,8 @@ var attributes = {
25
25
  low: 1
26
26
  },
27
27
  transition: {
28
- t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)'
28
+ t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',
29
+ inputTransition: 'box-shadow 250ms ease'
29
30
  }
30
31
  };
31
32
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)'\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n infoBlockImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n borderRadius: {\n extraSmall: 2,\n small: 5,\n default: 10,\n big: 20\n },\n boxShadow: {\n small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n },\n zIndex: {\n modal: 5,\n footer: 4,\n high: 3,\n middle: 2,\n low: 1\n },\n transition: {\n t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n inputTransition: 'box-shadow 250ms ease'\n }\n};\n\nvar breakpoints = {\n xs: 480,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1400\n};\n\nvar constants = {\n headerScrollFadeRange: 50,\n modalContainerMaxWidth: 615,\n modalConfirmMaxWidth: 480,\n pageContainerMaxWidth: 776,\n twoColumnsContainerMaxWidth: 1024,\n deliverySlotItemWidth: 80,\n deliverySlotItemWidthDesktop: 120,\n itemGap: 2,\n infoBlockImageMaxWidth: 64,\n infoBlockImageMaxWidthDesktop: 100,\n chipCheckBox: 12\n};\n\nvar palette = {\n // pallette same as brand colors\n primary: '#FFE522',\n secondary: '#0069AE',\n // brand colors\n brandYellow: '#FFE522',\n brandBlue: '#0069AE',\n brandPurple: '#A71680',\n // shades\n yellowLighter: '#FFFBE7',\n yellowLight: '#FFF7D1',\n blueLight: '#ECF7FE',\n blueMedium: '#92B9D3',\n greenLight: '#F2FDF2',\n greenMedium: '#BEE5BE',\n // link same as alert blue\n link: '#0072BB',\n // black / white\n white: '#FFFFFF',\n black: '#000000',\n // grayscale\n lightest: '#F7F7F7',\n lighter: '#F1F1F1',\n light: '#E8E8E8',\n medium: '#DBDBDB',\n dark: '#979797',\n darker: '#4A4A4A',\n darkest: '#333333',\n border: '#0069AE',\n boxShadow: '#E1E1E1',\n boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n // Alerts\n alertRed: '#E02721',\n alertBlue: '#0072BB',\n alertGreen: '#3F9A3C',\n // overlay\n darkOverlay: 'rgba(0, 0, 0, 0.6)',\n // transparent\n transparent: '#ffffff00',\n none: 'none'\n};\n\nvar spacings = {\n xxs: 4,\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n xxl: 56\n // More in figma, but talk with Johan to generalize it more.\n // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n type: {\n primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n },\n weight: {\n regular: '400',\n medium: '500',\n semiBold: '600',\n bold: '700'\n },\n size: {\n // s all from 0-20\n s1: 12,\n s2: 13,\n s3: 15,\n s4: 18,\n // m all from 21-40\n m1: 24,\n m2: 30,\n // l all from 41 >\n code: 90\n },\n lineHeight: {\n // s all from 0-20\n s1: 18,\n s2: 19,\n // m all from 21-40\n m1: 22,\n m2: 27,\n m3: 36,\n // l all from 41 >\n l1: 45\n }\n};\n\nvar animations = {\n tapScale: 0.9,\n hoverScale: 1.1,\n buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n return ({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n });\n};\nvar theme = createTheme({\n palette: palette,\n typography: typography,\n attributes: attributes,\n breakpoints: breakpoints,\n spacings: spacings,\n constants: constants,\n animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":";;;AAEA,MAAM,CAAC,cAAc,CAAC,KAAO,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9D;AACA,IAAI,UAAU,GAAG;AACjB,IAAI,YAAY,EAAE;AAClB,QAAQ,UAAU,EAAE,CAAC;AACrB,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,OAAO,EAAE,EAAE;AACnB,QAAQ,GAAG,EAAE,EAAE;AACf,KAAK;AACL,IAAI,SAAS,EAAE;AACf,QAAQ,KAAK,EAAE,gCAAgC;AAC/C,QAAQ,KAAK,EAAE,gCAAgC;AAC/C,QAAQ,WAAW,EAAE,+BAA+B;AACpD,QAAQ,YAAY,EAAE,qCAAqC;AAC3D,QAAQ,eAAe,EAAE,+BAA+B;AACxD,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,MAAM,EAAE,CAAC;AACjB,QAAQ,IAAI,EAAE,CAAC;AACf,QAAQ,MAAM,EAAE,CAAC;AACjB,QAAQ,GAAG,EAAE,CAAC;AACd,KAAK;AACL,IAAI,UAAU,EAAE;AAChB,QAAQ,EAAE,EAAE,sCAAsC;AAClD,QAAQ,eAAe,EAAE,uBAAuB;AAChD,KAAK;AACL,CAAC,CAAC;AACF;AACA,IAAI,WAAW,GAAG;AAClB,IAAI,EAAE,EAAE,GAAG;AACX,IAAI,EAAE,EAAE,GAAG;AACX,IAAI,EAAE,EAAE,GAAG;AACX,IAAI,EAAE,EAAE,GAAG;AACX,IAAI,EAAE,EAAE,IAAI;AACZ,IAAI,GAAG,EAAE,IAAI;AACb,CAAC,CAAC;AACF;AACA,IAAI,SAAS,GAAG;AAChB,IAAI,qBAAqB,EAAE,EAAE;AAC7B,IAAI,sBAAsB,EAAE,GAAG;AAC/B,IAAI,oBAAoB,EAAE,GAAG;AAC7B,IAAI,qBAAqB,EAAE,GAAG;AAC9B,IAAI,2BAA2B,EAAE,IAAI;AACrC,IAAI,qBAAqB,EAAE,EAAE;AAC7B,IAAI,4BAA4B,EAAE,GAAG;AACrC,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,sBAAsB,EAAE,EAAE;AAC9B,IAAI,6BAA6B,EAAE,GAAG;AACtC,IAAI,YAAY,EAAE,EAAE;AACpB,CAAC,CAAC;AACF;AACA,IAAI,OAAO,GAAG;AACd;AACA,IAAI,OAAO,EAAE,SAAS;AACtB,IAAI,SAAS,EAAE,SAAS;AACxB;AACA,IAAI,WAAW,EAAE,SAAS;AAC1B,IAAI,SAAS,EAAE,SAAS;AACxB,IAAI,WAAW,EAAE,SAAS;AAC1B;AACA,IAAI,aAAa,EAAE,SAAS;AAC5B,IAAI,WAAW,EAAE,SAAS;AAC1B,IAAI,SAAS,EAAE,SAAS;AACxB,IAAI,UAAU,EAAE,SAAS;AACzB,IAAI,UAAU,EAAE,SAAS;AACzB,IAAI,WAAW,EAAE,SAAS;AAC1B;AACA,IAAI,IAAI,EAAE,SAAS;AACnB;AACA,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,KAAK,EAAE,SAAS;AACpB;AACA,IAAI,QAAQ,EAAE,SAAS;AACvB,IAAI,OAAO,EAAE,SAAS;AACtB,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,IAAI,EAAE,SAAS;AACnB,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,OAAO,EAAE,SAAS;AACtB,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,SAAS,EAAE,SAAS;AACxB,IAAI,eAAe,EAAE,uBAAuB;AAC5C;AACA,IAAI,QAAQ,EAAE,SAAS;AACvB,IAAI,SAAS,EAAE,SAAS;AACxB,IAAI,UAAU,EAAE,SAAS;AACzB;AACA,IAAI,WAAW,EAAE,oBAAoB;AACrC;AACA,IAAI,WAAW,EAAE,WAAW;AAC5B,IAAI,IAAI,EAAE,MAAM;AAChB,CAAC,CAAC;AACF;AACA,IAAI,QAAQ,GAAG;AACf,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,EAAE,EAAE,CAAC;AACT,IAAI,EAAE,EAAE,EAAE;AACV,IAAI,EAAE,EAAE,EAAE;AACV,IAAI,EAAE,EAAE,EAAE;AACV,IAAI,EAAE,EAAE,EAAE;AACV,IAAI,GAAG,EAAE,EAAE;AACX;AACA;AACA,CAAC,CAAC;AACF;AACA,IAAI,UAAU,GAAG;AACjB,IAAI,IAAI,EAAE;AACV,QAAQ,OAAO,EAAE,2DAA2D;AAC5E,QAAQ,IAAI,EAAE,0EAA0E;AACxF,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,QAAQ,OAAO,EAAE,KAAK;AACtB,QAAQ,MAAM,EAAE,KAAK;AACrB,QAAQ,QAAQ,EAAE,KAAK;AACvB,QAAQ,IAAI,EAAE,KAAK;AACnB,KAAK;AACL,IAAI,IAAI,EAAE;AACV;AACA,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd;AACA,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd;AACA,QAAQ,IAAI,EAAE,EAAE;AAChB,KAAK;AACL,IAAI,UAAU,EAAE;AAChB;AACA,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd;AACA,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd;AACA,QAAQ,EAAE,EAAE,EAAE;AACd,KAAK;AACL,CAAC,CAAC;AACF;AACA,IAAI,UAAU,GAAG;AACjB,IAAI,QAAQ,EAAE,GAAG;AACjB,IAAI,UAAU,EAAE,GAAG;AACnB,IAAI,gBAAgB,EAAE,8CAA8C;AACpE,IAAI,gBAAgB,EAAE,sCAAsC;AAC5D,CAAC,CAAC;AACF;AACA,IAAI,WAAW,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC;AACjM,IAAI,QAAQ;AACZ,QAAQ,OAAO,EAAE,OAAO;AACxB,QAAQ,UAAU,EAAE,UAAU;AAC9B,QAAQ,UAAU,EAAE,UAAU;AAC9B,QAAQ,WAAW,EAAE,WAAW;AAChC,QAAQ,QAAQ,EAAE,QAAQ;AAC1B,QAAQ,SAAS,EAAE,SAAS;AAC5B,QAAQ,UAAU,EAAE,UAAU;AAC9B,KAAK,EAAE;AACP,CAAC,CAAC;AACF,IAAI,KAAK,GAAG,WAAW,CAAC;AACxB,IAAI,OAAO,EAAE,OAAO;AACpB,IAAI,UAAU,EAAE,UAAU;AAC1B,IAAI,UAAU,EAAE,UAAU;AAC1B,IAAI,WAAW,EAAE,WAAW;AAC5B,IAAI,QAAQ,EAAE,QAAQ;AACtB,IAAI,SAAS,EAAE,SAAS;AACxB,IAAI,UAAU,EAAE,UAAU;AAC1B,CAAC,CAAC,CAAC;AACH;gBACkB,GAAG,WAAW;gBACd,GAAG,WAAW;iBACb,GAAG,YAAY;eACjB,GAAG,UAAU;aACf,GAAG,QAAQ;cACV,GAAG,SAAS;yBACf,GAAG,MAAM;gBACJ,GAAG;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.1",
3
+ "version": "0.7.5",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -62,13 +62,13 @@
62
62
  "styled-components": "^5.2.1"
63
63
  },
64
64
  "dependencies": {
65
- "@citygross/design-tokens": "^0.2.5",
65
+ "@citygross/design-tokens": "^0.2.6",
66
66
  "@citygross/icons": "^0.1.1",
67
- "@citygross/typography": "^0.0.32",
67
+ "@citygross/typography": "^0.0.33",
68
68
  "@citygross/utils": "^0.0.16",
69
69
  "framer-motion": "^4.1.17",
70
70
  "moment": "^2.29.1",
71
71
  "react-loading-skeleton": "^2.2.0"
72
72
  },
73
- "gitHead": "d5227c6d1c7fb89fdae8f6d001b3241e7132dcd6"
73
+ "gitHead": "6ca2fb8739792b28f4924bf7f4fdb9eb9ca71578"
74
74
  }