@citygross/components 0.7.61 → 0.7.62

package/build/@types/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/Badge/Badge';
 export * from './components/Box/Box';
 export * from './components/Button';
 export * from './components/BackButton/BackButton';
+export * from './components/Chips/Chip';
 export * from './components/CartItemSummary/CartItemSummary';
 export * from './components/CartSummary/CartSummary';
 export * from './components/CustomerInfoBlock/CustomerInfoBlock';

package/build/cjs/components/src/components/Chips/Chip.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Icon = require('@citygross/icons');
+var typography = require('@citygross/typography');
+var Chip_styles = require('./Chip.styles.js');
+var designTokens = require('@citygross/design-tokens');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Chip(_a) {
+    var _b, _c, _d, _e, _f;
+    var label = _a.label, checked = _a.checked, onClick = _a.onClick, _g = _a.background, background = _g === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter : _g, _h = _a.activeBackground, activeBackground = _h === void 0 ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white : _h;
+    return (React__default['default'].createElement(Chip_styles.BaseChip, { checked: checked, onClick: onClick, background: background, activeBackground: activeBackground, whileHover: { scale: (_d = designTokens.theme.animations) === null || _d === void 0 ? void 0 : _d.hoverScale }, whileTap: { scale: (_e = designTokens.theme.animations) === null || _e === void 0 ? void 0 : _e.tapScale } },
+        checked
+            ? (React__default['default'].createElement(Icon.Icons.CheckMark, { color: (_f = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _f === void 0 ? void 0 : _f.alertGreen, width: 12, height: 12, viewBox: '0 0 25 25' }))
+            : (React__default['default'].createElement(Chip_styles.ChipCheckbox, null)),
+        React__default['default'].createElement(Chip_styles.ChipLabel, { forwardedAs: 'label', size: typography.TextTypes.TextSize.SMALL }, label)));
+}
+
+exports.Chip = Chip;
+//# sourceMappingURL=Chip.js.map

package/build/cjs/components/src/components/Chips/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/Chips/Chip.styles.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+var typography = require('@citygross/typography');
+var framerMotion = require('framer-motion');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var BaseChip = styled__default['default'](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) {
+    return props.checked
+        ? props.activeBackground && props.activeBackground
+        : props.background && props.background;
+}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
+    var _a, _b;
+    return props.checked &&
+        "box-shadow: 0 0 0 1px inset " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen) + ", 0px 2px 5px " + ((_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.boxShadowActive);
+});
+var ChipCheckbox = styled__default['default'].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall; });
+var ChipLabel = styled__default['default'](typography.BodyText)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
+
+exports.BaseChip = BaseChip;
+exports.ChipCheckbox = ChipCheckbox;
+exports.ChipLabel = ChipLabel;
+//# sourceMappingURL=Chip.styles.js.map

package/build/cjs/components/src/components/Chips/Chip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/WarningLabel/WarningLabel.js

@@ -19,6 +19,7 @@ require('../Badge/Badge.styles.js');
 require('../Box/Box.styles.js');
 require('../Button/Button.styles.js');
 require('../BackButton/BackButton.styles.js');
+require('../Chips/Chip.styles.js');
 require('react-loading-skeleton');
 require('../CartItemSummary/CartItemSummary.styles.js');
 require('../Divider/Divider.styles.js');

package/build/cjs/components/src/components/WarningLabel/WarningLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/index.js

@@ -12,6 +12,7 @@ var Box = require('./components/Box/Box.js');
 var IconButton = require('./components/Button/IconButton.js');
 var PaginationButton = require('./components/Button/PaginationButton.js');
 var BackButton = require('./components/BackButton/BackButton.js');
+var Chip = require('./components/Chips/Chip.js');
 var CartItemSummary = require('./components/CartItemSummary/CartItemSummary.js');
 var CartSummary = require('./components/CartSummary/CartSummary.js');
 var CustomerInfoBlock = require('./components/CustomerInfoBlock/CustomerInfoBlock.js');
@@ -86,6 +87,7 @@ exports.Box = Box.Box;
 exports.IconButton = IconButton.IconButton;
 exports.PaginationButton = PaginationButton.PaginationButton;
 exports.BackButton = BackButton.BackButton;
+exports.Chip = Chip.Chip;
 exports.CartItemSummary = CartItemSummary.CartItemSummary;
 exports.CartSummary = CartSummary.CartSummary;
 exports.CustomerInfoBlock = CustomerInfoBlock.CustomerInfoBlock;

package/build/cjs/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/Chips/Chip.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icons } from '@citygross/icons';
+import { TextTypes } from '@citygross/typography';
+import { BaseChip, ChipCheckbox, ChipLabel } from './Chip.styles.js';
+import { theme } from '@citygross/design-tokens';
+
+function Chip(_a) {
+    var _b, _c, _d, _e, _f;
+    var label = _a.label, checked = _a.checked, onClick = _a.onClick, _g = _a.background, background = _g === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lighter : _g, _h = _a.activeBackground, activeBackground = _h === void 0 ? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.white : _h;
+    return (React.createElement(BaseChip, { checked: checked, onClick: onClick, background: background, activeBackground: activeBackground, whileHover: { scale: (_d = theme.animations) === null || _d === void 0 ? void 0 : _d.hoverScale }, whileTap: { scale: (_e = theme.animations) === null || _e === void 0 ? void 0 : _e.tapScale } },
+        checked
+            ? (React.createElement(Icons.CheckMark, { color: (_f = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _f === void 0 ? void 0 : _f.alertGreen, width: 12, height: 12, viewBox: '0 0 25 25' }))
+            : (React.createElement(ChipCheckbox, null)),
+        React.createElement(ChipLabel, { forwardedAs: 'label', size: TextTypes.TextSize.SMALL }, label)));
+}
+
+export { Chip };
+//# sourceMappingURL=Chip.js.map

package/build/es/components/src/components/Chips/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/Chips/Chip.styles.js

@@ -0,0 +1,20 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import { BodyText } from '@citygross/typography';
+import { motion } from 'framer-motion';
+
+var BaseChip = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) {
+    return props.checked
+        ? props.activeBackground && props.activeBackground
+        : props.background && props.background;
+}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
+    var _a, _b;
+    return props.checked &&
+        "box-shadow: 0 0 0 1px inset " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen) + ", 0px 2px 5px " + ((_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.boxShadowActive);
+});
+var ChipCheckbox = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall; });
+var ChipLabel = styled(BodyText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { BaseChip, ChipCheckbox, ChipLabel };
+//# sourceMappingURL=Chip.styles.js.map

package/build/es/components/src/components/Chips/Chip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/WarningLabel/WarningLabel.js

@@ -15,6 +15,7 @@ import '../Badge/Badge.styles.js';
 import '../Box/Box.styles.js';
 import '../Button/Button.styles.js';
 import '../BackButton/BackButton.styles.js';
+import '../Chips/Chip.styles.js';
 import 'react-loading-skeleton';
 import '../CartItemSummary/CartItemSummary.styles.js';
 import '../Divider/Divider.styles.js';

package/build/es/components/src/components/WarningLabel/WarningLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/index.js

@@ -8,6 +8,7 @@ export { Box } from './components/Box/Box.js';
 export { IconButton } from './components/Button/IconButton.js';
 export { PaginationButton } from './components/Button/PaginationButton.js';
 export { BackButton } from './components/BackButton/BackButton.js';
+export { Chip } from './components/Chips/Chip.js';
 export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js';
 export { CartSummary } from './components/CartSummary/CartSummary.js';
 export { CustomerInfoBlock } from './components/CustomerInfoBlock/CustomerInfoBlock.js';

package/build/es/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.61",
+  "version": "0.7.62",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "f5fb6a88d185a6e67ea05065302c8aedb23c4da5"
+  "gitHead": "d5f7d33f07882c0a32394b9aa98edbde5af3cff6"
 }