@hyphen/hyphen-components 5.7.4 → 5.8.1

package/dist/components/Box/Box.d.ts

@@ -1,5 +1,5 @@
 import * as CSS from 'csstype';
-import { BaseSpacing, BorderRadiusSize, BorderSize, BoxShadowSize, CssAlignContentValue, CssAlignItemsValue, CssDisplayValue, CssFlexDirectionValue, CssFlexValue, CssJustifyContentValue, CssOverflowValue, CssTextAlignValue, DimensionSize, FontColor, FontFamily, FontSize, FontWeight, ResponsiveProp, SpacingSize, ZIndexSize, BackgroundColor, BorderColor } from '../../types';
+import { BaseSpacing, BorderRadiusSize, BorderSize, BoxShadowSize, CssAlignContentValue, CssAlignItemsValue, CssDisplayValue, CssFlexDirectionValue, CssFlexValue, CssJustifyContentValue, CssOverflowValue, CssTextAlignValue, DimensionSize, FontColor, FontFamily, FontSize, FontWeight, ResponsiveProp, SpacingSize, ZIndexSize, BackgroundColor, BorderColor, CssWhiteSpaceValue, CssWordBreakValue } from '../../types';
 import { CSSProperties, FC, ReactNode } from 'react';
 import { KnownKeys } from '../../types/lib.types';
 export type HoverableBoxProperties = 'color' | 'borderColor' | 'shadow' | 'background';
@@ -200,6 +200,10 @@ export interface BoxProps {
      * the alignment of the text
      */
     textAlign?: CssTextAlignValue | ResponsiveProp<CssTextAlignValue>;
+    /**
+     * Control the whitespace behavior of the Box
+     */
+    whiteSpace?: CssWhiteSpaceValue | ResponsiveProp<CssWhiteSpaceValue>;
     /**
      * By default, a Box's items will all try to fit onto one line.
      * Change that and allow the items to wrap as needed wrap
@@ -210,6 +214,10 @@ export interface BoxProps {
      * or a [width token](/?path=/docs/foundation-design-tokens--docs#width)
      */
     width?: DimensionSize | ResponsiveProp<DimensionSize> | string;
+    /**
+     * Control the word break behavior of the Box
+     */
+    wordBreak?: CssWordBreakValue | ResponsiveProp<CssWordBreakValue>;
     /**
      * ZIndex value for the element. Can be one of the predetermined token values.
      * Can be responsive.

package/dist/components/Box/Box.stories.d.ts

@@ -23,11 +23,13 @@ export declare const Margin: () => React.JSX.Element;
 export declare const Padding: () => React.JSX.Element;
 export declare const Radius: () => React.JSX.Element;
 export declare const Shadow: () => React.JSX.Element;
+export declare const WhiteSpace: () => React.JSX.Element;
 export declare const Width: () => React.JSX.Element;
 export declare const WidthTokens: () => React.JSX.Element;
 export declare const WidthPercentages: () => React.JSX.Element;
 export declare const WidthMax: () => React.JSX.Element;
 export declare const WidthMin: () => React.JSX.Element;
+export declare const WordBreak: () => React.JSX.Element;
 export declare const Height: () => React.JSX.Element;
 export declare const HeightTokens: () => React.JSX.Element;
 export declare const HeightPercentages: () => React.JSX.Element;

package/dist/css/utilities.css

@@ -3,7 +3,7 @@
   \***************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Wed, 23 Jul 2025 23:15:03 GMT
+ * Generated on Fri, 15 Aug 2025 18:14:26 GMT
  */
 
 .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -864,6 +864,24 @@
 
 .transform-normal-case { text-transform: var(--font-text-transform-normal-case); }
 
+.whitespace-normal { white-space: var(--font-white-space-normal); }
+
+.whitespace-nowrap { white-space: var(--font-white-space-nowrap); }
+
+.whitespace-pre { white-space: var(--font-white-space-pre); }
+
+.whitespace-pre-line { white-space: var(--font-white-space-pre-line); }
+
+.whitespace-pre-wrap { white-space: var(--font-white-space-pre-wrap); }
+
+.whitespace-break-spaces { white-space: var(--font-white-space-break-spaces); }
+
+.break-normal { word-break: var(--font-word-break-normal); }
+
+.break-all { word-break: var(--font-word-break-all); }
+
+.break-keep { word-break: var(--font-word-break-keep); }
+
 .bw-0 { border-width: var(--size-border-width-0); border-style: solid; }
 
 .bw-top-0 { border-top-width: var(--size-border-width-0); border-top-style: solid; }
@@ -2171,6 +2189,24 @@
 .z-sticky { z-index: var(--size-z-index-sticky); }
 
 @media (min-width: 680px) {
+  .whitespace-normal-tablet { white-space: var(--font-white-space-normal); }
+
+  .whitespace-nowrap-tablet { white-space: var(--font-white-space-nowrap); }
+
+  .whitespace-pre-tablet { white-space: var(--font-white-space-pre); }
+
+  .whitespace-pre-line-tablet { white-space: var(--font-white-space-pre-line); }
+
+  .whitespace-pre-wrap-tablet { white-space: var(--font-white-space-pre-wrap); }
+
+  .whitespace-break-spaces-tablet { white-space: var(--font-white-space-break-spaces); }
+
+  .break-normal-tablet { word-break: var(--font-word-break-normal); }
+
+  .break-all-tablet { word-break: var(--font-word-break-all); }
+
+  .break-keep-tablet { word-break: var(--font-word-break-keep); }
+
   .bw-0-tablet { border-width: var(--size-border-width-0); border-style: solid; }
 
   .bw-top-0-tablet { border-top-width: var(--size-border-width-0); border-top-style: solid; }
@@ -3458,6 +3494,24 @@
 }
 
 @media (min-width: 992px) {
+  .whitespace-normal-desktop { white-space: var(--font-white-space-normal); }
+
+  .whitespace-nowrap-desktop { white-space: var(--font-white-space-nowrap); }
+
+  .whitespace-pre-desktop { white-space: var(--font-white-space-pre); }
+
+  .whitespace-pre-line-desktop { white-space: var(--font-white-space-pre-line); }
+
+  .whitespace-pre-wrap-desktop { white-space: var(--font-white-space-pre-wrap); }
+
+  .whitespace-break-spaces-desktop { white-space: var(--font-white-space-break-spaces); }
+
+  .break-normal-desktop { word-break: var(--font-word-break-normal); }
+
+  .break-all-desktop { word-break: var(--font-word-break-all); }
+
+  .break-keep-desktop { word-break: var(--font-word-break-keep); }
+
   .bw-0-desktop { border-width: var(--size-border-width-0); border-style: solid; }
 
   .bw-top-0-desktop { border-top-width: var(--size-border-width-0); border-top-style: solid; }
@@ -4745,6 +4799,24 @@
 }
 
 @media (min-width: 1280px) {
+  .whitespace-normal-hd { white-space: var(--font-white-space-normal); }
+
+  .whitespace-nowrap-hd { white-space: var(--font-white-space-nowrap); }
+
+  .whitespace-pre-hd { white-space: var(--font-white-space-pre); }
+
+  .whitespace-pre-line-hd { white-space: var(--font-white-space-pre-line); }
+
+  .whitespace-pre-wrap-hd { white-space: var(--font-white-space-pre-wrap); }
+
+  .whitespace-break-spaces-hd { white-space: var(--font-white-space-break-spaces); }
+
+  .break-normal-hd { word-break: var(--font-word-break-normal); }
+
+  .break-all-hd { word-break: var(--font-word-break-all); }
+
+  .break-keep-hd { word-break: var(--font-word-break-keep); }
+
   .bw-0-hd { border-width: var(--size-border-width-0); border-style: solid; }
 
   .bw-top-0-hd { border-top-width: var(--size-border-width-0); border-top-style: solid; }

package/dist/css/variables.css

@@ -3,7 +3,7 @@
   \*********************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Wed, 23 Jul 2025 23:15:03 GMT
+ * Generated on Fri, 15 Aug 2025 18:14:26 GMT
  */
 
 :root {
@@ -231,6 +231,15 @@
   --font-text-transform-lowercase: lowercase;
   --font-text-transform-capitalize: capitalize;
   --font-text-transform-normal-case: normal-case;
+  --font-white-space-normal: normal;
+  --font-white-space-nowrap: nowrap;
+  --font-white-space-pre: pre;
+  --font-white-space-pre-line: pre-line;
+  --font-white-space-pre-wrap: pre-wrap;
+  --font-white-space-break-spaces: break-spaces;
+  --font-word-break-normal: normal;
+  --font-word-break-all: break-all;
+  --font-word-break-keep: keep-all;
   --size-border-width-0: 0rem;
   --size-border-width-sm: 0.0625rem;
   --size-border-width-md: 0.125rem;
@@ -357,7 +366,7 @@
   \*******************************************************************************************************************************/
 /**
  * Do not edit directly
- * Generated on Wed, 23 Jul 2025 23:15:03 GMT
+ * Generated on Fri, 15 Aug 2025 18:14:26 GMT
  */
 
 :root.dark {

package/dist/hyphen-components.cjs.development.js

@@ -281,7 +281,7 @@ Component, props, getDefault) {
 
 var styles$A = {"box-transition":"Box-module_box-transition__eQx8C"};
 
-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"];
+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"];
 /**
  * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
  * elements.
@@ -364,8 +364,12 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     textAlign = _ref$textAlign === void 0 ? undefined : _ref$textAlign,
     _ref$wrap = _ref.wrap,
     wrap = _ref$wrap === void 0 ? undefined : _ref$wrap,
+    _ref$whiteSpace = _ref.whiteSpace,
+    whiteSpace = _ref$whiteSpace === void 0 ? undefined : _ref$whiteSpace,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? undefined : _ref$width,
+    _ref$wordBreak = _ref.wordBreak,
+    wordBreak = _ref$wordBreak === void 0 ? undefined : _ref$wordBreak,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? undefined : _ref$zIndex,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded$R);
@@ -414,7 +418,7 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var hoverClasses = getStatefulClasses('hover', hover);
   var focusClasses = getStatefulClasses('focus', focus);
-  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 = {
+  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 = {
     'flex-wrap': isFlexBox && wrap,
     'flex-nowrap': isFlexBox && wrap === false
   }, _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)]));