@kubit-ui-web/react-components 2.0.0-beta.48 → 2.0.0-beta.49

package/dist/esm/components/carousel/hooks/utils/calc.utils.js

@@ -1 +1,73 @@
-const e=({element:e})=>{const t=window.getComputedStyle(e);return parseFloat(t.getPropertyValue("padding-left")||"0")+parseFloat(t.getPropertyValue("padding-right")||"0")},t=(e,t)=>{if(!e||!t)return 0;const n=e.offsetLeft,r=t.offsetLeft;return Math.abs(r-n)},n=({numElementsPerPage:e,numElementsToSlide:t})=>t?Math.max(1,Math.min(t,e)):e,r=({elementsLength:e,numElementsPerPage:t,numElementsToSlide:r})=>{if(e<=t)return 1;const i=n({numElementsPerPage:t,numElementsToSlide:r});return Math.ceil((e-t+i)/i)},i=({currentPage:e,elementsLength:t,isCircular:i,numElementsPerPage:l,numElementsToSlide:s})=>{if(t<=l)return{firstIndexInView:0,lastIndexInView:t-1};const o=n({numElementsPerPage:l,numElementsToSlide:s});let a=e*o+l-1,d=0;return i&&t>l&&(d=l+1,a+=d),e===r({elementsLength:t,numElementsPerPage:l,numElementsToSlide:o})?a=d+t+l-1:e<0?a=d-1:a-d>t-1&&(a=d+t-1),{firstIndexInView:a-l+1,lastIndexInView:a}},l=({contentContainer:t,elementsLength:n,extraPadding:r,rootContainer:i,viewerContainer:l})=>{const s=t.firstElementChild;if(!s)return;let o=i.offsetWidth;o-=2*r,o-=e({element:l});let a=0;const d=s.offsetLeft;for(let e=0;e<t.children.length;e++){const n=t.children[e];if(d+n.offsetLeft+n.offsetWidth>o)break;a++}return Math.max(Math.min(n,a),1)},s=({centerMode:e,contentContainer:t})=>{let n=0;if(t.childNodes.length<2)return n;const r=t.childNodes[0],i=t.childNodes[1];e&&r.style&&i.style&&(r.style.transition="none",i.style.transition="none",r.style.transform="scale(1)",i.style.transform="scale(1)");const l=r?.getBoundingClientRect()?.right,s=i?.getBoundingClientRect()?.left;return e&&r.style&&i.style&&(r.style.removeProperty("transform"),i.style.removeProperty("transform"),r.style.removeProperty("transition"),i.style.removeProperty("transition")),void 0!==l&&void 0!==s&&(n=Math.abs(l-s)),n},o=({centerMode:t,contentContainer:n,extraPadding:r,numElementsPerPage:i,viewerContainer:l})=>{const o=(i-1)*s({centerMode:t,contentContainer:n}),a=e({element:l});return(l.getBoundingClientRect().width-o-2*r-a)/i},a=({contentContainer:n,extraPadding:r,firstIndexInView:i,lastIndexInView:l,viewerContainer:s})=>{const o=n.children[i],a=n.children[l],d=t(o,a),c=e({element:s});return`${d+a.offsetWidth+2*r+c}px`},d=({centerExtremesWhenExtraPadding:e,circular:n,contentContainer:r,currentPage:i,extraPadding:l,firstIndexInView:s,numPages:o})=>{let a=t(r.firstChild,r.children[s]);return l&&(e||n||0!==i&&i!==o-1?a-=l:n||i!==o-1||(a-=2*l)),-a+"px"},c={calcAdjustedNumElementsToSlide:n,calcContentContainerLeftPosition:d,calcFirstAndLastIndexInCarouselView:i,calcGapBetweenContentContainerElements:s,calcNumElementsPerPage:l,calcNumPages:r,calcSliceWidth:o,calcViewerWidth:a,calcXDistanceBetween2Elements:t};export{n as calcAdjustedNumElementsToSlide,d as calcContentContainerLeftPosition,i as calcFirstAndLastIndexInCarouselView,s as calcGapBetweenContentContainerElements,e as calcHorizontalElementPadding,l as calcNumElementsPerPage,r as calcNumPages,o as calcSliceWidth,a as calcViewerWidth,t as calcXDistanceBetween2Elements,c as default};
+const calcHorizontalElementPadding = ({ element: e }) => {
+	let t = window.getComputedStyle(e);
+	return parseFloat(t.getPropertyValue("padding-left") || "0") + parseFloat(t.getPropertyValue("padding-right") || "0");
+}, calcXDistanceBetween2Elements = (e, t) => !e || !t ? 0 : Math.abs(t.offsetLeft - e.offsetLeft), calcAdjustedNumElementsToSlide = ({ numElementsPerPage: e, numElementsToSlide: t }) => t ? Math.max(1, Math.min(t, e)) : e, calcNumPages = ({ elementsLength: e, numElementsPerPage: t, numElementsToSlide: r }) => {
+	if (e <= t) return 1;
+	let i = calcAdjustedNumElementsToSlide({
+		numElementsPerPage: t,
+		numElementsToSlide: r
+	});
+	return Math.ceil((e - t + i) / i);
+}, calcFirstAndLastIndexInCarouselView = ({ currentPage: e, elementsLength: t, isCircular: i, numElementsPerPage: a, numElementsToSlide: o }) => {
+	if (t <= a) return {
+		firstIndexInView: 0,
+		lastIndexInView: t - 1
+	};
+	let s = calcAdjustedNumElementsToSlide({
+		numElementsPerPage: a,
+		numElementsToSlide: o
+	}), c = calcNumPages({
+		elementsLength: t,
+		numElementsPerPage: a,
+		numElementsToSlide: s
+	}), l = e * s + a - 1, u = i && t > a, d = 0;
+	return u && (d = a + 1, l += d), e === c ? l = d + t + a - 1 : e < 0 ? l = d - 1 : l - d > t - 1 && (l = d + t - 1), {
+		firstIndexInView: l - a + 1,
+		lastIndexInView: l
+	};
+}, calcNumElementsPerPage = ({ contentContainer: t, elementsLength: n, extraPadding: r, rootContainer: i, viewerContainer: a }) => {
+	let o = t.firstElementChild;
+	if (!o) return;
+	let s = i.offsetWidth;
+	s -= 2 * r;
+	let c = calcHorizontalElementPadding({ element: a });
+	s -= c;
+	let l = 0, u = o.offsetLeft;
+	for (let e = 0; e < t.children.length; e++) {
+		let n = t.children[e];
+		if (u + n.offsetLeft + n.offsetWidth > s) break;
+		l++;
+	}
+	return Math.max(Math.min(n, l), 1);
+}, calcGapBetweenContentContainerElements = ({ centerMode: e, contentContainer: t }) => {
+	let n = 0;
+	if (t.childNodes.length < 2) return n;
+	let r = t.childNodes[0], i = t.childNodes[1];
+	e && r.style && i.style && (r.style.transition = "none", i.style.transition = "none", r.style.transform = "scale(1)", i.style.transform = "scale(1)");
+	let a = r?.getBoundingClientRect()?.right, o = i?.getBoundingClientRect()?.left;
+	return e && r.style && i.style && (r.style.removeProperty("transform"), i.style.removeProperty("transform"), r.style.removeProperty("transition"), i.style.removeProperty("transition")), a !== void 0 && o !== void 0 && (n = Math.abs(a - o)), n;
+};
+var calc_utils_default = {
+	calcAdjustedNumElementsToSlide,
+	calcContentContainerLeftPosition: ({ centerExtremesWhenExtraPadding: e, circular: n, contentContainer: r, currentPage: i, extraPadding: a, firstIndexInView: o, numPages: s }) => {
+		let c = calcXDistanceBetween2Elements(r.firstChild, r.children[o]);
+		return a && (e || n || i !== 0 && i !== s - 1 ? c -= a : !n && i === s - 1 && (c -= a * 2)), `${-c}px`;
+	},
+	calcFirstAndLastIndexInCarouselView,
+	calcGapBetweenContentContainerElements,
+	calcNumElementsPerPage,
+	calcNumPages,
+	calcSliceWidth: ({ centerMode: t, contentContainer: n, extraPadding: r, numElementsPerPage: i, viewerContainer: a }) => {
+		let s = calcGapBetweenContentContainerElements({
+			centerMode: t,
+			contentContainer: n
+		}), c = (i - 1) * s, l = calcHorizontalElementPadding({ element: a });
+		return (a.getBoundingClientRect().width - c - 2 * r - l) / i;
+	},
+	calcViewerWidth: ({ contentContainer: n, extraPadding: r, firstIndexInView: i, lastIndexInView: a, viewerContainer: o }) => {
+		let s = n.children[i], c = n.children[a], l = calcXDistanceBetween2Elements(s, c), u = calcHorizontalElementPadding({ element: o });
+		return `${l + c.offsetWidth + 2 * r + u}px`;
+	},
+	calcXDistanceBetween2Elements
+};
+export { calc_utils_default as default };

package/dist/esm/components/carousel/hooks/utils/constants.js

@@ -1 +1,6 @@
-const _={PROPERTY_TO_HANDLE_TRANSITION_END:"left",THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING:20,THRESHOLD_TO_DECIDE_IF_SWIPE_ON_DRAG_ENDS:0};export{_ as default};
+var constants_default = {
+	PROPERTY_TO_HANDLE_TRANSITION_END: "left",
+	THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING: 20,
+	THRESHOLD_TO_DECIDE_IF_SWIPE_ON_DRAG_ENDS: 0
+};
+export { constants_default as default };

package/dist/esm/components/carousel/hooks/utils/dom.utils.js

@@ -1 +1,71 @@
-import e from"./calc.utils.js";const t=({centerMode:t,contentContainer:n,extraPadding:i,numElementsPerPage:r,viewerContainer:l})=>{const o=e.calcSliceWidth({centerMode:t,contentContainer:n,extraPadding:i,numElementsPerPage:r,viewerContainer:l});for(let e=0;e<n.childNodes.length;e++){const t=n.childNodes[e];t instanceof HTMLElement&&(t.style.width=`${o}px`)}},n=({contentContainer:e,firstIndexInView:t,lastIndexInView:n})=>{for(let i=0;i<e.children.length;i++)i<t||i>n?e.children[i].setAttribute("inert",""):e.children[i].removeAttribute("inert")},i=({contentContainer:t,extraPadding:n,firstIndexInView:i,lastIndexInView:r,viewerContainer:l})=>{const o=e.calcViewerWidth({contentContainer:t,extraPadding:n,firstIndexInView:i,lastIndexInView:r,viewerContainer:l});l.style.width=o},r=({contentContainer:e,firstIndexInView:t,lastIndexInView:n,numElementsPerPage:i})=>{if(i%2!=0){const i=t+(n-t)/2;e.children[i].setAttribute("data-highlighted","true")}},l=({contentContainer:e})=>{for(let t=0;t<e.children.length;t++)e.children[t].removeAttribute("data-highlighted")},o=({circular:e,contentContainer:t,elementsLength:n,numElementsPerPage:i})=>{if(t.children.length>n){const e=(t.children.length-n)/2;for(let n=0;n<e;n++)t.firstElementChild&&t.removeChild(t.firstElementChild),t.lastElementChild&&t.removeChild(t.lastElementChild)}if(e&&n>i){const e=[],n=[],r=t.children.length,l=i+1;for(let i=0;i<l;i++){const l=t.children[i];l&&e.push(l.cloneNode(!0));const o=t.children[r-1-i];o&&n.push(o.cloneNode(!0))}e.forEach(e=>t.appendChild(e)),n.forEach(e=>t.insertBefore(e,t.firstChild))}},a={center:"center",left:"flex-start",right:"flex-end"},d=({allowModifySliceWidth:e,contentContainer:t,onePageAlign:n,rootContainer:i})=>{e?t.style.justifyContent=a[n]:i.style.justifyContent=a[n]},s=({contentContainer:t,currentPage:n,elementsLength:i,extraPadding:r,numElementsPerPage:l,numPages:o})=>{const a=n===o;if(a||-1===n){const n=a?l+1:i+1;let d=e.calcXDistanceBetween2Elements(t.firstChild,t.children[n]);return d-=r,t.style.left=-d+"px",{newPage:a?0:o-1}}return{newPage:n}},c={alignOnePageCarousel:d,applyCenterMode:r,deleteCenterMode:l,manageCircularClones:o,udpateCarouselPositionOnEdge:s,updateContentElementsAriaVisibility:n,updateSlicesWidth:t,updateViewerWidth:i};export{d as alignOnePageCarousel,r as applyCenterMode,c as default,l as deleteCenterMode,o as manageCircularClones,s as udpateCarouselPositionOnEdge,n as updateContentElementsAriaVisibility,t as updateSlicesWidth,i as updateViewerWidth};
+import calc_utils_default from "./calc.utils.js";
+const updateSlicesWidth = ({ centerMode: t, contentContainer: n, extraPadding: r, numElementsPerPage: i, viewerContainer: a }) => {
+	let o = calc_utils_default.calcSliceWidth({
+		centerMode: t,
+		contentContainer: n,
+		extraPadding: r,
+		numElementsPerPage: i,
+		viewerContainer: a
+	});
+	for (let e = 0; e < n.childNodes.length; e++) {
+		let t = n.childNodes[e];
+		t instanceof HTMLElement && (t.style.width = `${o}px`);
+	}
+}, updateContentElementsAriaVisibility = ({ contentContainer: e, firstIndexInView: t, lastIndexInView: n }) => {
+	for (let r = 0; r < e.children.length; r++) r < t || r > n ? e.children[r].setAttribute("inert", "") : e.children[r].removeAttribute("inert");
+}, updateViewerWidth = ({ contentContainer: t, extraPadding: n, firstIndexInView: r, lastIndexInView: i, viewerContainer: a }) => {
+	let o = calc_utils_default.calcViewerWidth({
+		contentContainer: t,
+		extraPadding: n,
+		firstIndexInView: r,
+		lastIndexInView: i,
+		viewerContainer: a
+	});
+	a.style.width = o;
+}, applyCenterMode = ({ contentContainer: e, firstIndexInView: t, lastIndexInView: n, numElementsPerPage: r }) => {
+	if (r % 2 != 0) {
+		let r = t + (n - t) / 2;
+		e.children[r].setAttribute("data-highlighted", "true");
+	}
+}, deleteCenterMode = ({ contentContainer: e }) => {
+	for (let t = 0; t < e.children.length; t++) e.children[t].removeAttribute("data-highlighted");
+}, manageCircularClones = ({ circular: e, contentContainer: t, elementsLength: n, numElementsPerPage: r }) => {
+	if (t.children.length > n) {
+		let e = (t.children.length - n) / 2;
+		for (let n = 0; n < e; n++) t.firstElementChild && t.removeChild(t.firstElementChild), t.lastElementChild && t.removeChild(t.lastElementChild);
+	}
+	if (e && n > r) {
+		let e = [], n = [], i = t.children.length, a = r + 1;
+		for (let r = 0; r < a; r++) {
+			let a = t.children[r];
+			a && e.push(a.cloneNode(!0));
+			let o = t.children[i - 1 - r];
+			o && n.push(o.cloneNode(!0));
+		}
+		e.forEach((e) => t.appendChild(e)), n.forEach((e) => t.insertBefore(e, t.firstChild));
+	}
+};
+var OnePageAlignMap = {
+	center: "center",
+	left: "flex-start",
+	right: "flex-end"
+}, dom_utils_default = {
+	alignOnePageCarousel: ({ allowModifySliceWidth: e, contentContainer: t, onePageAlign: n, rootContainer: r }) => {
+		e ? t.style.justifyContent = OnePageAlignMap[n] : r.style.justifyContent = OnePageAlignMap[n];
+	},
+	applyCenterMode,
+	deleteCenterMode,
+	manageCircularClones,
+	udpateCarouselPositionOnEdge: ({ contentContainer: t, currentPage: n, elementsLength: r, extraPadding: i, numElementsPerPage: a, numPages: o }) => {
+		let s = n === o;
+		if (s || n === -1) {
+			let n = s ? a + 1 : r + 1, c = calc_utils_default.calcXDistanceBetween2Elements(t.firstChild, t.children[n]);
+			return c -= i, t.style.left = `${-c}px`, { newPage: s ? 0 : o - 1 };
+		}
+		return { newPage: n };
+	},
+	updateContentElementsAriaVisibility,
+	updateSlicesWidth,
+	updateViewerWidth
+};
+export { dom_utils_default as default };

package/dist/esm/components/carousel/types/carousel.js

@@ -1 +1,2 @@
-const e="{{currentPage}}",n="{{numPages}}";export{e as CAROUSEL_BUILD_SCREEN_READER_CURRENT_PAGE_KEY,n as CAROUSEL_BUILD_SCREEN_READER_NUM_PAGES_KEY};
+const CAROUSEL_BUILD_SCREEN_READER_CURRENT_PAGE_KEY = "{{currentPage}}", CAROUSEL_BUILD_SCREEN_READER_NUM_PAGES_KEY = "{{numPages}}";
+export { CAROUSEL_BUILD_SCREEN_READER_CURRENT_PAGE_KEY, CAROUSEL_BUILD_SCREEN_READER_NUM_PAGES_KEY };

package/dist/esm/components/carousel/utils/carousel.utils.js

@@ -1 +1,15 @@
-import{CAROUSEL_BUILD_SCREEN_READER_CURRENT_PAGE_KEY as e,CAROUSEL_BUILD_SCREEN_READER_NUM_PAGES_KEY as n}from"../types/carousel.js";const t=({content:t,currentPage:r,numPages:c})=>{const g=new RegExp(e,"g"),o=new RegExp(n,"g");return t.replace(g,String(r+1)).replace(o,String(c))},r=({currentPage:e,numPages:n,screenReaderOnly:r})=>{if(r?.content)return{...r,content:t({content:r.content,currentPage:e,numPages:n})}};export{r as buildScreenReaderOnly,t as buildScreenReaderText};
+import { CAROUSEL_BUILD_SCREEN_READER_CURRENT_PAGE_KEY, CAROUSEL_BUILD_SCREEN_READER_NUM_PAGES_KEY } from "../types/carousel.js";
+const buildScreenReaderText = ({ content: n, currentPage: r, numPages: i }) => {
+	let a = new RegExp(CAROUSEL_BUILD_SCREEN_READER_CURRENT_PAGE_KEY, "g"), o = new RegExp(CAROUSEL_BUILD_SCREEN_READER_NUM_PAGES_KEY, "g");
+	return n.replace(a, String(r + 1)).replace(o, String(i));
+}, buildScreenReaderOnly = ({ currentPage: e, numPages: t, screenReaderOnly: r }) => {
+	if (r?.content) return {
+		...r,
+		content: buildScreenReaderText({
+			content: r.content,
+			currentPage: e,
+			numPages: t
+		})
+	};
+};
+export { buildScreenReaderOnly };

package/dist/esm/components/checkbox/checkboxControlled.js

@@ -1,2 +1,20 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as t}from"react";import{useClassName as a}from"../../lib/hooks/useClassName/useClassName.js";import{CheckboxStandAlone as e}from"./checkboxStandAlone.js";import{getCheckboxState as o}from"./utils/state.utils.js";const r=t(({additionalClasses:t,variant:r,...i},m)=>{const c=a({additionalClassNames:t,component:"CHECKBOX",variant:r}),l=o(i.checked,i.disabled,i.error);/* @__PURE__ */
-return s(e,{ref:m,cssClasses:c,...i,"data-state":l,"data-testid":"checkbox"})});export{r as CheckboxControlled};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { getCheckboxState } from "./utils/state.utils.js";
+import { CheckboxStandAlone } from "./checkboxStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const CheckboxControlled = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => {
+	let i = useClassName({
+		additionalClassNames: e,
+		component: "CHECKBOX",
+		variant: t
+	}), a = getCheckboxState(n.checked, n.disabled, n.error);
+	return /* @__PURE__ */ jsx(CheckboxStandAlone, {
+		ref: r,
+		cssClasses: i,
+		...n,
+		"data-state": a,
+		"data-testid": "checkbox"
+	});
+});
+export { CheckboxControlled };

package/dist/esm/components/checkbox/checkboxStandAlone.js

@@ -1,5 +1,56 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as a,useId as s}from"react";import{ScreenReaderOnly as i}from"../../lib/components/screen-reader-only/screenReaderOnly.js";import{pickCustomAttributes as o}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as t}from"../../lib/utils/process/processCommonProp.js";import{CheckboxBaseControlled as l}from"../checkboxBase/checkboxBaseControlled.js";import{ErrorMessage as c}from"./components/errorMessage.js";import{Label as d}from"./components/label.js";import{buildAriaDescribedBy as n}from"./utils/aria.utils.js";const b=a(({checkboxBase:a,cssClasses:b,errorMessage:m,id:p,label:h,screenReaderText:u,...f},x)=>{const y=o(f),{"aria-describedby":j,"aria-hidden":k,"aria-label":C,"aria-labelledby":g,...v}=y,$=`checkbox-${s().replace(/:/g,"")}`,B=p??$,I=`${B}-label`,R=`${B}-error`,M=`${B}-screen-reader`,w=a?.variant,A=n({ariaDescribedBy:f["aria-describedby"],error:f.error&&!!m?.message,errorMessageId:R,screenReader:!!u,screenReaderId:M});/* @__PURE__ */
-return e("div",{ref:x,...v,className:b?.checkbox,children:[
-/* @__PURE__ */e("div",{className:b?.checkboxwithlabelcontainer,children:[!!w&&/* @__PURE__ */r(l,{...f,"aria-describedby":A,"aria-hidden":f["aria-hidden"],"aria-label":f["aria-label"],"aria-labelledby":f["aria-labelledby"],id:B,variant:w}),
-/* @__PURE__ */r(i,{id:M,children:u}),
-/* @__PURE__ */r(d,{content:t(h).children,cssClasses:b,id:I,inputId:B})]}),!!f.error&&/* @__PURE__ */r(c,{"aria-live":"assertive",cssClasses:b,"data-testid":`${f["data-testid"]}-error-message`,...m,id:R,inputId:B,show:f.error&&!f.disabled})]})});export{b as CheckboxStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { ScreenReaderOnly } from "../../lib/components/screen-reader-only/screenReaderOnly.js";
+import { CheckboxBaseControlled } from "../checkboxBase/checkboxBaseControlled.js";
+import { ErrorMessage } from "./components/errorMessage.js";
+import { Label } from "./components/label.js";
+import { buildAriaDescribedBy } from "./utils/aria.utils.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const CheckboxStandAlone = forwardRef(({ checkboxBase: e, cssClasses: t, errorMessage: n, id: r, label: i, screenReaderText: a, ...o }, s) => {
+	let { "aria-describedby": c, "aria-hidden": l, "aria-label": u, "aria-labelledby": d, ...f } = pickCustomAttributes(o), p = `checkbox-${useId().replace(/:/g, "")}`, m = r ?? p, h = `${m}-label`, g = `${m}-error`, _ = `${m}-screen-reader`, v = e?.variant, y = buildAriaDescribedBy({
+		ariaDescribedBy: o["aria-describedby"],
+		error: o.error && !!n?.message,
+		errorMessageId: g,
+		screenReader: !!a,
+		screenReaderId: _
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: s,
+		...f,
+		className: t?.checkbox,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: t?.checkboxwithlabelcontainer,
+			children: [
+				!!v && /* @__PURE__ */ jsx(CheckboxBaseControlled, {
+					...o,
+					"aria-describedby": y,
+					"aria-hidden": o["aria-hidden"],
+					"aria-label": o["aria-label"],
+					"aria-labelledby": o["aria-labelledby"],
+					id: m,
+					variant: v
+				}),
+				/* @__PURE__ */ jsx(ScreenReaderOnly, {
+					id: _,
+					children: a
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					content: processTextProp(i).children,
+					cssClasses: t,
+					id: h,
+					inputId: m
+				})
+			]
+		}), !!o.error && /* @__PURE__ */ jsx(ErrorMessage, {
+			"aria-live": "assertive",
+			cssClasses: t,
+			"data-testid": `${o["data-testid"]}-error-message`,
+			...n,
+			id: g,
+			inputId: m,
+			show: o.error && !o.disabled
+		})]
+	});
+});
+export { CheckboxStandAlone };

package/dist/esm/components/checkbox/checkboxUnControlled.js

@@ -1,2 +1,22 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{useCheckbox as o}from"../checkboxBase/hooks/useCheckbox.js";import{CheckboxControlled as c}from"./checkboxControlled.js";const d=r(({checked:r=!1,disabled:d=!1,error:i=!1,onChange:s,required:t=!1,...h},n)=>{const{handleToggleIsChecked:a,isChecked:k}=o({disabled:d,initialChecked:r});/* @__PURE__ */
-return e(c,{...h,ref:n,checked:k,disabled:d,error:i,required:t,onChange:e=>{s?.(e),a()}})});export{d as CheckboxUnControlled};
+import { CheckboxControlled } from "./checkboxControlled.js";
+import { useCheckbox } from "../checkboxBase/hooks/useCheckbox.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const CheckboxUnControlled = forwardRef(({ checked: t = !1, disabled: n = !1, error: r = !1, onChange: i, required: a = !1, ...o }, s) => {
+	let { handleToggleIsChecked: c, isChecked: l } = useCheckbox({
+		disabled: n,
+		initialChecked: t
+	}), u = (e) => {
+		i?.(e), c();
+	};
+	return /* @__PURE__ */ jsx(CheckboxControlled, {
+		...o,
+		ref: s,
+		checked: l,
+		disabled: n,
+		error: r,
+		required: a,
+		onChange: u
+	});
+});
+export { CheckboxUnControlled };

package/dist/esm/components/checkbox/components/errorMessage.js

@@ -1,2 +1,17 @@
-import{jsx as s}from"react/jsx-runtime";import{ErrorMessage as r}from"../../../lib/components/errorMessage/errorMessage.js";import{pickCustomAttributes as e}from"../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";const t=({cssClasses:t,message:o,...i})=>{if(!o)return null;const a=e(i);/* @__PURE__ */
-return s("div",{className:t?.errormessagecontainer,children:/* @__PURE__ */s(r,{...i,...a,additionalClasses:t?.error_message,message:o})})};export{t as ErrorMessage};
+import { pickCustomAttributes } from "../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { ErrorMessage as ErrorMessage$1 } from "../../../lib/components/errorMessage/errorMessage.js";
+import { jsx } from "react/jsx-runtime";
+const ErrorMessage = ({ cssClasses: e, message: t, ...n }) => {
+	if (!t) return null;
+	let r = pickCustomAttributes(n);
+	return /* @__PURE__ */ jsx("div", {
+		className: e?.errormessagecontainer,
+		children: /* @__PURE__ */ jsx(ErrorMessage$1, {
+			...n,
+			...r,
+			additionalClasses: e?.error_message,
+			message: t
+		})
+	});
+};
+export { ErrorMessage };

package/dist/esm/components/checkbox/components/label.js

@@ -1 +1,12 @@
-import{jsx as t}from"react/jsx-runtime";import{LabelStandAlone as e}from"../../label/labelStandAlone.js";const n=({...n})=>{if(!n.content)return null;const{cssClasses:s,...o}=n;return"string"==typeof n.content?/* @__PURE__ */t(e,{textCssClasses:s?.label,...o,children:n.content}):n?.content};export{n as Label};
+import { LabelStandAlone } from "../../label/labelStandAlone.js";
+import { jsx } from "react/jsx-runtime";
+const Label = ({ ...e }) => {
+	if (!e.content) return null;
+	let { cssClasses: t, ...n } = e;
+	return typeof e.content == "string" ? /* @__PURE__ */ jsx(LabelStandAlone, {
+		textCssClasses: t?.label,
+		...n,
+		children: e.content
+	}) : e?.content;
+};
+export { Label };

package/dist/esm/components/checkbox/types/state.js

@@ -1 +1,9 @@
-const E={DISABLED_SELECTED:"DISABLED_SELECTED",DISABLED_UNSELECTED:"DISABLED_UNSELECTED",ERROR_SELECTED:"ERROR_SELECTED",ERROR_UNSELECTED:"ERROR_UNSELECTED",SELECTED:"SELECTED",UNSELECTED:"UNSELECTED"};export{E as CheckboxState};
+const CheckboxState = {
+	DISABLED_SELECTED: "DISABLED_SELECTED",
+	DISABLED_UNSELECTED: "DISABLED_UNSELECTED",
+	ERROR_SELECTED: "ERROR_SELECTED",
+	ERROR_UNSELECTED: "ERROR_UNSELECTED",
+	SELECTED: "SELECTED",
+	UNSELECTED: "UNSELECTED"
+};
+export { CheckboxState };

package/dist/esm/components/checkbox/utils/aria.utils.js

@@ -1 +1,9 @@
-const e=({ariaDescribedBy:e,error:r,errorMessageId:o,screenReader:n,screenReaderId:s})=>{const t=[e,n&&s,r&&o].filter(Boolean);return t.length>0?t.join(" ").trim():void 0};export{e as buildAriaDescribedBy};
+const buildAriaDescribedBy = ({ ariaDescribedBy: e, error: t, errorMessageId: n, screenReader: r, screenReaderId: i }) => {
+	let a = [
+		e,
+		r && i,
+		t && n
+	].filter(Boolean);
+	return a.length > 0 ? a.join(" ").trim() : void 0;
+};
+export { buildAriaDescribedBy };

package/dist/esm/components/checkbox/utils/state.utils.js

@@ -1 +1,3 @@
-import{CheckboxState as E}from"../types/state.js";const D=(D=!1,L=!1,S=!1)=>S&&!D?E.ERROR_UNSELECTED:S?E.ERROR_SELECTED:L&&!D?E.DISABLED_UNSELECTED:L?E.DISABLED_SELECTED:D?E.SELECTED:E.UNSELECTED;export{D as getCheckboxState};
+import { CheckboxState } from "../types/state.js";
+const getCheckboxState = (e = !1, t = !1, n = !1) => n && !e ? CheckboxState.ERROR_UNSELECTED : n ? CheckboxState.ERROR_SELECTED : t && !e ? CheckboxState.DISABLED_UNSELECTED : t ? CheckboxState.DISABLED_SELECTED : e ? CheckboxState.SELECTED : CheckboxState.UNSELECTED;
+export { getCheckboxState };

package/dist/esm/components/checkboxBase/checkboxBaseControlled.js

@@ -1,2 +1,22 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as s}from"../../lib/hooks/useClassName/useClassName.js";import{getCheckboxState as t}from"../checkbox/utils/state.utils.js";import{CheckboxBaseStandAlone as r}from"./checkboxBaseStandAlone.js";const o=a(({additionalClasses:a,error:o=!1,required:i=!1,variant:c,...m},d)=>{const l=s({additionalClassNames:a,component:"CHECKBOX_BASE",variant:c}),n=t(m.checked,m.disabled,o).toLocaleLowerCase();/* @__PURE__ */
-return e(r,{ref:d,cssClasses:l,required:!0,...m,"aria-invalid":o,"data-state":n,"data-testid":"checkboxBase"})});export{o as CheckboxBaseControlled};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { getCheckboxState } from "../checkbox/utils/state.utils.js";
+import { CheckboxBaseStandAlone } from "./checkboxBaseStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const CheckboxBaseControlled = forwardRef(({ additionalClasses: e, error: t = !1, required: n = !1, variant: r, ...i }, a) => {
+	let o = useClassName({
+		additionalClassNames: e,
+		component: "CHECKBOX_BASE",
+		variant: r
+	}), s = getCheckboxState(i.checked, i.disabled, t).toLocaleLowerCase();
+	return /* @__PURE__ */ jsx(CheckboxBaseStandAlone, {
+		ref: a,
+		cssClasses: o,
+		required: !0,
+		...i,
+		"aria-invalid": t,
+		"data-state": s,
+		"data-testid": "checkboxBase"
+	});
+});
+export { CheckboxBaseControlled };

package/dist/esm/components/checkboxBase/checkboxBaseStandAlone.js

@@ -1,4 +1,29 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{forwardRef as s}from"react";import{ElementOrIcon as a}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{processIconProp as c}from"../../lib/utils/process/processCommonProp.js";const o=s(({checkedIcon:s,cssClasses:o,inputRef:r,...n},i)=>{const m=n["data-testid"]??"checkbox-base";/* @__PURE__ */
-return t("div",{ref:i,className:o?.checkbox_base,"data-testid":m,children:[
-/* @__PURE__ */e("input",{ref:r,className:o?.input,type:"checkbox",...n,"data-testid":`${m}-input`}),
-/* @__PURE__ */e("span",{className:o?.iconcontainer,"data-state":n["data-state"],children:/* @__PURE__ */e(a,{className:o?.icon,complex:!0,"data-state":n["data-state"],...c(s)})})]})});export{o as CheckboxBaseStandAlone};
+import { processIconProp } from "../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const CheckboxBaseStandAlone = forwardRef(({ checkedIcon: e, cssClasses: t, inputRef: n, ...r }, i) => {
+	let a = r["data-testid"] ?? "checkbox-base";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: i,
+		className: t?.checkbox_base,
+		"data-testid": a,
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: n,
+			className: t?.input,
+			type: "checkbox",
+			...r,
+			"data-testid": `${a}-input`
+		}), /* @__PURE__ */ jsx("span", {
+			className: t?.iconcontainer,
+			"data-state": r["data-state"],
+			children: /* @__PURE__ */ jsx(ElementOrIcon, {
+				className: t?.icon,
+				complex: !0,
+				"data-state": r["data-state"],
+				...processIconProp(e)
+			})
+		})]
+	});
+});
+export { CheckboxBaseStandAlone };

package/dist/esm/components/checkboxBase/checkboxBaseUncontrolled.js

@@ -1,2 +1,20 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as o}from"react";import{CheckboxBaseControlled as r}from"./checkboxBaseControlled.js";import{useCheckbox as c}from"./hooks/useCheckbox.js";const d=o(({checked:o=!1,disabled:d=!1,onChange:s,...t},i)=>{const{handleToggleIsChecked:h,isChecked:n}=c({disabled:d,initialChecked:o});/* @__PURE__ */
-return e(r,{ref:i,...t,checked:n,disabled:d,onChange:e=>{s?.(e),h()}})});export{d as CheckboxBaseUnControlled};
+import { CheckboxBaseControlled } from "./checkboxBaseControlled.js";
+import { useCheckbox } from "./hooks/useCheckbox.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const CheckboxBaseUnControlled = forwardRef(({ checked: t = !1, disabled: n = !1, onChange: r, ...i }, a) => {
+	let { handleToggleIsChecked: o, isChecked: s } = useCheckbox({
+		disabled: n,
+		initialChecked: t
+	}), c = (e) => {
+		r?.(e), o();
+	};
+	return /* @__PURE__ */ jsx(CheckboxBaseControlled, {
+		ref: a,
+		...i,
+		checked: s,
+		disabled: n,
+		onChange: c
+	});
+});
+export { CheckboxBaseUnControlled };

package/dist/esm/components/checkboxBase/hooks/useCheckbox.js

@@ -1 +1,11 @@
-import{useState as e}from"react";const t=({disabled:t,initialChecked:c})=>{const[d,i]=e(c);return{handleToggleIsChecked:()=>{t||i(!d)},isChecked:d}};export{t as useCheckbox};
+import { useState } from "react";
+const useCheckbox = ({ disabled: e, initialChecked: t }) => {
+	let [n, r] = useState(t);
+	return {
+		handleToggleIsChecked: () => {
+			e || r(!n);
+		},
+		isChecked: n
+	};
+};
+export { useCheckbox };

package/dist/esm/components/chip/chip.js

@@ -1,2 +1,19 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as t}from"react";import{useClassName as a}from"../../lib/hooks/useClassName/useClassName.js";import{STATES as e}from"../../lib/types/states/states.js";import{ChipStandAlone as o}from"./chipStandAlone.js";const r=t(({additionalClasses:t,state:r=e.DEFAULT,variant:i,...m},n)=>{const l=a({additionalClassNames:t,component:"CHIP",variant:i});/* @__PURE__ */
-return s(o,{...m,ref:n,cssClasses:l,state:r})});export{r as Chip};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { STATES } from "../../lib/types/states/states.js";
+import { ChipStandAlone } from "./chipStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Chip = forwardRef(({ additionalClasses: e, state: t = STATES.DEFAULT, variant: n, ...r }, i) => {
+	let a = useClassName({
+		additionalClassNames: e,
+		component: "CHIP",
+		variant: n
+	});
+	return /* @__PURE__ */ jsx(ChipStandAlone, {
+		...r,
+		ref: i,
+		cssClasses: a,
+		state: t
+	});
+});
+export { Chip };

package/dist/esm/components/chip/chipStandAlone.js

@@ -1,8 +1,72 @@
-import{jsxs as t,Fragment as e,jsx as s}from"react/jsx-runtime";import{forwardRef as r,isValidElement as a}from"react";import{Text as o}from"../text/text.js";import{ElementOrIcon as n}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{STATES as i}from"../../lib/types/states/states.js";import{pickCustomAttributes as c}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processIconProp as l,processTextProp as m}from"../../lib/utils/process/processCommonProp.js";const p=r(({closeIcon:r,cssClasses:p,errorIcon:d,errorMessage:u={content:"Error message"},label:b,leftIcon:g,range:x,rangeIcon:f,rangeSeparator:h={content:"to"},state:A,...C},I)=>{const N={"data-state":A},j=c(C);/* @__PURE__ */
-return t(e,{children:[
-/* @__PURE__ */t("span",{ref:I,"aria-disabled":A===i.DISABLED,"aria-hidden":A===i.DISABLED,className:p?.chip,"data-testid":"chip",...j,...N,children:[!x&&g&&/* @__PURE__ */s(n,{className:p?.lefticon,...l(g)}),x?/* @__PURE__ */s("span",{children:x.map((e,r)=>{const i=r!==x.length-1;/* @__PURE__ */
-return t("span",{className:p?.rangeitemwrapper,children:[
-/* @__PURE__ */s(o,{additionalClasses:{text:p?.rangeitemtext},component:"span",customAttributes:N,children:e.label}),i&&(f?.icon?/* @__PURE__ */s(n,{altText:("string"==typeof b||a(b),m(h).children||""),className:p?.rangeicon,...l(f),customAttributes:N}):/* @__PURE__ */s(o,{additionalClasses:{text:p?.rangeitemseparator},component:"span",customAttributes:N,...m(h)}))]},`option-${e.key??e.label}`)})}):/* @__PURE__ */s(o,{additionalClasses:{text:p?.label},component:"span",...m(b),customAttributes:N}),
-/* @__PURE__ */s(n,{className:p?.closeicon,disabled:A===i.DISABLED,...l(r),altText:"string"!=typeof r&&r?.altText?r.altText:"Close",customAttributes:N})]}),A===i.ERROR&&/* @__PURE__ */t("span",{"aria-live":"polite",className:p?.errorcontainer,children:[
-/* @__PURE__ */s(n,{className:p?.erroricon,...l(d)}),
-/* @__PURE__ */s(o,{additionalClasses:{text:p?.errormessage},component:"span",customAttributes:N,...m(u)})]})]})});export{p as ChipStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { Text } from "../text/text2.js";
+import { processIconProp, processTextProp } from "../../lib/utils/process/processCommonProp.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { STATES } from "../../lib/types/states/states.js";
+import { forwardRef, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+const ChipStandAlone = forwardRef(({ closeIcon: n, cssClasses: r, errorIcon: i, errorMessage: a = { content: "Error message" }, label: o, leftIcon: s, range: c, rangeIcon: l, rangeSeparator: u = { content: "to" }, state: d, ...f }, p) => {
+	let m = { "data-state": d }, h = pickCustomAttributes(f), g = () => typeof n != "string" && n?.altText ? n.altText : "Close", _ = () => c ? /* @__PURE__ */ jsx("span", { children: c.map((e, t) => {
+		let n = t !== c.length - 1;
+		return /* @__PURE__ */ jsxs("span", {
+			className: r?.rangeitemwrapper,
+			children: [/* @__PURE__ */ jsx(Text, {
+				additionalClasses: { text: r?.rangeitemtext },
+				component: "span",
+				customAttributes: m,
+				children: e.label
+			}), n && (l?.icon ? /* @__PURE__ */ jsx(ElementOrIcon, {
+				altText: (typeof o == "string" || isValidElement(o), processTextProp(u).children || ""),
+				className: r?.rangeicon,
+				...processIconProp(l),
+				customAttributes: m
+			}) : /* @__PURE__ */ jsx(Text, {
+				additionalClasses: { text: r?.rangeitemseparator },
+				component: "span",
+				customAttributes: m,
+				...processTextProp(u)
+			}))]
+		}, `option-${e.key ?? e.label}`);
+	}) }) : /* @__PURE__ */ jsx(Text, {
+		additionalClasses: { text: r?.label },
+		component: "span",
+		...processTextProp(o),
+		customAttributes: m
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		ref: p,
+		"aria-disabled": d === STATES.DISABLED,
+		"aria-hidden": d === STATES.DISABLED,
+		className: r?.chip,
+		"data-testid": "chip",
+		...h,
+		...m,
+		children: [
+			!c && s && /* @__PURE__ */ jsx(ElementOrIcon, {
+				className: r?.lefticon,
+				...processIconProp(s)
+			}),
+			_(),
+			/* @__PURE__ */ jsx(ElementOrIcon, {
+				className: r?.closeicon,
+				disabled: d === STATES.DISABLED,
+				...processIconProp(n),
+				altText: g(),
+				customAttributes: m
+			})
+		]
+	}), d === STATES.ERROR && /* @__PURE__ */ jsxs("span", {
+		"aria-live": "polite",
+		className: r?.errorcontainer,
+		children: [/* @__PURE__ */ jsx(ElementOrIcon, {
+			className: r?.erroricon,
+			...processIconProp(i)
+		}), /* @__PURE__ */ jsx(Text, {
+			additionalClasses: { text: r?.errormessage },
+			component: "span",
+			customAttributes: m,
+			...processTextProp(a)
+		})]
+	})] });
+});
+export { ChipStandAlone };