@commercetools-uikit/constraints 20.5.0 → 20.6.0
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.
- package/README.md +3 -3
- package/dist/commercetools-uikit-constraints.cjs.dev.js +3 -3
- package/dist/commercetools-uikit-constraints.cjs.prod.js +3 -3
- package/dist/commercetools-uikit-constraints.esm.js +3 -3
- package/dist/declarations/src/index.d.ts +2 -2
- package/package.json +18 -8
- package/dist/declarations/src/horizontal/index.d.ts +0 -2
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
|
|
2
|
-
<!-- This file is created by the `
|
|
2
|
+
<!-- This file is created by the `pnpm generate-readme` script. -->
|
|
3
3
|
|
|
4
4
|
# Constraints
|
|
5
5
|
|
|
@@ -10,7 +10,7 @@ Constraints are container elements with a configurable constraint size, like wid
|
|
|
10
10
|
## Installation
|
|
11
11
|
|
|
12
12
|
```
|
|
13
|
-
|
|
13
|
+
pnpm add @commercetools-uikit/constraints
|
|
14
14
|
```
|
|
15
15
|
|
|
16
16
|
```
|
|
@@ -20,7 +20,7 @@ npm --save install @commercetools-uikit/constraints
|
|
|
20
20
|
Additionally install the peer dependencies (if not present)
|
|
21
21
|
|
|
22
22
|
```
|
|
23
|
-
|
|
23
|
+
pnpm add react
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
```
|
|
@@ -34,7 +34,7 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
|
|
|
34
34
|
// `null` is derived from `getMaxPropEquivalent`
|
|
35
35
|
const getMaxPropTokenValue = max => {
|
|
36
36
|
if (!max) return null;
|
|
37
|
-
const tokenName =
|
|
37
|
+
const tokenName = `constraint${max}`;
|
|
38
38
|
if (tokenName in designSystem.designTokens) {
|
|
39
39
|
return designSystem.designTokens[tokenName];
|
|
40
40
|
}
|
|
@@ -56,7 +56,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
|
|
|
56
56
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
57
57
|
function getConstraintStyles(maxProp) {
|
|
58
58
|
const constraintToken = maxProp ? getMaxPropTokenValue(maxProp) : null;
|
|
59
|
-
return /*#__PURE__*/react.css(constraintToken ?
|
|
59
|
+
return /*#__PURE__*/react.css(constraintToken ? `max-width: ${constraintToken};` : '', " ", maxProp === 'auto' ? 'width: auto;' : '', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getConstraintStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvcml6b250YWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DWSIsImZpbGUiOiJob3Jpem9udGFsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IHsgZ2V0TWF4UHJvcFRva2VuVmFsdWUgfSBmcm9tICcuLi9oZWxwZXJzJztcblxuZXhwb3J0IHR5cGUgVE1heFByb3AgPVxuICB8IDFcbiAgfCAyXG4gIHwgM1xuICB8IDRcbiAgfCA1XG4gIHwgNlxuICB8IDdcbiAgfCA4XG4gIHwgOVxuICB8IDEwXG4gIHwgMTFcbiAgfCAxMlxuICB8IDEzXG4gIHwgMTRcbiAgfCAxNVxuICB8IDE2XG4gIHwgJ3NjYWxlJ1xuICB8ICdhdXRvJztcblxuZXhwb3J0IHR5cGUgVEhvcml6b250YWxQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSBvZiB0aGUgY29uc3RyYWludC4gU2VlIGVxdWl2YWxlbnQgcGl4ZWwgdmFsdWVzIFtoZXJlXShodHRwczovL3Vpa2l0LmNvbW1lcmNldG9vbHMuY29tLz9wYXRoPS9zdG9yeS9iYXNpY3MtdG9rZW5zLS1hbGwtdG9rZW5zKS5cbiAgICovXG4gIG1heD86IFRNYXhQcm9wO1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xufTtcblxuZnVuY3Rpb24gZ2V0Q29uc3RyYWludFN0eWxlcyhtYXhQcm9wPzogVE1heFByb3ApIHtcbiAgY29uc3QgY29uc3RyYWludFRva2VuID0gbWF4UHJvcCA/IGdldE1heFByb3BUb2tlblZhbHVlKG1heFByb3ApIDogbnVsbDtcbiAgcmV0dXJuIGNzc2BcbiAgICAke2NvbnN0cmFpbnRUb2tlbiA/IGBtYXgtd2lkdGg6ICR7Y29uc3RyYWludFRva2VufTtgIDogJyd9XG4gICAgJHttYXhQcm9wID09PSAnYXV0bycgPyAnd2lkdGg6IGF1dG87JyA6ICcnfVxuICBgO1xufVxuXG5jb25zdCBIb3Jpem9udGFsID0gKHByb3BzOiBUSG9yaXpvbnRhbFByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e1tcbiAgICAgIGNzc2BcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGAsXG4gICAgICBnZXRDb25zdHJhaW50U3R5bGVzKHByb3BzLm1heCksXG4gICAgXX1cbiAgICB7Li4uZmlsdGVyRGF0YUF0dHJpYnV0ZXMocHJvcHMpfVxuICA+XG4gICAge3Byb3BzLmNoaWxkcmVufVxuICA8L2Rpdj5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IEhvcml6b250YWw7XG4iXX0= */");
|
|
60
60
|
}
|
|
61
61
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
62
62
|
name: "n48rgu",
|
|
@@ -74,7 +74,7 @@ const Horizontal = props => jsxRuntime.jsx("div", _objectSpread(_objectSpread({
|
|
|
74
74
|
var Horizontal$1 = Horizontal;
|
|
75
75
|
|
|
76
76
|
// NOTE: This string will be replaced on build time with the package version.
|
|
77
|
-
var version = "20.
|
|
77
|
+
var version = "20.6.0";
|
|
78
78
|
|
|
79
79
|
// eslint-disable-next-line import/prefer-default-export
|
|
80
80
|
const Constraints = {
|
|
@@ -34,7 +34,7 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
|
|
|
34
34
|
// `null` is derived from `getMaxPropEquivalent`
|
|
35
35
|
const getMaxPropTokenValue = max => {
|
|
36
36
|
if (!max) return null;
|
|
37
|
-
const tokenName =
|
|
37
|
+
const tokenName = `constraint${max}`;
|
|
38
38
|
if (tokenName in designSystem.designTokens) {
|
|
39
39
|
return designSystem.designTokens[tokenName];
|
|
40
40
|
}
|
|
@@ -55,7 +55,7 @@ function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Objec
|
|
|
55
55
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
56
56
|
function getConstraintStyles(maxProp) {
|
|
57
57
|
const constraintToken = maxProp ? getMaxPropTokenValue(maxProp) : null;
|
|
58
|
-
return /*#__PURE__*/react.css(constraintToken ?
|
|
58
|
+
return /*#__PURE__*/react.css(constraintToken ? `max-width: ${constraintToken};` : '', " ", maxProp === 'auto' ? 'width: auto;' : '', ";" + ("" ), "" );
|
|
59
59
|
}
|
|
60
60
|
var _ref = {
|
|
61
61
|
name: "n48rgu",
|
|
@@ -69,7 +69,7 @@ const Horizontal = props => jsxRuntime.jsx("div", _objectSpread(_objectSpread({
|
|
|
69
69
|
var Horizontal$1 = Horizontal;
|
|
70
70
|
|
|
71
71
|
// NOTE: This string will be replaced on build time with the package version.
|
|
72
|
-
var version = "20.
|
|
72
|
+
var version = "20.6.0";
|
|
73
73
|
|
|
74
74
|
// eslint-disable-next-line import/prefer-default-export
|
|
75
75
|
const Constraints = {
|
|
@@ -17,7 +17,7 @@ import { jsx } from '@emotion/react/jsx-runtime';
|
|
|
17
17
|
// `null` is derived from `getMaxPropEquivalent`
|
|
18
18
|
const getMaxPropTokenValue = max => {
|
|
19
19
|
if (!max) return null;
|
|
20
|
-
const tokenName =
|
|
20
|
+
const tokenName = `constraint${max}`;
|
|
21
21
|
if (tokenName in designTokens) {
|
|
22
22
|
return designTokens[tokenName];
|
|
23
23
|
}
|
|
@@ -39,7 +39,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
|
|
|
39
39
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
40
40
|
function getConstraintStyles(maxProp) {
|
|
41
41
|
const constraintToken = maxProp ? getMaxPropTokenValue(maxProp) : null;
|
|
42
|
-
return /*#__PURE__*/css(constraintToken ?
|
|
42
|
+
return /*#__PURE__*/css(constraintToken ? `max-width: ${constraintToken};` : '', " ", maxProp === 'auto' ? 'width: auto;' : '', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getConstraintStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvcml6b250YWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DWSIsImZpbGUiOiJob3Jpem9udGFsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZpbHRlckRhdGFBdHRyaWJ1dGVzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvdXRpbHMnO1xuaW1wb3J0IHsgZ2V0TWF4UHJvcFRva2VuVmFsdWUgfSBmcm9tICcuLi9oZWxwZXJzJztcblxuZXhwb3J0IHR5cGUgVE1heFByb3AgPVxuICB8IDFcbiAgfCAyXG4gIHwgM1xuICB8IDRcbiAgfCA1XG4gIHwgNlxuICB8IDdcbiAgfCA4XG4gIHwgOVxuICB8IDEwXG4gIHwgMTFcbiAgfCAxMlxuICB8IDEzXG4gIHwgMTRcbiAgfCAxNVxuICB8IDE2XG4gIHwgJ3NjYWxlJ1xuICB8ICdhdXRvJztcblxuZXhwb3J0IHR5cGUgVEhvcml6b250YWxQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSBvZiB0aGUgY29uc3RyYWludC4gU2VlIGVxdWl2YWxlbnQgcGl4ZWwgdmFsdWVzIFtoZXJlXShodHRwczovL3Vpa2l0LmNvbW1lcmNldG9vbHMuY29tLz9wYXRoPS9zdG9yeS9iYXNpY3MtdG9rZW5zLS1hbGwtdG9rZW5zKS5cbiAgICovXG4gIG1heD86IFRNYXhQcm9wO1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xufTtcblxuZnVuY3Rpb24gZ2V0Q29uc3RyYWludFN0eWxlcyhtYXhQcm9wPzogVE1heFByb3ApIHtcbiAgY29uc3QgY29uc3RyYWludFRva2VuID0gbWF4UHJvcCA/IGdldE1heFByb3BUb2tlblZhbHVlKG1heFByb3ApIDogbnVsbDtcbiAgcmV0dXJuIGNzc2BcbiAgICAke2NvbnN0cmFpbnRUb2tlbiA/IGBtYXgtd2lkdGg6ICR7Y29uc3RyYWludFRva2VufTtgIDogJyd9XG4gICAgJHttYXhQcm9wID09PSAnYXV0bycgPyAnd2lkdGg6IGF1dG87JyA6ICcnfVxuICBgO1xufVxuXG5jb25zdCBIb3Jpem9udGFsID0gKHByb3BzOiBUSG9yaXpvbnRhbFByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e1tcbiAgICAgIGNzc2BcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGAsXG4gICAgICBnZXRDb25zdHJhaW50U3R5bGVzKHByb3BzLm1heCksXG4gICAgXX1cbiAgICB7Li4uZmlsdGVyRGF0YUF0dHJpYnV0ZXMocHJvcHMpfVxuICA+XG4gICAge3Byb3BzLmNoaWxkcmVufVxuICA8L2Rpdj5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IEhvcml6b250YWw7XG4iXX0= */");
|
|
43
43
|
}
|
|
44
44
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
45
45
|
name: "n48rgu",
|
|
@@ -57,7 +57,7 @@ const Horizontal = props => jsx("div", _objectSpread(_objectSpread({
|
|
|
57
57
|
var Horizontal$1 = Horizontal;
|
|
58
58
|
|
|
59
59
|
// NOTE: This string will be replaced on build time with the package version.
|
|
60
|
-
var version = "20.
|
|
60
|
+
var version = "20.6.0";
|
|
61
61
|
|
|
62
62
|
// eslint-disable-next-line import/prefer-default-export
|
|
63
63
|
const Constraints = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * from "./horizontal/export-types.js";
|
|
2
2
|
declare const Constraints: {
|
|
3
|
-
Horizontal: (props: import("
|
|
4
|
-
getAcceptedMaxPropValues: (min?: number, max?: number) => import("
|
|
3
|
+
Horizontal: (props: import("@commercetools-frontend/ui-kit").THorizontalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
4
|
+
getAcceptedMaxPropValues: (min?: number, max?: number) => import("@commercetools-frontend/ui-kit").TMaxProp[];
|
|
5
5
|
getMaxPropTokenValue: (max: number | string | null) => "var(--color-primary, hsl(240, 64%, 58%))" | "var(--color-primary-10, hsl(240, 66%, 19%))" | "var(--color-primary-20, hsl(240, 45%, 33%))" | "var(--color-primary-25, hsl(240, 46%, 48%))" | "var(--color-primary-30, hsl(240, 46%, 53%))" | "var(--color-primary-40, hsl(240, 100%, 67%))" | "var(--color-primary-85, hsl(244, 100%, 84%))" | "var(--color-primary-90, hsl(243, 100%, 93%))" | "var(--color-primary-95, hsl(244, 100%, 97%))" | "var(--color-primary-98, hsl(244, 100%, 99%))" | "var(--color-accent, #213c45)" | "var(--color-accent-10, hsl(195, 100%, 10%))" | "var(--color-accent-20, hsl(195, 80%, 20%))" | "var(--color-accent-30, hsl(195, 70%, 30%))" | "var(--color-accent-40, hsl(195, 70%, 40%))" | "var(--color-accent-50, hsl(195, 70%, 50%))" | "var(--color-accent-60, hsl(195, 70%, 60%))" | "var(--color-accent-85, hsl(195, 85%, 85%))" | "var(--color-accent-90, hsl(195, 90%, 90%))" | "var(--color-accent-95, hsl(195, 95%, 95%))" | "var(--color-accent-98, hsl(195, 100%, 98%))" | "var(--color-brown-10, hsl(41, 100%, 10%))" | "var(--color-brown-20, hsl(41, 100%, 20%))" | "var(--color-brown-35, hsl(41, 96%, 30%))" | "var(--color-brown-50, hsl(41, 95%, 44%))" | "var(--color-brown-70, hsl(47, 95%, 70%))" | "var(--color-brown-85, hsl(47, 100%, 85%))" | "var(--color-brown-90, hsl(47, 100%, 90%))" | "var(--color-brown-95, hsl(47, 100%, 95%))" | "var(--color-brown-98, hsl(48, 100%, 97%))" | "var(--color-purple-10, hsl(248, 88%, 10%))" | "var(--color-purple-20, hsl(248, 50%, 20%))" | "var(--color-purple-35, hsl(248, 25%, 35%))" | "var(--color-purple-50, hsl(248, 64%, 58%))" | "var(--color-purple-70, hsl(248, 80%, 70%))" | "var(--color-purple-85, hsl(249, 100%, 85%))" | "var(--color-purple-90, hsl(248, 100%, 90%))" | "var(--color-purple-95, hsl(248, 100%, 95%))" | "var(--color-purple-98, hsl(246, 100%, 98%))" | "var(--color-turquoise-10, hsl(180, 88%, 10%))" | "var(--color-turquoise-20, hsl(180, 90%, 20%))" | "var(--color-turquoise-35, hsl(178, 88%, 25%))" | "var(--color-turquoise-50, hsl(178, 67%, 50%))" | "var(--color-turquoise-70, hsl(180, 75%, 70%))" | "var(--color-turquoise-85, hsl(180, 90%, 85%))" | "var(--color-turquoise-90, hsl(180, 88%, 90%))" | "var(--color-turquoise-95, hsl(180, 88%, 95%))" | "var(--color-turquoise-98, hsl(180, 100%, 98%))" | "var(--color-neutral, hsl(232, 18%, 80%))" | "var(--color-neutral-05, hsl(0deg 0% 80% / 5%))" | "var(--color-neutral-10, hsl(0deg 0% 80% / 10%))" | "var(--color-neutral-40, hsl(232, 18%, 40%))" | "var(--color-neutral-50, hsl(233, 18%, 50%))" | "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-neutral-85, hsl(232, 18%, 85%))" | "var(--color-neutral-90, hsl(232, 18%, 90%))" | "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--color-neutral-98, hsl(232, 18%, 98%))" | "var(--color-info, #078cdf)" | "var(--color-info-40, hsl(203, 94%, 35%))" | "var(--color-info-50, hsl(203.05555555555554, 93.9130434783%, 50%))" | "var(--color-info-60, hsl(203.05555555555554, 93.9130434783%, 60%))" | "var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))" | "var(--color-info-90, #CEEBFD)" | "var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))" | "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-warning-25, hsl(33, 83%, 25%))" | "var(--color-warning-40, hsl(33, 80%, 34%))" | "var(--color-warning-60, hsl(35, 90%, 55%))" | "var(--color-warning-85, hsl(33, 90%, 80%))" | "var(--color-warning-95, hsl(45, 100%, 92%))" | "var(--color-error, hsl(3, 65%, 58%))" | "var(--color-error-25, hsl(4, 69%, 37%))" | "var(--color-error-40, hsl(3, 60%, 46%))" | "var(--color-error-85, hsl(1, 55%, 74%))" | "var(--color-error-95, hsl(349, 66%, 92%))" | "var(--color-solid, #1a1a1a)" | "var(--color-solid-02, hsl(0deg 0% 10% / 2%))" | "var(--color-solid-05, hsl(0deg 0% 10% / 5%))" | "var(--color-solid-10, hsl(0deg 0% 10% / 10%))" | "var(--color-surface, #fff)" | "var(--color-transparent, transparent)" | "var(--color-success, hsl(152, 77%, 39%))" | "var(--color-success-25, hsl(155, 84%, 20%))" | "var(--color-success-40, hsl(155, 90%, 24%))" | "var(--color-success-85, hsl(144, 69%, 80%))" | "var(--color-success-95, hsl(141, 76%, 92%))" | "var(--border-radius-1, 1px)" | "var(--border-radius-2, 2px)" | "var(--border-radius-4, 4px)" | "var(--border-radius-6, 6px)" | "var(--border-radius-8, 8px)" | "var(--border-radius-20, 20px)" | "var(--border-width-1, 1px)" | "var(--border-width-2, 2px)" | "var(--font-family, 'Inter', system-ui)" | "var(--font-size-10, 0.75rem)" | "var(--font-size-12, 0.8rem)" | "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)" | "var(--font-size-40, 1.125rem)" | "var(--font-size-50, 1.25rem)" | "var(--font-size-60, 1.5rem)" | "var(--font-size-70, 2rem)" | "var(--font-size-80, 2.5rem)" | "var(--font-size-90, 3rem)" | "var(--font-size-15, 0.9231rem)" | "var(--font-size-35, 1.0769rem)" | "var(--font-size-45, 1.2308rem)" | "var(--font-size-63, 1.5385rem)" | "var(--font-size-66, 1.8462rem)" | "var(--font-size-69, 2.4615rem)" | "var(--font-size-78, 3rem)" | "var(--font-weight-300, 300)" | "var(--font-weight-400, 400)" | "var(--font-weight-500, 500)" | "var(--font-weight-600, 600)" | "var(--font-weight-700, 700)" | "var(--line-height-05, 1.125rem)" | "var(--line-height-10, 1.25rem)" | "var(--line-height-18, 1.3rem)" | "var(--line-height-20, 1.375rem)" | "var(--line-height-30, 1.5rem)" | "var(--line-height-40, 1.625rem)" | "var(--line-height-50, 1.75rem)" | "var(--line-height-60, 2.125rem)" | "var(--shadow-0, none)" | "var(--shadow-1, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))" | "var(--shadow-2, 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23))" | "var(--shadow-3, 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23))" | "var(--shadow-4, 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22))" | "var(--shadow-5, 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22))" | "var(--shadow-6, 0 -1px 2px 0 rgba(0, 0, 0, 0.2))" | "var(--shadow-7, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))" | "var(--shadow-8, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))" | "var(--shadow-9, inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25))" | "var(--shadow-10, 0 0 0 1px rgba(224, 230, 237, 0.5))" | "var(--shadow-11, 0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12))" | "var(--shadow-12, 0 0 1px rgba(0, 0, 0, 0.25))" | "var(--shadow-13, 0 0 1px rgba(0, 0, 0, 0.25))" | "var(--shadow-14, 0 0 0.5px rgba(0, 0, 0, 0.1))" | "var(--shadow-15, 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12))" | "var(--shadow-16, 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25))" | "var(--shadow-17, 0 1px 5px 0 rgba(0, 0, 0, 0.05))" | "var(--shadow-18, 0 5px 30px 0px rgba(0, 0, 0, 0.1))" | "var(--constraint-scale, 100%)" | "var(--constraint-1, 42px)" | "var(--constraint-2, 84px)" | "var(--constraint-3, 142px)" | "var(--constraint-4, 184px)" | "var(--constraint-5, 242px)" | "var(--constraint-6, 284px)" | "var(--constraint-7, 342px)" | "var(--constraint-8, 384px)" | "var(--constraint-9, 442px)" | "var(--constraint-10, 484px)" | "var(--constraint-11, 542px)" | "var(--constraint-12, 584px)" | "var(--constraint-13, 642px)" | "var(--constraint-14, 684px)" | "var(--constraint-15, 742px)" | "var(--constraint-16, 784px)" | "var(--spacing-xs, 4px)" | "var(--spacing-s, 8px)" | "var(--spacing-m, 16px)" | "var(--spacing-l, 24px)" | "var(--spacing-xl, 32px)" | "var(--spacing-05, 2px)" | "var(--spacing-10, 4px)" | "var(--spacing-20, 8px)" | "var(--spacing-25, 12px)" | "var(--spacing-30, 16px)" | "var(--spacing-40, 24px)" | "var(--spacing-50, 32px)" | "var(--spacing-55, 40px)" | "var(--spacing-60, 48px)" | "var(--spacing-70, 64px)" | "var(--transition-linear-80-ms, 80ms linear)" | "var(--transition-easeinout-150-ms, 150ms ease-in-out)" | "var(--transition-standard, 200ms ease)" | "var(--break-point-mobile, 768px)" | "var(--break-point-desktop, 1024px)" | "var(--break-point-biggerdesktop, 1280px)" | "var(--break-point-giantdesktop, 1680px)" | "var(--break-point-jumbodesktop, 1920px)" | "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-hovered, hsl(244, 100%, 99%))" | "var(--background-color-for-localized-input-label, #fff)" | "var(--background-color-for-localized-input-label-when-readonly, hsl(232, 18%, 95%))" | "var(--background-color-for-localized-input-label-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-button-when-active, hsl(243, 100%, 93%))" | "var(--background-color-for-button-when-hovered, hsl(244, 100%, 97%))" | "var(--background-color-for-button-when-disabled, hsl(232, 18%, 95%))" | "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-readonly, #fff)" | "var(--border-color-for-input-when-error, hsl(3, 65%, 58%))" | "var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))" | "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))" | "var(--border-color-for-button-as-secondary, hsl(244, 100%, 84%))" | "var(--border-radius-for-input, 4px)" | "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-error, hsl(3, 60%, 46%))" | "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))" | "var(--font-color-for-input-when-warning, hsl(35, 90%, 45%))" | "var(--font-color-for-button-as-secondary, hsl(240, 64%, 58%))" | "var(--height-for-button-as-big, 40px)" | "var(--height-for-button-as-small, 16px)" | "var(--height-for-button-as-medium, 32px)" | "var(--height-for-button-as-40, 40px)" | "var(--height-for-button-as-30, 32px)" | "var(--height-for-button-as-20, 24px)" | "var(--height-for-button-as-10, 16px)" | "var(--height-for-input, 40px)" | "var(--height-for-input-as-small, 32px)" | "var(--shadow-for-input, none)" | "var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))" | "var(--shadow-for-input-when-error, inset 0 0 0 1px var(--color-error))" | "var(--shadow-for-input-when-warning, inset 0 0 0 1px var(--color-warning))" | null;
|
|
6
6
|
};
|
|
7
7
|
export default Constraints;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/constraints",
|
|
3
3
|
"description": "Constraints are container elements with a configurable constraint size, like width or height.",
|
|
4
|
-
"version": "20.
|
|
4
|
+
"version": "20.6.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -9,7 +9,13 @@
|
|
|
9
9
|
"directory": "packages/components/constraints"
|
|
10
10
|
},
|
|
11
11
|
"homepage": "https://uikit.commercetools.com",
|
|
12
|
-
"keywords": [
|
|
12
|
+
"keywords": [
|
|
13
|
+
"javascript",
|
|
14
|
+
"typescript",
|
|
15
|
+
"design-system",
|
|
16
|
+
"react",
|
|
17
|
+
"uikit"
|
|
18
|
+
],
|
|
13
19
|
"license": "MIT",
|
|
14
20
|
"publishConfig": {
|
|
15
21
|
"access": "public"
|
|
@@ -17,14 +23,16 @@
|
|
|
17
23
|
"sideEffects": false,
|
|
18
24
|
"main": "dist/commercetools-uikit-constraints.cjs.js",
|
|
19
25
|
"module": "dist/commercetools-uikit-constraints.esm.js",
|
|
20
|
-
"files": [
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
21
29
|
"dependencies": {
|
|
22
30
|
"@babel/runtime": "^7.20.13",
|
|
23
31
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/design-system": "20.5.0",
|
|
25
|
-
"@commercetools-uikit/utils": "20.5.0",
|
|
26
32
|
"@emotion/react": "^11.10.5",
|
|
27
|
-
"@emotion/styled": "^11.10.5"
|
|
33
|
+
"@emotion/styled": "^11.10.5",
|
|
34
|
+
"@commercetools-uikit/design-system": "^20.6.0",
|
|
35
|
+
"@commercetools-uikit/utils": "^20.6.0"
|
|
28
36
|
},
|
|
29
37
|
"devDependencies": {
|
|
30
38
|
"react": "19.2.0"
|
|
@@ -33,6 +41,8 @@
|
|
|
33
41
|
"react": "19.x"
|
|
34
42
|
},
|
|
35
43
|
"readme": {
|
|
36
|
-
"componentPaths": [
|
|
44
|
+
"componentPaths": [
|
|
45
|
+
"./src/horizontal/horizontal.tsx"
|
|
46
|
+
]
|
|
37
47
|
}
|
|
38
|
-
}
|
|
48
|
+
}
|