@hyphen/hyphen-components 5.7.4 → 5.8.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/dist/components/Box/Box.d.ts +9 -1
- package/dist/components/Box/Box.stories.d.ts +2 -0
- package/dist/css/utilities.css +73 -1
- package/dist/css/variables.css +11 -2
- package/dist/hyphen-components.cjs.development.js +6 -2
- package/dist/hyphen-components.cjs.development.js.map +1 -1
- package/dist/hyphen-components.cjs.production.min.js +1 -1
- package/dist/hyphen-components.cjs.production.min.js.map +1 -1
- package/dist/hyphen-components.esm.js +6 -2
- package/dist/hyphen-components.esm.js.map +1 -1
- package/dist/types/index.d.ts +3 -1
- package/package.json +2 -2
- package/src/components/Box/Box.stories.tsx +111 -0
- package/src/components/Box/Box.tsx +14 -0
- package/src/types/index.ts +10 -1
|
@@ -254,7 +254,7 @@ Component, props, getDefault) {
|
|
|
254
254
|
|
|
255
255
|
var styles$A = {"box-transition":"Box-module_box-transition__eQx8C"};
|
|
256
256
|
|
|
257
|
-
var _excluded$R = ["as", "alignItems", "alignContent", "alignSelf", "background", "borderColor", "borderWidth", "children", "childGap", "className", "color", "columnGap", "cursor", "display", "direction", "flex", "fontFamily", "fontSize", "focus", "fontWeight", "gap", "height", "hover", "justifyContent", "margin", "maxHeight", "minHeight", "maxWidth", "minWidth", "overflow", "padding", "position", "radius", "rowGap", "shadow", "style", "textAlign", "wrap", "width", "zIndex"];
|
|
257
|
+
var _excluded$R = ["as", "alignItems", "alignContent", "alignSelf", "background", "borderColor", "borderWidth", "children", "childGap", "className", "color", "columnGap", "cursor", "display", "direction", "flex", "fontFamily", "fontSize", "focus", "fontWeight", "gap", "height", "hover", "justifyContent", "margin", "maxHeight", "minHeight", "maxWidth", "minWidth", "overflow", "padding", "position", "radius", "rowGap", "shadow", "style", "textAlign", "wrap", "whiteSpace", "width", "wordBreak", "zIndex"];
|
|
258
258
|
/**
|
|
259
259
|
* A `<Box>` is a layout component to build UIs with consistent padding and spacing between
|
|
260
260
|
* elements.
|
|
@@ -337,8 +337,12 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
337
337
|
textAlign = _ref$textAlign === void 0 ? undefined : _ref$textAlign,
|
|
338
338
|
_ref$wrap = _ref.wrap,
|
|
339
339
|
wrap = _ref$wrap === void 0 ? undefined : _ref$wrap,
|
|
340
|
+
_ref$whiteSpace = _ref.whiteSpace,
|
|
341
|
+
whiteSpace = _ref$whiteSpace === void 0 ? undefined : _ref$whiteSpace,
|
|
340
342
|
_ref$width = _ref.width,
|
|
341
343
|
width = _ref$width === void 0 ? undefined : _ref$width,
|
|
344
|
+
_ref$wordBreak = _ref.wordBreak,
|
|
345
|
+
wordBreak = _ref$wordBreak === void 0 ? undefined : _ref$wordBreak,
|
|
342
346
|
_ref$zIndex = _ref.zIndex,
|
|
343
347
|
zIndex = _ref$zIndex === void 0 ? undefined : _ref$zIndex,
|
|
344
348
|
restProps = _objectWithoutPropertiesLoose(_ref, _excluded$R);
|
|
@@ -387,7 +391,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
387
391
|
};
|
|
388
392
|
var hoverClasses = getStatefulClasses('hover', hover);
|
|
389
393
|
var focusClasses = getStatefulClasses('focus', focus);
|
|
390
|
-
var boxClasses = classNames.apply(void 0, [className, cssShorthandToClasses('m', margin), cssShorthandToClasses('p', padding), cssShorthandToClasses('br', radius), cssShorthandToClasses('g', gap), cssShorthandToClasses('cg', columnGap), cssShorthandToClasses('rg', rowGap), heightCss.classes, maxHeightCss.classes, minHeightCss.classes, maxWidthCss.classes, minWidthCss.classes, widthCss.classes, flexDirectionClasses, generateResponsiveClasses('display', display), generateResponsiveClasses('justify-content', justifyContent), generateResponsiveClasses('align-items', alignItems), generateResponsiveClasses('align-content', alignContent), generateResponsiveClasses('align-self', alignSelf), generateResponsiveClasses('font-family', fontFamily), generateResponsiveClasses('font-size', fontSize), generateResponsiveClasses('overflow', overflow), generateResponsiveClasses('shadow', shadow), generateResponsiveClasses('flex', flex), cssShorthandToClasses('bw', borderWidth), generateResponsiveClasses('font-weight', fontWeight), generateResponsiveClasses('text-align', textAlign), generateResponsiveClasses('position', position), generateResponsiveClasses('z-index', zIndex)].concat(hoverClasses != null ? hoverClasses : [], focusClasses != null ? focusClasses : [], [(_ref3 = {
|
|
394
|
+
var boxClasses = classNames.apply(void 0, [className, cssShorthandToClasses('m', margin), cssShorthandToClasses('p', padding), cssShorthandToClasses('br', radius), cssShorthandToClasses('g', gap), cssShorthandToClasses('cg', columnGap), cssShorthandToClasses('rg', rowGap), heightCss.classes, maxHeightCss.classes, minHeightCss.classes, maxWidthCss.classes, minWidthCss.classes, widthCss.classes, flexDirectionClasses, generateResponsiveClasses('display', display), generateResponsiveClasses('justify-content', justifyContent), generateResponsiveClasses('align-items', alignItems), generateResponsiveClasses('align-content', alignContent), generateResponsiveClasses('align-self', alignSelf), generateResponsiveClasses('font-family', fontFamily), generateResponsiveClasses('font-size', fontSize), generateResponsiveClasses('overflow', overflow), generateResponsiveClasses('shadow', shadow), generateResponsiveClasses('flex', flex), cssShorthandToClasses('bw', borderWidth), generateResponsiveClasses('font-weight', fontWeight), generateResponsiveClasses('text-align', textAlign), generateResponsiveClasses('position', position), generateResponsiveClasses('z-index', zIndex), generateResponsiveClasses('whitespace', whiteSpace), generateResponsiveClasses('break', wordBreak)].concat(hoverClasses != null ? hoverClasses : [], focusClasses != null ? focusClasses : [], [(_ref3 = {
|
|
391
395
|
'flex-wrap': isFlexBox && wrap,
|
|
392
396
|
'flex-nowrap': isFlexBox && wrap === false
|
|
393
397
|
}, _ref3["background-color-" + background] = background, _ref3["font-color-" + color] = color, _ref3["border-color-" + borderColor] = borderColor, _ref3["cursor-" + cursor] = cursor, _ref3[styles$A['box-transition']] = hover || focus, _ref3)]));
|