@helpdice/ui 2.1.9 → 2.2.3

package/dist/input/index.js

@@ -2720,7 +2720,7 @@ function PhoneInput(_ref) {
     height: "20",
     src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
     srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
-    alt: "Flag of ".concat(selectedCountry.label),
+    alt: "".concat(selectedCountry.label, " Flag"),
     className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
   }), /*#__PURE__*/React.createElement("span", {
     className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
@@ -2768,7 +2768,7 @@ function PhoneInput(_ref) {
       height: "23",
       src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
       srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
-      alt: "Flag of ".concat(c.label),
+      alt: "".concat(c.label, " Flag"),
       className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
     }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
       style: {

package/dist/rating/index.js

@@ -903,7 +903,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded = ["type", "className", "icon", "count", "value", "initialValue", "onValueChange", "locked", "onLockedChange"];
+var _excluded = ["color", "className", "icon", "count", "value", "initialValue", "onValueChange", "locked", "onLockedChange"];
 tupleNumber(2, 3, 4, 5, 6, 7, 8, 9, 10);
 tupleNumber(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
 var getColor = function getColor(type, palette) {
@@ -916,8 +916,8 @@ var getColor = function getColor(type, palette) {
   return colors[type] || colors["default"];
 };
 var RatingComponent = function RatingComponent(_ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
+  var _ref$color = _ref.color,
+    _color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$icon = _ref.icon,
@@ -936,8 +936,8 @@ var RatingComponent = function RatingComponent(_ref) {
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var color = React.useMemo(function () {
-    return getColor(type, theme$1.palette);
-  }, [type, theme$1.palette]);
+    return getColor(_color, theme$1.palette);
+  }, [_color, theme$1.palette]);
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],

package/dist/rating/rating.d.ts

@@ -6,7 +6,7 @@ declare const ratingValueTuple: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 export type RatingValue = typeof ratingValueTuple[number];
 export type RatingCount = typeof ratingCountTuple[number];
 interface Props {
-    type?: RatingTypes;
+    color?: RatingTypes;
     className?: string;
     icon?: JSX.Element;
     count?: RatingCount | number;

package/dist/table/index.js

@@ -2766,7 +2766,7 @@ function PhoneInput(_ref) {
     height: "20",
     src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
     srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
-    alt: "Flag of ".concat(selectedCountry.label),
+    alt: "".concat(selectedCountry.label, " Flag"),
     className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
   }), /*#__PURE__*/React.createElement("span", {
     className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
@@ -2814,7 +2814,7 @@ function PhoneInput(_ref) {
       height: "23",
       src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
       srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
-      alt: "Flag of ".concat(c.label),
+      alt: "".concat(c.label, " Flag"),
       className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme$1.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme$1.type == 'dark' ? '#3a3d3d' : '#efefef']]])
     }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
       style: {
@@ -22707,6 +22707,7 @@ var TableCell = function TableCell(_ref) {
     onCellClick = _ref.onCellClick;
   /* eslint-disable react/jsx-no-useless-fragment */
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    var _row$_id;
     var currentRowValue = row[column.prop];
     var cellValue = currentRowValue || emptyText;
     var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
@@ -22721,7 +22722,7 @@ var TableCell = function TableCell(_ref) {
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
       "data-column": column.prop,
-      key: "row-td-".concat(currentRowValue.id, "-").concat(column.prop.toString()),
+      key: "row-td-".concat((_row$_id = row === null || row === void 0 ? void 0 : row._id) !== null && _row$_id !== void 0 ? _row$_id : 'col', "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
       },

package/esm/carousal/index.d.ts

@@ -1,3 +1,4 @@
-export { default as Carousel } from './component';
+import Carousel from './component';
 export type { CarouselProps } from './component/types';
 export { default as Thumbs } from './component/Thumbs';
+export default Carousel;

package/esm/carousal/index.js

@@ -1,2 +1,3 @@
-export { default as Carousel } from './component';
-export { default as Thumbs } from './component/Thumbs';
+import Carousel from './component';
+export { default as Thumbs } from './component/Thumbs';
+export default Carousel;

package/esm/container/box.d.ts

@@ -1,12 +1,19 @@
+import React from "react";
 declare const wrap: ["nowrap", "wrap", "wrap-reverse"];
 export type Wrap = typeof wrap[number];
-type ContainerProps = {
+type Props = {
     gap?: number;
+    direction?: string;
     children?: React.ReactNode;
+    justify?: string;
+    alignItems?: string;
+    alignContent?: string;
     wrap?: Wrap;
     className?: string;
 };
-declare const _default: import("react").ForwardRefExoticComponent<ContainerProps & {
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type ContainerProps = Props & NativeAttrs;
+declare const _default: React.ForwardRefExoticComponent<Props & NativeAttrs & {
     width?: string | number;
     height?: string | number;
     padding?: string | number;
@@ -38,5 +45,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/esm/container/box.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["gap", "children", "className"];
+var _excluded = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "className"];
 import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from "react";
 import GridBasicItem from "../grid/basic-item";
 import useScale, { withScale } from '../use-scale';
-import { useMemo } from "react";
 import { useClasses } from '@helpdice/theme';
 import { tuple } from '../utils/prop-types';
 var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
@@ -12,6 +12,10 @@ 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);
@@ -23,10 +27,10 @@ var Container = function Container(_ref) {
   }, [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: "4110955330",
+        dynamic: [gapUnit, direction, wrap, justify, alignContent, alignItems, SCALES.width(1, 'var(--container-width)'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+      }, "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)'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")),
+      className: _JSXStyle.dynamic([["4110955330", [gapUnit, direction, wrap, justify, alignContent, alignItems, SCALES.width(1, 'var(--container-width)'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
     },
     resolveClassName = _styles$className.className,
     styles = _styles$className.styles;

package/esm/copy-to-clipboard/clipboard.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
-type ClipboardProps = {
+type Props = {
     showIcon: boolean;
     text: string;
     children: React.ReactNode;
-    onCopy: (text: string, result: any) => void;
-    options: {
+    onCopy?: (text: string, result: any) => void;
+    options?: {
         debug: boolean;
         message: string;
         format: string;
     };
 };
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type ClipboardProps = Props & NativeAttrs;
 export default function Clipboard(props: ClipboardProps): React.JSX.Element;
 export {};

package/esm/copy-to-clipboard/clipboard.js

@@ -4,6 +4,7 @@ import copy from './copy';
 import { Copy } from '@helpdice/icons';
 import Button from '../button';
 import { useToasts } from '@helpdice/theme';
+
 // export function Clipboard(props: ClipboardProps) {
 //     const { setToast } = useToasts();
 //     const { showIcon, text, onCopy, options: options, children, } = props;

package/esm/index.d.ts

@@ -123,7 +123,7 @@ export { default as Skeleton } from './skeleton';
 export * from './login-with';
 export { default as Swipe } from './swipe';
 export type { SwipeProps } from './swipe';
-export { Carousel } from './carousal';
+export { default as Carousel } from './carousal';
 export type { CarouselProps } from './carousal';
 export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './input/currency-input';
 export { default as useToasts } from './use-toasts';

package/esm/index.js

@@ -83,7 +83,7 @@ export * from './login-with';
 // Swipe
 export { default as Swipe } from './swipe';
 // Carousel
-export { Carousel } from './carousal';
+export { default as Carousel } from './carousal';
 
 // Currency Input
 

package/esm/input/phone-input/phone.js

@@ -99,7 +99,7 @@ function PhoneInput(_ref) {
     height: "20",
     src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
     srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
-    alt: "Flag of ".concat(selectedCountry.label),
+    alt: "".concat(selectedCountry.label, " Flag"),
     className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
   }), /*#__PURE__*/React.createElement("span", {
     className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
@@ -147,7 +147,7 @@ function PhoneInput(_ref) {
       height: "23",
       src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
       srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
-      alt: "Flag of ".concat(c.label),
+      alt: "".concat(c.label, " Flag"),
       className: _JSXStyle.dynamic([["3237870810", [SCALES.width(1, defaultWidth), SCALES.height(2.25), hoverBorder, borderColor, borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
     }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
       style: {

package/esm/rating/rating.d.ts

@@ -6,7 +6,7 @@ declare const ratingValueTuple: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 export type RatingValue = typeof ratingValueTuple[number];
 export type RatingCount = typeof ratingCountTuple[number];
 interface Props {
-    type?: RatingTypes;
+    color?: RatingTypes;
     className?: string;
     icon?: JSX.Element;
     count?: RatingCount | number;

package/esm/rating/rating.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "className", "icon", "count", "value", "initialValue", "onValueChange", "locked", "onLockedChange"];
+var _excluded = ["color", "className", "icon", "count", "value", "initialValue", "onValueChange", "locked", "onLockedChange"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
@@ -23,8 +23,8 @@ var getColor = function getColor(type, palette) {
   return colors[type] || colors["default"];
 };
 var RatingComponent = function RatingComponent(_ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
+  var _ref$color = _ref.color,
+    _color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$icon = _ref.icon,
@@ -43,8 +43,8 @@ var RatingComponent = function RatingComponent(_ref) {
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var color = useMemo(function () {
-    return getColor(type, theme.palette);
-  }, [type, theme.palette]);
+    return getColor(_color, theme.palette);
+  }, [_color, theme.palette]);
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],

package/esm/table/table-cell.js

@@ -8,6 +8,7 @@ var TableCell = function TableCell(_ref) {
     onCellClick = _ref.onCellClick;
   /* eslint-disable react/jsx-no-useless-fragment */
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
+    var _row$_id;
     var currentRowValue = row[column.prop];
     var cellValue = currentRowValue || emptyText;
     var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
@@ -22,7 +23,7 @@ var TableCell = function TableCell(_ref) {
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
       "data-column": column.prop,
-      key: "row-td-".concat(currentRowValue.id, "-").concat(column.prop.toString()),
+      key: "row-td-".concat((_row$_id = row === null || row === void 0 ? void 0 : row._id) !== null && _row$_id !== void 0 ? _row$_id : 'col', "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.1.9",
+  "version": "2.2.3",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",
@@ -63,8 +63,9 @@
     "@babel/preset-typescript": "^7.14.5",
     "@babel/standalone": "^7.28.3",
     "@helpdice/icons": "^1.2.5",
-    "@helpdice/sdk": "^0.2.9",
+    "@helpdice/sdk": "^0.3.3",
     "@helpdice/utils": "^0.1.4",
+    "@helpdice/pro": "2.0.1",
     "@mapbox/rehype-prism": "^0.9.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",