@helpdice/ui 2.1.9 → 2.2.2

package/dist/container/box.d.ts

@@ -1,12 +1,17 @@
+import React from "react";
 declare const wrap: ["nowrap", "wrap", "wrap-reverse"];
 export type Wrap = typeof wrap[number];
 type ContainerProps = {
     gap?: number;
+    direction?: string;
     children?: React.ReactNode;
+    justify?: string;
+    alignItems?: string;
+    alignContent?: string;
     wrap?: Wrap;
     className?: string;
 };
-declare const _default: import("react").ForwardRefExoticComponent<ContainerProps & {
+declare const _default: React.ForwardRefExoticComponent<ContainerProps & {
     width?: string | number;
     height?: string | number;
     padding?: string | number;
@@ -38,5 +43,5 @@ declare const _default: import("react").ForwardRefExoticComponent<ContainerProps
     scale?: number;
     children?: any;
     className?: string;
-} & import("react").InputHTMLAttributes<any> & import("react").RefAttributes<unknown>>;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
 export default _default;

package/dist/container/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React$1 = require('react');
+var React = require('react');
 var theme = require('@helpdice/theme');
 
 function _arrayLikeToArray(r, a) {
@@ -106,11 +106,11 @@ var hasRequiredIndex;
 function requireIndex () {
 	if (hasRequiredIndex) return index;
 	hasRequiredIndex = 1;
-	var React = React$1;
+	var React$1 = React;
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-	var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+	var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
 
 	/*
 	Based on Glamor's sheet
@@ -546,15 +546,15 @@ function requireIndex () {
 	        throw new Error("StyleSheetRegistry: " + message + ".");
 	    }
 	}
-	var StyleSheetContext = /*#__PURE__*/ React.createContext(null);
+	var StyleSheetContext = /*#__PURE__*/ React$1.createContext(null);
 	StyleSheetContext.displayName = "StyleSheetContext";
 	function createStyleRegistry() {
 	    return new StyleSheetRegistry();
 	}
 	function StyleRegistry(param) {
 	    var configuredRegistry = param.registry, children = param.children;
-	    var rootRegistry = React.useContext(StyleSheetContext);
-	    var ref = React.useState(function() {
+	    var rootRegistry = React$1.useContext(StyleSheetContext);
+	    var ref = React$1.useState(function() {
 	        return rootRegistry || configuredRegistry || createStyleRegistry();
 	    }), registry = ref[0];
 	    return /*#__PURE__*/ React__default["default"].createElement(StyleSheetContext.Provider, {
@@ -562,16 +562,16 @@ function requireIndex () {
 	    }, children);
 	}
 	function useStyleRegistry() {
-	    return React.useContext(StyleSheetContext);
+	    return React$1.useContext(StyleSheetContext);
 	}
 
 	// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
 	// https://github.com/reactwg/react-18/discussions/110
-	var useInsertionEffect = React__default["default"].useInsertionEffect || React.useLayoutEffect;
+	var useInsertionEffect = React__default["default"].useInsertionEffect || React$1.useLayoutEffect;
 	var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
 	function JSXStyle(props) {
 	    var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
-	    var insertionEffectCalled = React.useRef(false);
+	    var insertionEffectCalled = React$1.useRef(false);
 	    // `registry` might not exist while server-side rendering
 	    if (!registry) {
 	        return null;
@@ -595,7 +595,7 @@ function requireIndex () {
 	        props.id,
 	        String(props.dynamic)
 	    ]);
-	    React.useLayoutEffect(function() {
+	    React$1.useLayoutEffect(function() {
 	        if (!document.head || insertionEffectCalled.current) {
 	            return;
 	        }
@@ -670,9 +670,9 @@ var defaultContext = {
   },
   unit: '16px'
 };
-var ScaleContext = /*#__PURE__*/React$1.createContext(defaultContext);
+var ScaleContext = /*#__PURE__*/React.createContext(defaultContext);
 var useScale = function useScale() {
-  return React$1.useContext(ScaleContext);
+  return React.useContext(ScaleContext);
 };
 
 /* "use client" */
@@ -734,7 +734,7 @@ var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   return scale > 1 ? 1 + diff : 1 - diff;
 };
 var withScale = function withScale(Render) {
-  var ScaleFC = /*#__PURE__*/React$1.forwardRef(function (_ref, ref) {
+  var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
     var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$2);
@@ -810,9 +810,9 @@ var withScale = function withScale(Render) {
       getScaleProps: generateGetScaleProps(props),
       getAllScaleProps: generateGetAllScaleProps(props)
     };
-    return /*#__PURE__*/React$1.createElement(ScaleContext.Provider, {
+    return /*#__PURE__*/React.createElement(ScaleContext.Provider, {
       value: value
-    }, /*#__PURE__*/React$1.createElement(Render, _extends({}, props, {
+    }, /*#__PURE__*/React.createElement(Render, _extends({}, props, {
       ref: ref
     }), children));
   });
@@ -862,7 +862,7 @@ var GridBasicItem = function GridBasicItem(_ref) {
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
-  var classes = React$1.useMemo(function () {
+  var classes = React.useMemo(function () {
     var aligns = {
       justify: justify,
       direction: direction,
@@ -880,7 +880,7 @@ var GridBasicItem = function GridBasicItem(_ref) {
     }, '');
     return classString.trim();
   }, [justify, direction, alignItems, alignContent, xs, sm, md, lg, xl]);
-  var layout = React$1.useMemo(function () {
+  var layout = React.useMemo(function () {
     return {
       xs: getItemLayout(xs),
       sm: getItemLayout(sm),
@@ -889,9 +889,9 @@ var GridBasicItem = function GridBasicItem(_ref) {
       xl: getItemLayout(xl)
     };
   }, [xs, sm, md, lg, xl]);
-  return /*#__PURE__*/React$1.createElement("div", _extends({}, props, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     className: _JSXStyle.dynamic([["568430467", [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || theme.useClasses('item', classes, className) || "")
-  }), children, /*#__PURE__*/React$1.createElement(_JSXStyle, {
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "568430467",
     dynamic: [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]
   }, ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme$1.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")));
@@ -913,27 +913,31 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
-var _excluded = ["gap", "children", "className"];
+var _excluded = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "className"];
 var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
 var Container = function Container(_ref) {
   var _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 0 : _ref$gap,
     children = _ref.children,
+    direction = _ref.direction,
+    justify = _ref.justify,
+    alignItems = _ref.alignItems,
+    alignContent = _ref.alignContent,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
     unit = _useScale.unit,
     SCALES = _useScale.SCALES;
-  var gapUnit = React$1.useMemo(function () {
+  var gapUnit = React.useMemo(function () {
     return "calc(".concat(gap, " * ").concat(unit, " * 1/3)");
   }, [gap, unit]);
   var _styles$className = {
       styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "2955470113",
-        dynamic: [gapUnit, wrap, SCALES.width(1, 'var(--container-width)')]
-      }, "div.__jsx-style-dynamic-selector{--gap-unit:".concat(gapUnit, ";--container-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";box-sizing:border-box;gap:var(--gap-unit);width:").concat(SCALES.width(1, 'var(--container-width)'), ";}")),
-      className: _JSXStyle.dynamic([["2955470113", [gapUnit, wrap, SCALES.width(1, 'var(--container-width)')]]])
+        id: "635877754",
+        dynamic: [gapUnit, direction, wrap, justify, alignContent, alignItems, SCALES.width(1, 'var(--container-width)')]
+      }, "div.__jsx-style-dynamic-selector{--gap-unit:".concat(gapUnit, ";--container-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";box-sizing:border-box;gap:var(--gap-unit);width:").concat(SCALES.width(1, 'var(--container-width)'), ";}")),
+      className: _JSXStyle.dynamic([["635877754", [gapUnit, direction, wrap, justify, alignContent, alignItems, SCALES.width(1, 'var(--container-width)')]]])
     },
     resolveClassName = _styles$className.className,
     styles = _styles$className.styles;