@zonos/amino 5.4.11 → 5.4.13

package/components/simple-table/SimpleTable.d.ts

@@ -27,6 +27,11 @@ type SimpleTableHeaderBaseProps = {
      * @default 'nowrap'
      */
     textWrapMethod?: 'truncate' | 'normal' | 'nowrap';
+    /**
+     * Width of column in percent
+     * @default undefined
+     */
+    width?: number;
 };
 export type SimpleTableHeader<T extends object> = {
     [Key in keyof T]: {

package/components/simple-table/SimpleTable.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-bd4862e8.js"),l=require("react/jsx-runtime"),t=require("react"),o=require("clsx"),i=require("../checkbox/Checkbox.js"),a=require("../skeleton/Skeleton.js"),n=require("../text/Text.js"),d=require("../tooltip/Tooltip.js"),r=require("../../style-inject.es-d4ddeae4.js");function s(e){return e&&e.__esModule?e:{default:e}}require("framer-motion"),require("../help-text/HelpText.js"),require("../../styles/constants/theme.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../global.module-569e4fd5.js"),require("../../utils/getTestId.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../flex/Flex.js");var m=s(t),c=s(o),u="Amino_SimpleTable-module__tableContainer--UsGFZ",b="Amino_SimpleTable-module__tableStyled--Q3YSy",_="Amino_SimpleTable-module__noPadding--b5Y-c",h="Amino_SimpleTable-module__withHover--eL3XX",p="Amino_SimpleTable-module__clickable--XnaaE",y="Amino_SimpleTable-module__allowTextWrap--yVvjm",x="Amino_SimpleTable-module__loading--bvjof",S="Amino_SimpleTable-module__skeletonCellWrapper--I8vJ7",v="Amino_SimpleTable-module__shouldTruncate--x-zmL",g="Amino_SimpleTable-module__styledCheckbox---753a";r.styleInject(".Amino_SimpleTable-module__tableContainer--UsGFZ{width:100%}.Amino_SimpleTable-module__tableStyled--Q3YSy{border-collapse:initial;border-spacing:0;font-size:var(--amino-font-size-base);width:100%}.Amino_SimpleTable-module__tableStyled--Q3YSy>thead{text-transform:none}.Amino_SimpleTable-module__tableStyled--Q3YSy>thead>tr{border-bottom:var(--amino-border-subtle);height:48px}.Amino_SimpleTable-module__tableStyled--Q3YSy>thead>tr>th{background-color:var(--amino-gray-0);border-bottom:var(--amino-border-subtle);padding:12px;position:-webkit-sticky;position:sticky;top:0;white-space:nowrap}.Amino_SimpleTable-module__tableStyled--Q3YSy>thead>tr>th.Amino_SimpleTable-module__noPadding--b5Y-c{padding:0}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr{height:48px}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr.Amino_SimpleTable-module__withHover--eL3XX:hover{background-color:var(--amino-hover-color)}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr.Amino_SimpleTable-module__clickable--XnaaE{cursor:pointer}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr:not(:hover) .row-hover-show{visibility:collapse}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td{border-bottom:var(--amino-border-subtle);padding:0}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child{display:block;height:100%;padding:12px;white-space:nowrap;width:100%}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child.Amino_SimpleTable-module__noPadding--b5Y-c{padding:0}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child.Amino_SimpleTable-module__allowTextWrap--yVvjm{white-space:normal}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child.Amino_SimpleTable-module__loading--bvjof{text-align:center}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child.Amino_SimpleTable-module__skeletonCellWrapper--I8vJ7{display:flex}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child:not(:hover) .cell-hover-show{visibility:collapse}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td.Amino_SimpleTable-module__shouldTruncate--x-zmL{max-width:0}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td.Amino_SimpleTable-module__shouldTruncate--x-zmL>:first-child{overflow:hidden;text-overflow:ellipsis}.Amino_SimpleTable-module__styledCheckbox---753a{display:inline-flex;padding:12px}");var T=function(e){switch(e){case"center":return"center";case"end":return"flex-end";default:return"flex-start"}};exports.SimpleTable=function(o){var r=o.className,s=o.CustomLinkComponent,j=o.getRowLink,k=o.headers,f=o.items,A=o.keyExtractor,C=o.loading,w=void 0!==C&&C,Y=o.loadingItems,q=void 0===Y?10:Y,Q=o.loadingSkeletonHeight,N=void 0===Q?13:Q,H=o.maxHeight,R=void 0===H?"100%":H,W=o.noHoverBackground,L=void 0!==W&&W,F=o.onRowClick,I=o.onRowHover,M=o.renderFooter,P=o.selectable,X=void 0===P?{enabled:!1}:P,z=o.style,E=function(e,t){var o=t[e.key],i=function(o){var i=m.default.Children.toArray(o).some((function(e){return!!m.default.isValidElement(e)&&/row-hover-show|cell-hover-show/.test(e.props.className)})),a=c.default("truncate"===e.textWrapMethod&&!i&&v),n=c.default(e.noPadding&&_,"normal"===e.textWrapMethod&&y),r={textAlign:e.align||"start"};if(j&&!X.anySelected&&!e.disabledLink){var u=s||"a";return l.jsx("td",{className:a,children:l.jsx(d.Tooltip,{disabled:"truncate"!==e.textWrapMethod,subtitle:o,children:l.jsx(u,{className:n,href:j(t),style:r,children:o})})})}return l.jsx("td",{className:a,children:l.jsx(d.Tooltip,{disabled:"truncate"!==e.textWrapMethod,subtitle:o,children:l.jsx("span",{className:n,style:r,children:o})})})};return e.renderCustom?l.jsx(l.Fragment,{children:i(e.renderCustom(o,t))}):l.jsx(l.Fragment,{children:i(String(o))})};return l.jsx("div",{className:c.default(u,r),style:e.__assign({maxHeight:R},z),children:l.jsxs("table",{className:b,children:[l.jsxs("colgroup",{children:[!!X.onHeaderCheckboxChange&&l.jsx("col",{width:0}),k.map((function(e){return l.jsx("col",{style:{minWidth:void 0!==e.minWidth?"".concat(e.minWidth,"px"):void 0}},e.key)}))]}),l.jsx("thead",{children:l.jsxs("tr",{children:[!!X.onHeaderCheckboxChange&&l.jsx("th",{className:_,children:X.renderCustomHeaderCheckbox||l.jsx(i.Checkbox,{checked:!w&&X.headerCheckboxValue||!1,className:g,disabled:w,onChange:X.onHeaderCheckboxChange})}),k.map((function(e){return l.jsx("th",{className:c.default(e.noPadding&&_),style:{textAlign:e.align||"start"},children:"string"==typeof e.name?l.jsx(n.Text,{color:"gray800",type:"small-header",children:e.name}):e.name},e.key)}))]})}),l.jsx("tbody",{children:w?e.__spreadArray([],e.__read(Array(q).keys()),!1).map((function(e){return l.jsxs("tr",{children:[X.enabled&&l.jsx("td",{children:l.jsx("div",{children:l.jsx(a.Skeleton,{height:N},e)})}),k.map((function(t){return l.jsx("td",{className:c.default(x,t.noPadding&&_),children:l.jsx("div",{className:S,style:{justifyContent:T(t.align)},children:l.jsx(a.Skeleton,{height:N,style:{width:"50%"}},e)})},t.key)}))]},e)})):f.map((function(e,o){var a,n,d,r=!!F||!!X.anySelected&&!!X.onRowCheckboxChange;return l.jsxs("tr",{className:c.default(r&&p,!L&&h),onClick:function(l){var t,i,a;X.anySelected?(null===(t=X.isRowCheckboxDisabled)||void 0===t?void 0:t.call(X,e,o))||(l.preventDefault(),null===(i=X.onRowCheckboxChange)||void 0===i||i.call(X,!(null===(a=X.isRowChecked)||void 0===a?void 0:a.call(X,e,o)),e,o)):null==F||F(e)},onMouseEnter:function(){return null==I?void 0:I(e)},children:[X.enabled&&l.jsx("td",{children:(null===(a=X.renderCustomRowCheckbox)||void 0===a?void 0:a.call(X,e,o))||l.jsx(i.Checkbox,{checked:(null===(n=X.isRowChecked)||void 0===n?void 0:n.call(X,e,o))||!1,disabled:(null===(d=X.isRowCheckboxDisabled)||void 0===d?void 0:d.call(X,e,o))||!1,onChange:function(l){var t;return null===(t=X.onRowCheckboxChange)||void 0===t?void 0:t.call(X,l,e,o)}})}),k.map((function(o){return l.jsx(t.Fragment,{children:E(o,e)},o.key)}))]},A(e))}))}),M]})})};
+"use strict";var e=require("../../_tslib-bd4862e8.js"),l=require("react/jsx-runtime"),t=require("react"),i=require("clsx"),o=require("../checkbox/Checkbox.js"),a=require("../skeleton/Skeleton.js"),n=require("../text/Text.js"),d=require("../tooltip/Tooltip.js"),r=require("../../style-inject.es-d4ddeae4.js");function s(e){return e&&e.__esModule?e:{default:e}}require("framer-motion"),require("../help-text/HelpText.js"),require("../../styles/constants/theme.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../global.module-569e4fd5.js"),require("../../utils/getTestId.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../flex/Flex.js");var m=s(t),c=s(i),u="Amino_SimpleTable-module__tableContainer--UsGFZ",b="Amino_SimpleTable-module__tableStyled--Q3YSy",h="Amino_SimpleTable-module__noPadding--b5Y-c",_="Amino_SimpleTable-module__withHover--eL3XX",p="Amino_SimpleTable-module__clickable--XnaaE",y="Amino_SimpleTable-module__allowTextWrap--yVvjm",x="Amino_SimpleTable-module__loading--bvjof",S="Amino_SimpleTable-module__skeletonCellWrapper--I8vJ7",v="Amino_SimpleTable-module__shouldTruncate--x-zmL",g="Amino_SimpleTable-module__styledCheckbox---753a";r.styleInject(".Amino_SimpleTable-module__tableContainer--UsGFZ{width:100%}.Amino_SimpleTable-module__tableStyled--Q3YSy{border-collapse:initial;border-spacing:0;font-size:var(--amino-font-size-base);width:100%}.Amino_SimpleTable-module__tableStyled--Q3YSy>thead{text-transform:none}.Amino_SimpleTable-module__tableStyled--Q3YSy>thead>tr{border-bottom:var(--amino-border-subtle);height:48px}.Amino_SimpleTable-module__tableStyled--Q3YSy>thead>tr>th{background-color:var(--amino-gray-0);border-bottom:var(--amino-border-subtle);padding:12px;position:-webkit-sticky;position:sticky;top:0;white-space:nowrap}.Amino_SimpleTable-module__tableStyled--Q3YSy>thead>tr>th.Amino_SimpleTable-module__noPadding--b5Y-c{padding:0}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr{height:48px}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr.Amino_SimpleTable-module__withHover--eL3XX:hover{background-color:var(--amino-hover-color)}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr.Amino_SimpleTable-module__clickable--XnaaE{cursor:pointer}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr:not(:hover) .row-hover-show{visibility:collapse}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td{border-bottom:var(--amino-border-subtle);padding:0}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child{display:block;height:100%;padding:12px;white-space:nowrap;width:100%}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child.Amino_SimpleTable-module__noPadding--b5Y-c{padding:0}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child.Amino_SimpleTable-module__allowTextWrap--yVvjm{white-space:normal}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child.Amino_SimpleTable-module__loading--bvjof{text-align:center}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child.Amino_SimpleTable-module__skeletonCellWrapper--I8vJ7{display:flex}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td>:first-child:not(:hover) .cell-hover-show{visibility:collapse}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td.Amino_SimpleTable-module__shouldTruncate--x-zmL{max-width:var(--amino-cell-min-width);min-width:var(--amino-cell-min-width)}.Amino_SimpleTable-module__tableStyled--Q3YSy>tbody>tr>td.Amino_SimpleTable-module__shouldTruncate--x-zmL>:first-child{overflow:hidden;text-overflow:ellipsis}.Amino_SimpleTable-module__styledCheckbox---753a{display:inline-flex;padding:12px}");var T=function(e){switch(e){case"center":return"center";case"end":return"flex-end";default:return"flex-start"}};exports.SimpleTable=function(i){var r=i.className,s=i.CustomLinkComponent,f=i.getRowLink,j=i.headers,k=i.items,w=i.keyExtractor,A=i.loading,C=void 0!==A&&A,Y=i.loadingItems,q=void 0===Y?10:Y,Q=i.loadingSkeletonHeight,N=void 0===Q?13:Q,H=i.maxHeight,W=void 0===H?"100%":H,R=i.noHoverBackground,L=void 0!==R&&R,F=i.onRowClick,I=i.onRowHover,M=i.renderFooter,P=i.selectable,X=void 0===P?{enabled:!1}:P,z=i.style,E=function(e,t){var i=t[e.key],o=function(i){var o=m.default.Children.toArray(i).some((function(e){return!!m.default.isValidElement(e)&&/row-hover-show|cell-hover-show/.test(e.props.className)})),a=c.default("truncate"===e.textWrapMethod&&!o&&v),n={"--amino-cell-min-width":"".concat(e.minWidth||0,"px")},r=c.default(e.noPadding&&h,"normal"===e.textWrapMethod&&y),u={textAlign:e.align||"start"},b=function(e){switch(e){case"center":return"bottom";case"end":return"bottom-end";default:return"bottom-start"}}(e.align);if(f&&!X.anySelected&&!e.disabledLink){var _=s||"a";return l.jsx("td",{className:a,style:n,children:l.jsx(d.Tooltip,{disabled:"truncate"!==e.textWrapMethod,placement:b,subtitle:i,children:l.jsx(_,{className:r,href:f(t),style:u,children:i})})})}return l.jsx("td",{className:a,style:n,children:l.jsx(d.Tooltip,{disabled:"truncate"!==e.textWrapMethod,subtitle:i,children:l.jsx("span",{className:r,style:u,children:i})})})};return e.renderCustom?l.jsx(l.Fragment,{children:o(e.renderCustom(i,t))}):l.jsx(l.Fragment,{children:o(String(i))})};return l.jsx("div",{className:c.default(u,r),style:e.__assign({maxHeight:W},z),children:l.jsxs("table",{className:b,children:[l.jsxs("colgroup",{children:[!!X.onHeaderCheckboxChange&&l.jsx("col",{width:0}),j.map((function(e){return l.jsx("col",{style:{minWidth:void 0!==e.minWidth?"".concat(e.minWidth,"px"):void 0},width:void 0!==e.width?"".concat(e.width,"%"):void 0},e.key)}))]}),l.jsx("thead",{children:l.jsxs("tr",{children:[!!X.onHeaderCheckboxChange&&l.jsx("th",{className:h,children:X.renderCustomHeaderCheckbox||l.jsx(o.Checkbox,{checked:!C&&X.headerCheckboxValue||!1,className:g,disabled:C,onChange:X.onHeaderCheckboxChange})}),j.map((function(e){return l.jsx("th",{className:c.default(e.noPadding&&h),style:{textAlign:e.align||"start"},children:"string"==typeof e.name?l.jsx(n.Text,{color:"gray800",type:"small-header",children:e.name}):e.name},e.key)}))]})}),l.jsx("tbody",{children:C?e.__spreadArray([],e.__read(Array(q).keys()),!1).map((function(e){return l.jsxs("tr",{children:[X.enabled&&l.jsx("td",{children:l.jsx("div",{children:l.jsx(a.Skeleton,{height:N},e)})}),j.map((function(t){return l.jsx("td",{className:c.default(x,t.noPadding&&h),children:l.jsx("div",{className:S,style:{justifyContent:T(t.align)},children:l.jsx(a.Skeleton,{height:N,style:{width:"50%"}},e)})},t.key)}))]},e)})):k.map((function(e,i){var a,n,d,r=!!F||!!X.anySelected&&!!X.onRowCheckboxChange;return l.jsxs("tr",{className:c.default(r&&p,!L&&_),onClick:function(l){var t,o,a;X.anySelected?(null===(t=X.isRowCheckboxDisabled)||void 0===t?void 0:t.call(X,e,i))||(l.preventDefault(),null===(o=X.onRowCheckboxChange)||void 0===o||o.call(X,!(null===(a=X.isRowChecked)||void 0===a?void 0:a.call(X,e,i)),e,i)):null==F||F(e)},onMouseEnter:function(){return null==I?void 0:I(e)},children:[X.enabled&&l.jsx("td",{children:(null===(a=X.renderCustomRowCheckbox)||void 0===a?void 0:a.call(X,e,i))||l.jsx(o.Checkbox,{checked:(null===(n=X.isRowChecked)||void 0===n?void 0:n.call(X,e,i))||!1,disabled:(null===(d=X.isRowCheckboxDisabled)||void 0===d?void 0:d.call(X,e,i))||!1,onChange:function(l){var t;return null===(t=X.onRowCheckboxChange)||void 0===t?void 0:t.call(X,l,e,i)}})}),j.map((function(i){return l.jsx(t.Fragment,{children:E(i,e)},i.key)}))]},w(e))}))}),M]})})};

package/components/toggle/Toggle.d.ts

@@ -1,8 +1,13 @@
+import type { BaseProps } from "../../types/BaseProps";
 import type { SelectOption } from "../../types/SelectOption";
-export type ToggleProps<TValue extends string | number = string> = {
-    className?: string;
+export type ToggleProps<TValue extends string | number = string> = BaseProps & {
+    /**
+     * If true, the toggle will take up the full width of its parent.
+     * @default false
+     */
+    fullWidth?: boolean;
     options: SelectOption<TValue>[];
     value: TValue;
     onChange: (value: TValue) => void;
 };
-export declare const Toggle: <TValue extends string | number>({ className, onChange, options, value, }: ToggleProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const Toggle: <TValue extends string | number>({ className, fullWidth, onChange, options, style, value, }: ToggleProps<TValue>) => import("react/jsx-runtime").JSX.Element;

package/components/toggle/Toggle.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-bd4862e8.js"),o=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),n=require("framer-motion"),l=require("../../style-inject.es-d4ddeae4.js");function t(e){return e&&e.__esModule?e:{default:e}}var a=t(i),u="Amino_Toggle-module__shrinkWrapper--osh3J",d="Amino_Toggle-module__wrapper--NF4v5",s="Amino_Toggle-module__optionWrapper--0wrNp",_="Amino_Toggle-module__selected--badUt",m="Amino_Toggle-module__selectedSlider--WsUDo";l.styleInject(".Amino_Toggle-module__shrinkWrapper--osh3J{display:inline-flex}.Amino_Toggle-module__wrapper--NF4v5{background-color:var(--amino-gray-50);border-radius:6px;display:flex;position:relative}.Amino_Toggle-module__optionWrapper--0wrNp{border-radius:6px;color:var(--amino-text-color-secondary);cursor:pointer;font-size:var(--amino-font-size-base);font-weight:500;padding:4px 12px;transition:var(--amino-transition);z-index:2}.Amino_Toggle-module__optionWrapper--0wrNp:focus{outline:none}.Amino_Toggle-module__optionWrapper--0wrNp.Amino_Toggle-module__selected--badUt,.Amino_Toggle-module__optionWrapper--0wrNp:hover:not(.Amino_Toggle-module__selected--badUt){color:var(--amino-text-color)}.Amino_Toggle-module__selectedSlider--WsUDo{background-color:var(--amino-raised-surface-color);border-radius:6px;box-shadow:var(--amino-shadow-button-standard);height:100%;position:absolute;z-index:1}");exports.Toggle=function(i){var l=i.className,t=i.onChange,c=i.options,p=i.value,g=r.useRef(null),f=r.useRef(null),v=e.__read(r.useState({left:0,width:0}),2),h=v[0],x=v[1];return r.useEffect((function(){var e,o,r=function(e,o){if(!o||!e)return{left:0,width:0};var r=o.width;return{left:o.left-e.left,width:r}}((null===(e=g.current)||void 0===e?void 0:e.getBoundingClientRect())||null,(null===(o=f.current)||void 0===o?void 0:o.getBoundingClientRect())||null);x(r)}),[p]),o.jsx("div",{className:u,children:o.jsxs("div",{ref:g,className:d,children:[o.jsx(n.motion.div,{animate:{width:h.width,x:h.left},className:m,initial:!1,transition:{duration:.2}}),c.map((function(e){return o.jsx("button",{ref:e.value===p?f:null,className:a.default([s,l,e.value===p&&_]),onClick:function(){return t(e.value)},type:"button",children:e.label},e.value)}))]})})};
+"use strict";var e=require("../../_tslib-bd4862e8.js"),o=require("react/jsx-runtime"),r=require("react"),l=require("clsx"),i=require("framer-motion"),n=require("../../style-inject.es-d4ddeae4.js");function t(e){return e&&e.__esModule?e:{default:e}}var d=t(l),_="Amino_Toggle-module__shrinkWrapper--osh3J",a="Amino_Toggle-module__wrapper--NF4v5",u="Amino_Toggle-module__selectedSlider--WsUDo",s="Amino_Toggle-module__optionWrapper--0wrNp",m="Amino_Toggle-module__selected--badUt",g="Amino_Toggle-module__fullWidth--vw3dd";n.styleInject(".Amino_Toggle-module__shrinkWrapper--osh3J{display:inline-flex}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__wrapper--NF4v5{background-color:var(--amino-gray-50);border-radius:6px;display:flex;position:relative}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__selectedSlider--WsUDo{background-color:var(--amino-raised-surface-color);border-radius:6px;box-shadow:var(--amino-shadow-button-standard);height:100%;position:absolute;z-index:1}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp{border-radius:6px;color:var(--amino-text-color-secondary);cursor:pointer;font-size:var(--amino-font-size-base);font-weight:500;padding:4px 12px;text-align:center;z-index:2}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp:focus{outline:none}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp.Amino_Toggle-module__selected--badUt,.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp:hover:not(.Amino_Toggle-module__selected--badUt){color:var(--amino-text-color)}.Amino_Toggle-module__shrinkWrapper--osh3J.Amino_Toggle-module__fullWidth--vw3dd,.Amino_Toggle-module__shrinkWrapper--osh3J.Amino_Toggle-module__fullWidth--vw3dd .Amino_Toggle-module__wrapper--NF4v5{width:100%}.Amino_Toggle-module__shrinkWrapper--osh3J.Amino_Toggle-module__fullWidth--vw3dd .Amino_Toggle-module__wrapper--NF4v5 .Amino_Toggle-module__optionWrapper--0wrNp{flex-grow:1}");exports.Toggle=function(l){var n=l.className,t=l.fullWidth,p=void 0!==t&&t,c=l.onChange,h=l.options,f=l.style,v=l.value,A=r.useRef(null),T=r.useRef(null),w=e.__read(r.useState({left:0,width:0}),2),W=w[0],x=w[1],b=e.__read(r.useState(!1),2),N=b[0],k=b[1];return r.useEffect((function(){var e,o,r=function(e,o){if(!o||!e)return{left:0,width:0};var r=o.width;return{left:o.left-e.left,width:r}}((null===(e=A.current)||void 0===e?void 0:e.getBoundingClientRect())||null,(null===(o=T.current)||void 0===o?void 0:o.getBoundingClientRect())||null);x(r)}),[v]),o.jsx("div",{className:d.default(n,_,p&&g),style:f,children:o.jsxs("div",{ref:A,className:a,children:[o.jsx(i.motion.div,{animate:{width:W.width,x:W.left},className:u,initial:!1,onAnimationComplete:function(){k(!0)},transition:{duration:N?.2:0}}),h.map((function(e){var r=e.value===v;return o.jsx("button",{ref:r?T:null,className:d.default([s,r&&m]),onClick:function(){return c(e.value)},type:"button",children:e.label},e.value)}))]})})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "5.4.11",
+  "version": "5.4.13",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",

package/types/SelectOption.d.ts

@@ -1,8 +1,11 @@
 import type { ReactNode } from 'react';
-export type SelectOption<V extends string | number = string | number> = {
+export type SelectOption<V extends string | number | null = string | number> = {
     icon?: ReactNode;
     isDisabled?: boolean;
     label: string;
+    /**
+     * For checkboxes
+     */
     labelDescription?: string;
     value: V;
 };