@helpdice/ui 2.2.2 → 2.2.3

package/dist/auto-complete/index.js

@@ -2734,7 +2734,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']]])
@@ -2782,7 +2782,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/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/dist/carousal/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var require$$0 = require('react-is');
 var theme = require('@helpdice/theme');
@@ -4175,5 +4177,5 @@ _defineProperty(Carousel, "defaultProps", {
   stopSwipingHandler: slideStopSwipingHandler
 });
 
-exports.Carousel = Carousel;
 exports.Thumbs = Thumbs;
+exports.default = Carousel;

package/dist/container/box.d.ts

@@ -1,7 +1,7 @@
 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;
@@ -11,7 +11,9 @@ type ContainerProps = {
     wrap?: Wrap;
     className?: string;
 };
-declare const _default: 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;

package/dist/container/index.js

@@ -934,10 +934,10 @@ var Container = function Container(_ref) {
   }, [gap, unit]);
   var _styles$className = {
       styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-        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)')]]])
+        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/dist/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/dist/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/dist/index.js

@@ -3067,7 +3067,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']]])
@@ -3115,7 +3115,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: {
@@ -13287,10 +13287,10 @@ var Container = function Container(_ref) {
   }, [gap, unit]);
   var _styles$className = {
       styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-        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)')]]])
+        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;
@@ -16490,7 +16490,7 @@ var RatingIcon = function RatingIcon() {
 };
 RatingIcon.displayName = 'RatingIcon';
 
-var _excluded$i = ["type", "className", "icon", "count", "value", "initialValue", "onValueChange", "locked", "onLockedChange"];
+var _excluded$i = ["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) {
@@ -16503,8 +16503,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,
@@ -16523,8 +16523,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/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: {

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,7 +1,7 @@
 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;
@@ -11,7 +11,9 @@ type ContainerProps = {
     wrap?: Wrap;
     className?: string;
 };
-declare const _default: 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;

package/esm/container/box.js

@@ -27,10 +27,10 @@ var Container = function Container(_ref) {
   }, [gap, unit]);
   var _styles$className = {
       styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-        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)')]]])
+        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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.2.2",
+  "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",