@commercetools-uikit/constraints 15.2.4 → 15.4.0

package/dist/commercetools-uikit-constraints.cjs.dev.js

@@ -37,10 +37,16 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 
+// `null` is derived from `getMaxPropEquivalent`
 var getMaxPropTokenValue = function getMaxPropTokenValue(max) {
-  if (!max) return null; // @ts-expect-error
+  if (!max) return null;
+  var tokenName = "constraint".concat(max);
 
-  return designSystem.customProperties["constraint".concat(max)];
+  if (tokenName in designSystem.designTokens) {
+    return designSystem.designTokens[tokenName];
+  }
+
+  return null;
 }; // Generates an array of accepted values for the max prop, given a min and max
 
 
@@ -92,7 +98,7 @@ Horizontal.propTypes = process.env.NODE_ENV !== "production" ? {
 var Horizontal$1 = Horizontal;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.2.4";
+var version = "15.4.0";
 
 // eslint-disable-next-line import/prefer-default-export
 var Constraints = {

package/dist/commercetools-uikit-constraints.cjs.prod.js

@@ -36,10 +36,16 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 
+// `null` is derived from `getMaxPropEquivalent`
 var getMaxPropTokenValue = function getMaxPropTokenValue(max) {
-  if (!max) return null; // @ts-expect-error
+  if (!max) return null;
+  var tokenName = "constraint".concat(max);
 
-  return designSystem.customProperties["constraint".concat(max)];
+  if (tokenName in designSystem.designTokens) {
+    return designSystem.designTokens[tokenName];
+  }
+
+  return null;
 }; // Generates an array of accepted values for the max prop, given a min and max
 
 
@@ -81,7 +87,7 @@ Horizontal.propTypes = {};
 var Horizontal$1 = Horizontal;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.2.4";
+var version = "15.4.0";
 
 // eslint-disable-next-line import/prefer-default-export
 var Constraints = {

package/dist/commercetools-uikit-constraints.esm.js

@@ -2,7 +2,7 @@ import _toConsumableArray from '@babel/runtime-corejs3/helpers/esm/toConsumableA
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import _Array$from from '@babel/runtime-corejs3/core-js-stable/array/from';
-import { customProperties } from '@commercetools-uikit/design-system';
+import { designTokens } from '@commercetools-uikit/design-system';
 import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
@@ -18,10 +18,16 @@ import { css } from '@emotion/react';
 import { filterDataAttributes } from '@commercetools-uikit/utils';
 import { jsx } from '@emotion/react/jsx-runtime';
 
+// `null` is derived from `getMaxPropEquivalent`
 var getMaxPropTokenValue = function getMaxPropTokenValue(max) {
-  if (!max) return null; // @ts-expect-error
+  if (!max) return null;
+  var tokenName = "constraint".concat(max);
 
-  return customProperties["constraint".concat(max)];
+  if (tokenName in designTokens) {
+    return designTokens[tokenName];
+  }
+
+  return null;
 }; // Generates an array of accepted values for the max prop, given a min and max
 
 
@@ -73,7 +79,7 @@ Horizontal.propTypes = process.env.NODE_ENV !== "production" ? {
 var Horizontal$1 = Horizontal;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.2.4";
+var version = "15.4.0";
 
 // eslint-disable-next-line import/prefer-default-export
 var Constraints = {

package/dist/declarations/src/helpers.d.ts

@@ -1,3 +1,3 @@
-declare const getMaxPropTokenValue: (max: number | string | null) => any;
+declare const getMaxPropTokenValue: (max: number | string | null) => "var(--color-primary, #00b39e)" | "var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))" | "var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))" | "var(--color-primary-85, hsl(172.9608938547486, 100%, 85%))" | "var(--color-primary-95, hsl(172.9608938547486, 100%, 95%))" | "var(--color-accent, #213c45)" | "var(--color-accent-30, hsl(195, 35.2941176471%, 30%))" | "var(--color-accent-40, hsl(195, 35.2941176471%, 40%))" | "var(--color-accent-95, hsl(195, 35.2941176471%, 95%))" | "var(--color-accent-98, hsl(195, 35.2941176471%, 98%))" | "var(--color-neutral, #ccc)" | "var(--color-neutral-05, hsl(0deg 0% 80% / 5%))" | "var(--color-neutral-10, hsl(0deg 0% 80% / 10%))" | "var(--color-neutral-40, hsl(0, 0%, 40%))" | "var(--color-neutral-60, hsl(0, 0%, 60%))" | "var(--color-neutral-90, hsl(0, 0%, 90%))" | "var(--color-neutral-95, hsl(0, 0%, 95%))" | "var(--color-info, #078cdf)" | "var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))" | "var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))" | "var(--color-warning, #f16d0e)" | "var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))" | "var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))" | "var(--color-error, #e60050)" | "var(--color-error-95, hsl(339.1304347826087, 100%, 95%))" | "var(--color-solid, #1a1a1a)" | "var(--color-solid-05, hsl(0deg 0% 10% / 5%))" | "var(--color-solid-10, hsl(0deg 0% 10% / 10%))" | "var(--color-surface, #fff)" | "var(--border-radius-1, 1px)" | "var(--border-radius-2, 2px)" | "var(--border-radius-4, 4px)" | "var(--border-radius-6, 6px)" | "var(--border-radius-20, 20px)" | "var(--font-family, 'Open Sans', sans-serif)" | "var(--font-size-10, 0.75rem)" | "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-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-70, 2.4615rem)" | "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-10, 1.25rem)" | "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(--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(--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-button-when-active, #fff)" | "var(--background-color-for-button-when-hovered, #fff)" | "var(--background-color-for-button-as-primary-when-active, #00b39e)" | "var(--background-color-for-button-as-primary-when-hovered, hsl(172.9608938547486, 100%, 25%))" | "var(--background-color-for-button-as-icon-as-primary-when-active, #00b39e)" | "var(--background-color-for-button-as-icon-as-primary-when-hovered, #00b39e)" | "var(--background-color-for-button-as-icon-as-info-when-active, #078cdf)" | "var(--background-color-for-button-as-icon-as-info-when-hovered, #078cdf)" | "var(--background-color-for-button-as-urgent-when-active, #f16d0e)" | "var(--background-color-for-button-as-urgent-when-hovered, hsl(25.110132158590307, 89.0196078431%, 25%))" | "var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 98%))" | "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))" | "var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))" | "var(--background-color-for-input-when-hovered, hsl(0, 0%, 90%))" | "var(--background-color-for-tag, hsl(0, 0%, 95%))" | "var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))" | "var(--border-for-button-as-secondary, none)" | "var(--border-for-button-as-secondary-when-hovered, none)" | "var(--border-for-button-as-secondary-when-active, none)" | "var(--border-for-card-when-raised, none)" | "var(--border-color-for-input, hsl(0, 0%, 60%))" | "var(--border-color-for-input-when-focused, #00b39e)" | "var(--border-color-for-input-when-disabled, #ccc)" | "var(--border-color-for-input-when-readonly, #ccc)" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-tag, hsl(0, 0%, 60%))" | "var(--border-color-for-tag-warning, #f16d0e)" | "var(--border-color-for-tag-when-focused, #00b39e)" | "var(--border-color-for-button-as-icon, #fff)" | "var(--border-color-for-button-as-icon-as-info, #078cdf)" | "var(--border-color-for-button-as-icon-as-primary, #00b39e)" | "var(--border-color-for-button-as-icon-when-disabled, #ccc)" | "var(--border-radius-for-button-as-big, 6px)" | "var(--border-radius-for-button-as-small, 4px)" | "var(--border-radius-for-button-as-icon-as-big, 6px)" | "var(--border-radius-for-button-as-icon-as-medium, 4px)" | "var(--border-radius-for-button-as-icon-as-small, 2px)" | "var(--border-radius-for-input, 6px)" | "var(--border-radius-for-tag, 2px)" | "var(--border-radius-for-card, 6px)" | "var(--font-color-for-text, #1a1a1a)" | "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-error, #e60050)" | "var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-warning, #f16d0e)" | "var(--font-color-for-tag, #1a1a1a)" | "var(--font-color-for-tag-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-text-when-inverted, #fff)" | "var(--height-for-button-as-big, 32px)" | "var(--height-for-button-as-small, 24px)" | "var(--height-for-button-as-icon-as-big, 32px)" | "var(--height-for-button-as-icon-as-medium, 24px)" | "var(--height-for-button-as-icon-as-small, 16px)" | "var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))" | "var(--font-size-for-button, 1rem)" | "var(--font-size-for-input, 1rem)" | "var(--font-size-for-text-as-h-1, 2.4615rem)" | "var(--font-size-for-text-as-h-2, 1.8462rem)" | "var(--font-size-for-text-as-h-3, 1.5385rem)" | "var(--font-size-for-text-as-h-4, 1.2308rem)" | "var(--font-size-for-text-as-h-5, 1.0769rem)" | "var(--font-size-for-text-as-body, 1rem)" | "var(--font-size-for-text-as-detail, 0.9231rem)" | "var(--font-size-for-body, 13px)" | "var(--font-size-for-link, 1rem)" | "var(--line-height-for-text-as-h-1, inherit)" | "var(--line-height-for-text-as-h-2, inherit)" | "var(--line-height-for-text-as-h-3, inherit)" | "var(--line-height-for-text-as-h-4, inherit)" | "var(--line-height-for-text-as-h-5, inherit)" | "var(--line-height-for-text-as-body, inherit)" | "var(--line-height-for-text-as-detail, inherit)" | "var(--font-weight-for-text-as-h-1, 300)" | "var(--font-weight-for-text-as-h-2, 300)" | "var(--font-weight-for-text-as-h-3, 300)" | "var(--font-weight-for-text-as-h-4, 400)" | "var(--font-weight-for-text-as-h-5, 400)" | "var(--font-weight-for-text-as-body, 400)" | "var(--font-weight-for-text-as-detail, 400)" | "var(--font-weight-for-button, 400)" | "var(--shadow-for-button, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))" | "var(--shadow-for-button-when-focused, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))" | "var(--shadow-for-button-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))" | "var(--shadow-for-button-when-active, 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-for-button-when-disabled, 0 0 0 1px var(--color-neutral) inset)" | "var(--shadow-box-tag-when-hovered, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))" | "var(--shadow-for-card-when-raised, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))" | "var(--font-size-m, 1rem)" | "var(--big-button-height, 32px)" | "var(--small-button-height, 24px)" | "var(--size-height-input, 32px)" | "var(--font-family-default, 'Open Sans', sans-serif)" | "var(--font-size-default, 1rem)" | "var(--font-size-small, 0.9231rem)" | "var(--shadow-box-tag-hover, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))" | "var(--size-height-tag, 26px)" | "var(--standard-input-height, 32px)" | null;
 declare const getAcceptedMaxPropValues: (min?: number, max?: number) => (string | number)[];
 export { getMaxPropTokenValue, getAcceptedMaxPropValues };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/constraints",
   "description": "Constraints are container elements with a configurable constraint size, like width or height.",
-  "version": "15.2.4",
+  "version": "15.4.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,8 +21,8 @@
   "dependencies": {
     "@babel/runtime": "^7.19.0",
     "@babel/runtime-corejs3": "^7.19.1",
-    "@commercetools-uikit/design-system": "15.2.4",
-    "@commercetools-uikit/utils": "15.2.4",
+    "@commercetools-uikit/design-system": "15.4.0",
+    "@commercetools-uikit/utils": "15.4.0",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "prop-types": "15.8.1"