@useloops/design-system 1.4.638 → 1.4.639

package/dist/systems/WebCore/FormGenerator/components/InputWrapper/InputWrapper.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("merge-sx"),i=require("react"),s=require("react-hook-form"),n=require("react-phone-number-input"),a=require("../../../Checkbox/Checkbox.js");require("../../../Checkbox/StyledCheckbox.js");var l=require("../../../CheckboxGroup/CheckboxGroup.js"),o=require("../../../CreatableAutocomplete/CreatableAutocomplete.js"),c=require("../../../CustomField/CustomField.js"),u=require("../../../Differential/Differential.js"),h=require("../../../Html/Html.js"),m=require("../../../InputLabel/InputLabel.js"),d=require("../../../Likert/Likert.js"),p=require("../../../NumberField/NumberField.js"),x=require("../../../RadioGroup/RadioGroup.js"),f=require("../../../Rank/Rank.js"),j=require("../../../RichTextField/RichTextField.js"),g=require("../../../Select/Select.js");require("../../../Select/SelectItem.js");var q=require("../../../Slider/Slider.js"),b=require("../../../StarRating/StarRating.js"),S=require("../../../Switch/Switch.js"),k=require("../../../Textarea/Textarea.js"),v=require("../../../TextField/TextField.js"),T=require("../StengthIndicator/StrengthIndicator.js"),C=require("./components/InputWrapperHelperText/InputWrapperHelperText.js");const R={textfield:v,numberfield:p,textarea:k,creatableautocomplete:o,select:g,checkbox:a,checkboxGroup:l,switch:S,slider:q,starRating:b,differential:u,likert:d,radioGroup:x,ranking:f,richTextfield:j,customfield:c},w=(e,r)=>e.filter(e=>{if(e.includes("-value-")){const r=e.split("-value-")[1];return r&&r.length>0}return e!==r}).length;module.exports=({fieldRef:a,name:l,fieldType:o,label:c,control:u,errors:d,labelProps:p,helperText:x,helpTextProps:f,validation:j,content:g,styleOverrides:q,defaultValue:b,onChange:S,watch:k,trigger:v,strengthIndicator:F,...y})=>{const{custom:I}=r.useTheme(),B=void 0!==d&&Object.keys(d).length>0,[G,N]=i.useState(0);i.useEffect(()=>{F&&G>0&&v(l)},[G]);const H=j?.match?.field,L=k(H);return i.useEffect(()=>{H&&v(l)},[L,H,v,l]),e.jsxs(r.Stack,{sx:t.mergeSx(q?.sxInputStack,y?.hidden&&{display:"none!important"}),gap:I.margin.sm,children:["switch"!==o?c&&e.jsx(m,{...p,children:c}):null,"html"===o&&g?e.jsx(h,{children:g}):e.jsxs(e.Fragment,{children:[e.jsx(s.Controller,{name:l,control:u,render:r=>function({field:{ref:r,...t}}){const i=R[o];return e.jsx(i,{...y,...t,inputRef:e=>{r(e),a&&(a.current=e)},..."switch"===o?{label:c}:{}})}(r),rules:{...j,validate:e=>{if(j&&"phone"in j)return n.isValidPhoneNumber(`+${k("extension")}${e}`)||j.phone.message;if(j&&"score"in j)return G<=j.score.value?j.score.message:void 0;if(j&&"white_space"in j)return!e.match(/^\s*$/g)||j.white_space.message;if(j&&"match"in j&&j?.match?.field)switch(j?.match?.comparison){case"not_eq":return e!=k(j.match.field)||j.match.message;case"gt":return e>k(j.match.field)||j.match.message;case"lt":return e<k(j.match.field)||j.match.message;default:return e===k(j.match.field)||j.match.message}if(j&&"minSelections"in j){const r=e;if(!(j.selectionsBypass&&r.includes(j.selectionsBypass))){const e=y.other?.enabled?y.other?.name||"other-option":void 0;if(w(r,e)<j.minSelections.value)return j.minSelections.message}}if(j&&"maxSelections"in j){const r=e;if(!(j.selectionsBypass&&r.includes(j.selectionsBypass))){const e=y.other?.enabled?y.other?.name||"other-option":void 0;if(w(r,e)>j.maxSelections.value)return j.maxSelections.message}}}}}),F&&e.jsx(T,{value:k(l),onChange:N})]}),e.jsxs(e.Fragment,{children:[Boolean(B)?e.jsx(C,{helperText:void 0,inputName:l,errors:d,showicon:!0}):null,Boolean(x)?e.jsx(C,{helperText:x,inputName:l,errors:void 0,...f}):null]})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("merge-sx"),i=require("react"),s=require("react-hook-form"),n=require("react-phone-number-input"),a=require("../../../AutocompleteField/AutocompleteField.js"),l=require("../../../Checkbox/Checkbox.js");require("../../../Checkbox/StyledCheckbox.js");var o=require("../../../CheckboxGroup/CheckboxGroup.js"),c=require("../../../CreatableAutocomplete/CreatableAutocomplete.js"),u=require("../../../CustomField/CustomField.js"),m=require("../../../Differential/Differential.js"),h=require("../../../Html/Html.js"),d=require("../../../InputLabel/InputLabel.js"),p=require("../../../Likert/Likert.js"),x=require("../../../NumberField/NumberField.js"),f=require("../../../RadioGroup/RadioGroup.js"),j=require("../../../Rank/Rank.js"),g=require("../../../RichTextField/RichTextField.js");require("../../../SelectItem/SelectItem.js");var q=require("../../../Select/Select.js"),b=require("../../../Slider/Slider.js"),S=require("../../../StarRating/StarRating.js"),k=require("../../../Switch/Switch.js"),v=require("../../../Textarea/Textarea.js"),C=require("../../../TextField/TextField.js"),T=require("../StengthIndicator/StrengthIndicator.js"),F=require("./components/InputWrapperHelperText/InputWrapperHelperText.js");const R={textfield:C,numberfield:x,textarea:v,creatableautocomplete:c,select:q,autocomplete:a,checkbox:l,checkboxGroup:o,switch:k,slider:b,starRating:S,differential:m,likert:p,radioGroup:f,ranking:j,richTextfield:g,customfield:u},w=(e,r)=>e.filter(e=>{if(e.includes("-value-")){const r=e.split("-value-")[1];return r&&r.length>0}return e!==r}).length;module.exports=({fieldRef:a,name:l,fieldType:o,label:c,control:u,errors:m,labelProps:p,helperText:x,helpTextProps:f,validation:j,content:g,styleOverrides:q,defaultValue:b,onChange:S,watch:k,trigger:v,strengthIndicator:C,...I})=>{const{custom:y}=r.useTheme(),B=void 0!==m&&Object.keys(m).length>0,[G,N]=i.useState(0);i.useEffect(()=>{C&&G>0&&v(l)},[G]);const A=j?.match?.field,H=k(A);return i.useEffect(()=>{A&&v(l)},[H,A,v,l]),e.jsxs(r.Stack,{sx:t.mergeSx(q?.sxInputStack,I?.hidden&&{display:"none!important"}),gap:y.margin.sm,children:["switch"!==o?c&&e.jsx(d,{...p,children:c}):null,"html"===o&&g?e.jsx(h,{children:g}):e.jsxs(e.Fragment,{children:[e.jsx(s.Controller,{name:l,control:u,render:r=>function({field:{ref:r,...t}}){const i=R[o];return e.jsx(i,{...I,...t,inputRef:e=>{r(e),a&&(a.current=e)},..."switch"===o?{label:c}:{},..."autocomplete"===o?{onChange:(e,r)=>t.onChange(r)}:{}})}(r),rules:{...j,validate:e=>{if(j&&"phone"in j)return n.isValidPhoneNumber(`+${k("extension")}${e}`)||j.phone.message;if(j&&"score"in j)return G<=j.score.value?j.score.message:void 0;if(j&&"white_space"in j)return!e.match(/^\s*$/g)||j.white_space.message;if(j&&"match"in j&&j?.match?.field)switch(j?.match?.comparison){case"not_eq":return e!=k(j.match.field)||j.match.message;case"gt":return e>k(j.match.field)||j.match.message;case"lt":return e<k(j.match.field)||j.match.message;default:return e===k(j.match.field)||j.match.message}if(j&&"minSelections"in j){const r=e;if(!(j.selectionsBypass&&r.includes(j.selectionsBypass))){const e=I.other?.enabled?I.other?.name||"other-option":void 0;if(w(r,e)<j.minSelections.value)return j.minSelections.message}}if(j&&"maxSelections"in j){const r=e;if(!(j.selectionsBypass&&r.includes(j.selectionsBypass))){const e=I.other?.enabled?I.other?.name||"other-option":void 0;if(w(r,e)>j.maxSelections.value)return j.maxSelections.message}}}}}),C&&e.jsx(T,{value:k(l),onChange:N})]}),e.jsxs(e.Fragment,{children:[Boolean(B)?e.jsx(F,{helperText:void 0,inputName:l,errors:m,showicon:!0}):null,Boolean(x)?e.jsx(F,{helperText:x,inputName:l,errors:void 0,...f}):null]})]})};

package/dist/systems/WebCore/FormGenerator/types.d.ts

@@ -1,6 +1,8 @@
 import { SxProps, Theme } from '@mui/material';
 import { FunctionComponent, ReactElement } from 'react';
 import { SubmitHandler, FieldErrors, Control, UseFormWatch, UseFormTrigger } from 'react-hook-form';
+import { SelectProps } from '../Select/types.js';
+import { AutocompleteFieldProps } from '../AutocompleteSingle/types.js';
 import { CheckboxProps } from '../Checkbox/Checkbox.js';
 import { CheckboxGroupProps } from '../CheckboxGroup/CheckboxGroup.js';
 import { CreatableAutocompleteProps } from '../CreatableAutocomplete/CreatableAutocomplete.js';
@@ -14,7 +16,6 @@ import { NumberFieldProps } from '../NumberField/types.js';
 import { RadioGroupProps } from '../RadioGroup/RadioGroup.js';
 import { RankProps } from '../Rank/Rank.js';
 import { RichTextFieldProps } from '../RichTextField/RichTextField.js';
-import { SelectProps } from '../Select/Select.js';
 import { SliderProps } from '../Slider/Slider.js';
 import { StarRatingProps } from '../StarRating/StarRating.js';
 import { SwitchProps } from '../Switch/Switch.js';
@@ -60,12 +61,13 @@ interface FormGeneratorConfig {
 /**
  * Field Types
  */
-type FieldTypes = CheckboxType | CheckboxGroupType | SwitchType | TextareaType | SelectType | TextFieldType | SliderType | DifferentialType | RichTextFieldType | LikertType | RadioGroupType | DragAndDropRankingType | NumberFieldType | StarRatingType | HTMLType | CreatableAutocompleteType | CustomFieldType;
+type FieldTypes = CheckboxType | CheckboxGroupType | SwitchType | TextareaType | SelectType | AutocompleteFieldType | TextFieldType | SliderType | DifferentialType | RichTextFieldType | LikertType | RadioGroupType | DragAndDropRankingType | NumberFieldType | StarRatingType | HTMLType | CreatableAutocompleteType | CustomFieldType;
 type CreatableAutocompleteType = CreateFieldType<'creatableautocomplete', CreatableAutocompleteProps, string>;
 type TextFieldType = CreateFieldType<'textfield', TextFieldProps, string>;
 type NumberFieldType = CreateFieldType<'numberfield', NumberFieldProps, number>;
 type TextareaType = CreateFieldType<'textarea', TextareaProps, string>;
 type SelectType = CreateFieldType<'select', SelectProps, SelectProps['value']>;
+type AutocompleteFieldType = CreateFieldType<'autocomplete', Omit<AutocompleteFieldProps, 'options' | 'renderInput'>, NonNullable<AutocompleteFieldProps['defaultValue']>>;
 type CheckboxType = CreateFieldType<'checkbox', CheckboxProps, NonNullable<CheckboxProps['value']>>;
 type CheckboxGroupType = CreateFieldType<'checkboxGroup', CheckboxGroupProps, string[]>;
 type SwitchType = CreateFieldType<'switch', SwitchProps, NonNullable<SwitchProps['checked']>>;
@@ -117,7 +119,7 @@ type CreateFieldType<TFieldType extends string, TProps, TDefaultValue extends an
 });
 type FieldType = FieldTypes['fieldType'];
 type DynamicFieldType = Exclude<FieldTypes['fieldType'], 'html'>;
-type AvailableComponents = FunctionComponent<TextFieldProps> | FunctionComponent<NumberFieldProps> | FunctionComponent<SelectProps> | FunctionComponent<CreatableAutocompleteProps> | FunctionComponent<CheckboxProps> | FunctionComponent<CheckboxGroupProps> | FunctionComponent<SwitchProps> | FunctionComponent<SliderProps> | FunctionComponent<DifferentialProps> | FunctionComponent<LikertProps> | FunctionComponent<TextareaProps> | FunctionComponent<StarRatingProps> | FunctionComponent<RadioGroupProps> | FunctionComponent<RankProps> | FunctionComponent<RichTextFieldProps> | FunctionComponent<HtmlProps> | FunctionComponent<CustomFieldType>;
+type AvailableComponents = FunctionComponent<TextFieldProps> | FunctionComponent<NumberFieldProps> | FunctionComponent<AutocompleteFieldProps> | FunctionComponent<SelectProps> | FunctionComponent<CreatableAutocompleteProps> | FunctionComponent<CheckboxProps> | FunctionComponent<CheckboxGroupProps> | FunctionComponent<SwitchProps> | FunctionComponent<SliderProps> | FunctionComponent<DifferentialProps> | FunctionComponent<LikertProps> | FunctionComponent<TextareaProps> | FunctionComponent<StarRatingProps> | FunctionComponent<RadioGroupProps> | FunctionComponent<RankProps> | FunctionComponent<RichTextFieldProps> | FunctionComponent<HtmlProps> | FunctionComponent<CustomFieldType>;
 type InputWrapperProps = {
     ref?: any;
     control: Control;
@@ -127,4 +129,4 @@ type InputWrapperProps = {
     internalChange?: () => void;
 };
 
-export type { AvailableComponents, BaseField, CheckboxGroupType, CheckboxType, CreatableAutocompleteType, CustomFieldType, DifferentialType, DragAndDropRankingType, DynamicFieldType, FieldType, FieldTypes, FormGeneratorConfig, FormGeneratorHandler, FormGeneratorProps, HTMLType, InputWrapperProps, LikertType, NumberFieldType, RadioGroupType, RichTextFieldType, SelectType, SliderType, StarRatingType, SwitchType, TextFieldType, TextareaType };
+export type { AutocompleteFieldType, AvailableComponents, BaseField, CheckboxGroupType, CheckboxType, CreatableAutocompleteType, CustomFieldType, DifferentialType, DragAndDropRankingType, DynamicFieldType, FieldType, FieldTypes, FormGeneratorConfig, FormGeneratorHandler, FormGeneratorProps, HTMLType, InputWrapperProps, LikertType, NumberFieldType, RadioGroupType, RichTextFieldType, SelectType, SliderType, StarRatingType, SwitchType, TextFieldType, TextareaType };

package/dist/systems/WebCore/RadioGroup/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, FunctionComponent } from 'react';
+import { ReactNode, Ref, FunctionComponent } from 'react';
 import { StyledRadioProps } from '../Radio/StyledRadio.js';
 
 interface RadioGroupOption {
@@ -17,6 +17,7 @@ interface RadioGroupProps {
     other?: RadioGroupOther;
     onChange: (value: string) => void;
     internalChange?: () => void;
+    inputRef?: Ref<any>;
     name: string;
     value: string;
     sizing?: StyledRadioProps['sizing'];

package/dist/systems/WebCore/RadioGroup/RadioGroup.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),a=require("react"),l=require("../../BrandCore/primitiveVariables.js"),o=require("../FormControlLabel/FormControlLabel.js"),i=require("../Radio/Radio.js");require("../Radio/StyledRadio.js");var t=require("../TextField/TextField.js");module.exports=({options:n,onChange:u,other:s,value:c,internalChange:d,sizing:g="lg",...h})=>{const p=s?.enabled,m="other-option",x=`${m}-value-`,[b,f]=a.useState(c),[j,v]=a.useState(!1),q=a.useRef(null);a.useEffect(()=>{!j&&b?.includes(x)?v(!0):j&&v(!1)},[b]);return a.useEffect(()=>{q.current&&Array.from(q.current.getElementsByTagName("label")).forEach(e=>{if(e.clientHeight>4*l.base){const r=e.querySelector(".MuiTypography-root");r&&(r.style.marginTop=l.base/2+"px")}})},[q.current]),e.jsxs(e.Fragment,{children:[e.jsxs(r.RadioGroup,{...h,value:b,ref:q,sx:{"& .MuiRadio-root":{alignSelf:"baseline"},"& .MuiTypography-root":{alignSelf:"center"},display:"flex",alignSelf:"baseline",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:hover":{"& .MuiRadio-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},onChange:(e,r)=>{u&&u(r),f(r),d&&d()},children:[n?n.map((r,a)=>e.jsx(o,{sx:{"& .MuiButtonBase-root.MuiRadio-root":{alignSelf:"baseline"}},...r,control:e.jsx(i,{sizing:g})},a)):null,p&&e.jsx(o,{label:s?.label||"Other",value:x,control:e.jsx(i,{sizing:g,checked:b?.includes(x)})},m)]}),j&&e.jsx(r.Box,{sx:{mt:1},children:e.jsx(t,{fullWidth:!0,autoFocus:!0,placeholder:s?.placeholder,defaultValue:b?.replace(x,""),onChange:e=>{var r;u&&u((r=e.target.value,`${x}${r}`)),d&&d()},required:!0})})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),a=require("react"),l=require("../../BrandCore/primitiveVariables.js"),o=require("../FormControlLabel/FormControlLabel.js"),i=require("../Radio/Radio.js");require("../Radio/StyledRadio.js");var t=require("../TextField/TextField.js");module.exports=({options:n,onChange:u,other:s,value:c,internalChange:d,sizing:g="lg",inputRef:h,...p})=>{const m=s?.enabled,x="other-option",f=`${x}-value-`,[b,j]=a.useState(c),[v,q]=a.useState(!1),y=a.useRef(null);a.useEffect(()=>{!v&&b?.includes(f)?q(!0):v&&q(!1)},[b]);return a.useEffect(()=>{y.current&&Array.from(y.current.getElementsByTagName("label")).forEach(e=>{if(e.clientHeight>4*l.base){const r=e.querySelector(".MuiTypography-root");r&&(r.style.marginTop=l.base/2+"px")}})},[y.current]),e.jsxs(e.Fragment,{children:[e.jsxs(r.RadioGroup,{...p,value:b,ref:y,sx:{"& .MuiRadio-root":{alignSelf:"baseline"},"& .MuiTypography-root":{alignSelf:"center"},display:"flex",alignSelf:"baseline",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:hover":{"& .MuiRadio-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},onChange:(e,r)=>{u&&u(r),j(r),d&&d()},children:[n?n.map((r,a)=>e.jsx(o,{sx:{"& .MuiButtonBase-root.MuiRadio-root":{alignSelf:"baseline"}},...r,control:e.jsx(i,{sizing:g})},a)):null,m&&e.jsx(o,{label:s?.label||"Other",value:f,control:e.jsx(i,{sizing:g,checked:b?.includes(f)})},x)]}),v&&e.jsx(r.Box,{sx:{mt:1},children:e.jsx(t,{fullWidth:!0,autoFocus:!0,placeholder:s?.placeholder,defaultValue:b?.replace(f,""),onChange:e=>{var r;u&&u((r=e.target.value,`${f}${r}`)),d&&d()},required:!0})})]})};

package/dist/systems/WebCore/RankItem/RankItem.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { SelectProps } from '../Select/Select.js';
+import { SelectProps } from '../Select/types.js';
 
 interface Option {
     label: string;

package/dist/systems/WebCore/RankItem/RankItem.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/icons-material"),r=require("@mui/material"),t=require("../../BrandCore/Icon/Icon.js"),a=require("../../BrandCore/primitiveVariables.js"),l=require("../Select/Select.js");require("../Select/SelectItem.js");var s=require("./RankItemContainer.js"),n=require("./RankItemLabel.js");module.exports=({label:o="Placeholder",disabled:c,onChange:d,options:u,fullWidth:m})=>{const x=r.useTheme(),h=u.map(e=>e.label).indexOf(o);return e.jsx(s,{disabled:c,fullWidth:m,children:e.jsxs(r.Stack,{display:"flex",justifyContent:"space-between",flexDirection:"row",alignItems:"center",sx:{position:"relative",zIndex:1},children:[e.jsxs(r.Box,{display:"flex",alignItems:"center",sx:{"& svg":{fill:x.custom.palette.icon.secondary}},children:[e.jsx(i.DragHandle,{"aria-label":"drag-handle",sx:{width:t.iconSizeMap.lg,height:t.iconSizeMap.lg,mr:x.custom.padding.sm}}),e.jsx(n,{align:"left",disabled:c,children:o})]}),e.jsx(l,{name:"rank",sizing:"xs",selections:u.map((e,i)=>({label:`${i+1}`,value:`${i}`})),disabled:c,value:`${h}`,onChange:function(e){const i=h,r=Number(e.target.value),t=u;let a=1;const l=t.splice(i,a)[0];a=0,t.splice(r,a,l),d(t)},MenuProps:{anchorOrigin:{vertical:a.space[400],horizontal:"center"}},sx:{[`&.${r.selectClasses.root}`]:{width:6*a.base,textAlign:"center"},[`& .${r.typographyClasses.root}`]:{width:"fit-content"}}})]})})};
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/icons-material"),r=require("@mui/material"),t=require("../../BrandCore/Icon/Icon.js"),a=require("../../BrandCore/primitiveVariables.js");require("../SelectItem/SelectItem.js");var l=require("../Select/Select.js"),s=require("./RankItemContainer.js"),n=require("./RankItemLabel.js");module.exports=({label:o="Placeholder",disabled:c,onChange:d,options:u,fullWidth:m})=>{const x=r.useTheme(),h=u.map(e=>e.label).indexOf(o);return e.jsx(s,{disabled:c,fullWidth:m,children:e.jsxs(r.Stack,{display:"flex",justifyContent:"space-between",flexDirection:"row",alignItems:"center",sx:{position:"relative",zIndex:1},children:[e.jsxs(r.Box,{display:"flex",alignItems:"center",sx:{"& svg":{fill:x.custom.palette.icon.secondary}},children:[e.jsx(i.DragHandle,{"aria-label":"drag-handle",sx:{width:t.iconSizeMap.lg,height:t.iconSizeMap.lg,mr:x.custom.padding.sm}}),e.jsx(n,{align:"left",disabled:c,children:o})]}),e.jsx(l,{name:"rank",sizing:"xs",selections:u.map((e,i)=>({label:`${i+1}`,value:`${i}`})),disabled:c,value:`${h}`,onChange:function(e){const i=h,r=Number(e.target.value),t=u;let a=1;const l=t.splice(i,a)[0];a=0,t.splice(r,a,l),d(t)},MenuProps:{anchorOrigin:{vertical:a.space[400],horizontal:"center"}},sx:{[`&.${r.selectClasses.root}`]:{width:6*a.base,textAlign:"center"},[`& .${r.typographyClasses.root}`]:{width:"fit-content"}}})]})})};

package/dist/systems/WebCore/Select/Select.d.ts

@@ -1,40 +1,6 @@
-import { SelectProps as SelectProps$1, SelectChangeEvent, MenuItemProps } from '@mui/material';
-import { ReactElement, FunctionComponent } from 'react';
-import { SelectOption } from './StyledSelect.variant-helpers.js';
+import { FunctionComponent } from 'react';
+import { SelectProps } from './types.js';
 
-type SelectOnChange = (event: SelectChangeEvent<any>, child: React.ReactNode) => void;
-type AutocompleteOnChange = (value: string | string[]) => void;
-type SelectProps = {
-    selections: SelectOption[];
-    autoComplete?: boolean;
-    autoFocus?: boolean;
-    disabled?: boolean;
-    disablePortal?: boolean;
-    error?: boolean;
-    fullWidth?: boolean;
-    grouped?: boolean;
-    id?: string;
-    inputRef?: SelectProps$1['inputRef'];
-    internalChange?: () => void;
-    MenuProps?: SelectProps$1['MenuProps'];
-    multi?: boolean;
-    name: string;
-    onBlur?: SelectProps$1['onBlur'];
-    onChange?: SelectOnChange | AutocompleteOnChange;
-    placeholder?: string | undefined;
-    readOnly?: boolean;
-    ref?: SelectProps$1['ref'];
-    required?: boolean;
-    selectOptionProps?: MenuItemProps;
-    sizing?: 'xs' | 'md' | 'lg';
-    sx?: SelectProps$1['sx'];
-    onOpen?: SelectProps$1['onOpen'];
-    inputProps?: SelectProps$1['inputProps'];
-    value?: SelectProps$1['value'];
-    renderListItem?: (value: string, label: string) => ReactElement;
-    renderSelectedItem?: (value: string, label?: string) => ReactElement;
-};
 declare const Select: FunctionComponent<SelectProps>;
 
 export { Select as default };
-export type { SelectProps };

package/dist/systems/WebCore/Select/Select.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/icons-material"),l=require("@mui/material"),i=require("../../../utils/breakpoint.hook.js"),t=require("../Typography/Typography.js"),n=require("./Autocomplete.js"),a=require("./SelectItem.js"),s=require("./StyledSelect.js"),o=require("./StyledSelect.variant-helpers.js");module.exports=({selections:u,autoComplete:p=!1,disabled:d=!1,disablePortal:m=!1,grouped:c,inputRef:h,internalChange:g,multi:j=!0,onChange:v,placeholder:x="",selectOptionProps:y,sizing:b="lg",sx:q,value:C=[],renderListItem:S,renderSelectedItem:z,...I})=>{const f=l.useTheme(),A=i.useBreakpoint();return p?e.jsx(n,{selections:u,placeholder:x,disabled:d,sizing:b,onChange:(e,r)=>{v&&v(r||""),g&&g()},value:Array.isArray(C)?C??[]:C??"",internalChange:g,renderListItem:S,multiple:j,grouped:c}):e.jsx(s,{sizing:b,inputRef:h,MenuProps:{disablePortal:m,sx:o.menuStyles,anchorOrigin:{vertical:"bottom",horizontal:"center"}},displayEmpty:!0,IconComponent:r.KeyboardArrowDown,renderValue:r=>x&&!r?e.jsx(t,{component:"p",variation:"sm"===A||"md"===A?"sm":"lg",sx:{color:f.custom.palette.text.placeholder},children:x}):z?z(r,u?.find(({value:e})=>e===r)?.label):e.jsx(t,{component:"p",variation:"sm"===A||"md"===A?"sm":"lg",children:u?.find(({value:e})=>e===r)?.label}),onChange:(e,r)=>{v&&v(e,r),g&&g()},sx:q,value:C,...I,children:u?.map(({value:r,label:l})=>e.jsx(a,{value:r,...y,sizing:b,children:S?S(r,l):l},r))})};
+"use strict";var e=require("react/jsx-runtime"),l=require("@mui/icons-material"),i=require("@mui/material"),r=require("../../../utils/breakpoint.hook.js"),t=require("../Typography/Typography.js"),a=require("../AutocompleteBaseField/_partials/StyledPopper.js"),n=require("../SelectItem/SelectItem.js"),s=require("./StyledSelect.js");module.exports=({selections:o,disabled:p=!1,disablePortal:u=!1,inputRef:d,internalChange:m,onChange:c,placeholder:h="",selectOptionProps:x,sizing:g="lg",sx:v,value:j=[],multi:b,renderListItem:y,renderSelectedItem:q,...S})=>{const f=i.useTheme(),I=r.useBreakpoint();return e.jsx(s,{sizing:g,inputRef:d,MenuProps:{disablePortal:u,sx:a.popperStyles(f,g),anchorOrigin:{vertical:"bottom",horizontal:"center"}},multiple:b,disabled:p,displayEmpty:!0,IconComponent:l.KeyboardArrowDown,renderValue:l=>h&&!l||h&&0===l.length?e.jsx(t,{component:"p",variation:"sm"===I||"md"===I?"sm":"lg",sx:{color:f.custom.palette.text.placeholder},children:h}):q?e.jsx(i.Box,{sx:{display:"flex",alignItems:"center",pl:f.p.xs,width:1},children:q(l,o?.find(({value:e})=>e===l)?.label)}):b?e.jsx(t,{id:"value-multi",component:"p",variation:"sm"===I||"md"===I?"sm":"lg",children:l.map(e=>o?.find(({value:l})=>l===e)?.label||e).join(", ")}):e.jsx(t,{id:"value-single",component:"p",variation:"sm"===I||"md"===I?"sm":"lg",children:o?.find(({value:e})=>e===l)?.label}),onChange:(e,l)=>{c&&c(e,l),m&&m()},sx:v,value:j,...S,children:o?.map(({value:l,label:i})=>e.jsx(n,{value:l,...x,sizing:g,children:y?y(l,i):i},l))})};

package/dist/systems/WebCore/Select/StyledSelect.variant-helpers.js

@@ -1 +1 @@
-"use strict";require("react/jsx-runtime"),require("@mui/material");var t=require("../../BrandCore/Icon/Icon.js"),e=require("../../BrandCore/primitiveVariables.js"),i=require("../utils/typography.util.js");const o="0px 4px 8px 0px #06040D14, 0px 16px 24px 0px #06040D14, 0px 0px 4px 2px #06040D0A, 0px 0px 0px 1px #FFFFFF29",n=t=>{switch(t){case"xs":return 24;case"md":return 32;default:return 40}},s=t=>{switch(t){case"xs":return 24;case"md":return 32;default:return 40}},a=t=>{switch(t){case"xs":case"md":return 16;default:return 24}};exports.getInputSize=(e,i)=>{switch(i){case"lg":return{height:n(i),"& .MuiSvgIcon-root":{color:e.custom.palette.icon.primary,transition:e.custom.easing.input,width:t.iconSizeMap.lg,height:t.iconSizeMap.lg,top:`calc(50% - ${t.iconSizeMap.lg/2}px)`}};case"md":return{height:n(i),"& .MuiSvgIcon-root":{color:e.custom.palette.icon.primary,transition:e.custom.easing.input,width:t.iconSizeMap.md,height:t.iconSizeMap.md,top:`calc(50% - ${t.iconSizeMap.md/2}px)`}};case"xs":return{height:n(i),"& .MuiSvgIcon-root":{color:e.custom.palette.icon.primary,transition:e.custom.easing.input,width:t.iconSizeMap.xs,height:t.iconSizeMap.xs,top:`calc(50% - ${t.iconSizeMap.xs/2}px)`}};default:return{height:n("lg"),"& .MuiSvgIcon-root":{color:e.custom.palette.icon.primary,transition:e.custom.easing.input,width:t.iconSizeMap.lg,height:t.iconSizeMap.lg,top:`calc(50% - ${t.iconSizeMap.lg/2}px)`}}}},exports.getTypographyStyle=(t,e)=>({"& .MuiTypography-root":{overflow:"hidden",textOverflow:"ellipsis",fontSize:i.fontSizemap[e],paddingLeft:t.spacing("xs"===e?t.custom.padding.xs:t.custom.padding.sm),paddingRight:t.spacing("xs"===e?t.custom.padding.xs:t.custom.padding.sm)}}),exports.menuStyles=t=>({width:0,"&.MuiModal-root.MuiPopover-root":{"&.MuiMenu-root":{borderRadius:t.spacing(t.custom.radius.sm),"& .MuiPaper-root":{border:`1px solid ${t.custom.palette.stroke.default}`,backgroundColor:t.custom.palette.surface.raised,boxShadow:o}}}}),exports.popperBoxShadow=o,exports.selectBaseStyles=(t,o)=>({fontSize:i.fontSizemap[o],borderRadius:t.spacing(t.custom.radius.md),position:"relative",padding:0,"& .MuiSelect-outlined":{padding:0},"& .MuiSelect-select.MuiInputBase-input":{padding:t.spacing(e.padding.sm),paddingRight:t.spacing(e.padding.md)},"&:before":{transition:t.custom.easing.input,content:'""',position:"absolute",background:t.custom.palette.interaction.none,borderRadius:t.spacing(t.custom.radius.md),inset:0,zIndex:0},"&:hover:before":{backgroundColor:t.custom.palette.interaction.hover},"&.Mui-focused:before":{backgroundColor:t.custom.palette.interaction.press},"&.Mui-disabled:before":{backgroundColor:t.custom.palette.interaction.none},"& .MuiSelect-select":{position:"relative"}}),exports.selectInputHeight=n,exports.selectItemBaseStyles=(t,e)=>({position:"relative",fontSize:i.fontSizemap[e],backgroundColor:t.custom.palette.interaction.none,color:t.custom.palette.text.primary,minHeight:s(e),justifyContent:"space-between",paddingLeft:t.spacing("xs"===e?t.custom.padding.sm:t.custom.padding.md),paddingRight:t.spacing("xs"===e?t.custom.padding.sm:t.custom.padding.md),gap:t.spacing(t.custom.padding.sm),whiteSpace:"wrap","&:before":{transition:t.custom.easing.input,content:'""',position:"absolute",inset:0,zIndex:1},"& .MuiSvgIcon-root":{width:a(e),height:a(e)}}),exports.selectMenuItemSize=s,exports.selectTickSize=a;
+"use strict";require("react/jsx-runtime"),require("@mui/material");var t=require("../../BrandCore/Icon/Icon.js"),e=require("../ButtonBase/Button.variant-helpers.js");require("../ButtonBase/ButtonBase.js");var i=require("../utils/typography.util.js");const o=t=>{switch(t){case"xs":return 24;case"sm":case"md":return 32;case"lg":default:return 40;case"xl":return 48}},n=t=>{switch(t){case"xs":case"sm":case"md":return 16;case"lg":default:return 24;case"xl":return 28}},a=(t,e)=>{switch(e){case"xs":case"sm":case"md":return{paddingLeft:t.spacing(t.custom.padding.xs),paddingRight:t.spacing(t.custom.padding.md)};default:return{paddingLeft:t.spacing(t.custom.padding.sm),paddingRight:t.spacing(t.custom.padding.lg)}}};exports.getInputPadding=a,exports.getInputSize=(i,o)=>{switch(o){case"xl":return{...e.getButtonSizing(o),"& .MuiSvgIcon-root":{color:i.custom.palette.icon.primary,transition:i.custom.easing.input,width:t.iconSizeMap.xl,height:t.iconSizeMap.xl,top:`calc(50% - ${t.iconSizeMap.xl/2}px)`}};case"lg":return{...e.getButtonSizing(o),"& .MuiSvgIcon-root":{color:i.custom.palette.icon.primary,transition:i.custom.easing.input,width:t.iconSizeMap.lg,height:t.iconSizeMap.lg,top:`calc(50% - ${t.iconSizeMap.lg/2}px)`}};case"md":return{...e.getButtonSizing(o),"& .MuiSvgIcon-root":{color:i.custom.palette.icon.primary,transition:i.custom.easing.input,width:t.iconSizeMap.md,height:t.iconSizeMap.md,top:`calc(50% - ${t.iconSizeMap.md/2}px)`}};case"sm":return{...e.getButtonSizing(o),"& .MuiSvgIcon-root":{color:i.custom.palette.icon.primary,transition:i.custom.easing.input,width:t.iconSizeMap.sm,height:t.iconSizeMap.sm,top:`calc(50% - ${t.iconSizeMap.sm/2}px)`}};case"xs":return{...e.getButtonSizing(o),"& .MuiSvgIcon-root":{color:i.custom.palette.icon.primary,transition:i.custom.easing.input,width:t.iconSizeMap.xs,height:t.iconSizeMap.xs,top:`calc(50% - ${t.iconSizeMap.xs/2}px)`}};default:return{...e.getButtonSizing("lg"),"& .MuiSvgIcon-root":{color:i.custom.palette.icon.primary,transition:i.custom.easing.input,width:t.iconSizeMap.lg,height:t.iconSizeMap.lg,top:`calc(50% - ${t.iconSizeMap.lg/2}px)`}}}},exports.getTypographyStyle=(t,e)=>({"& .MuiTypography-root":{overflow:"hidden",textOverflow:"ellipsis",fontSize:i.fontSizemap[e],paddingLeft:t.spacing("xs"===e?t.custom.padding.xs:t.custom.padding.sm),paddingRight:t.spacing("xs"===e?t.custom.padding.xs:t.custom.padding.sm)}}),exports.popperBoxShadow="0px 4px 8px 0px #06040D14, 0px 16px 24px 0px #06040D14, 0px 0px 4px 2px #06040D0A, 0px 0px 0px 1px #FFFFFF29",exports.selectBaseStyles=(t,e)=>({fontSize:i.fontSizemap[e],borderRadius:t.spacing(t.custom.radius.md),position:"relative",padding:0,"& .MuiSelect-outlined":{padding:0},"& .MuiSelect-select.MuiInputBase-input":{height:"100%",display:"flex",alignItems:"center",...a(t,e),width:"100%"},"&:before":{transition:t.custom.easing.input,content:'""',position:"absolute",background:t.custom.palette.interaction.none,borderRadius:t.spacing(t.custom.radius.md),inset:0,zIndex:0},"&:hover:before":{backgroundColor:t.custom.palette.interaction.hover},"&.Mui-focused:before":{backgroundColor:t.custom.palette.interaction.press},"&.Mui-disabled:before":{backgroundColor:t.custom.palette.interaction.none},"& .MuiSelect-select":{position:"relative"}}),exports.selectItemBaseStyles=(t,e)=>({position:"relative",fontSize:i.fontSizemap[e],backgroundColor:t.custom.palette.interaction.none,color:t.custom.palette.text.primary,minHeight:o(e),justifyContent:"space-between",paddingLeft:t.spacing("xs"===e?t.custom.padding.sm:t.custom.padding.md),paddingRight:t.spacing("xs"===e?t.custom.padding.sm:t.custom.padding.md),gap:t.spacing(t.custom.padding.sm),whiteSpace:"wrap","& .MuiSvgIcon-root":{width:n(e),height:n(e)}}),exports.selectMenuItemSize=o,exports.selectTickSize=n;

package/dist/systems/WebCore/Select/types.d.ts

@@ -0,0 +1,36 @@
+import { SelectProps as SelectProps$1 } from '@mui/material';
+import { GenericSizeMap } from 'index';
+import { ReactElement } from 'react';
+import { SelectOption, SelectItemProps } from '../SelectItem/types.js';
+
+type InputSizing = Exclude<GenericSizeMap, 'none' | 'xxl' | 'xxxl'>;
+type SelectProps = {
+    name: string;
+    selections: SelectOption[];
+    autoFocus?: boolean;
+    disabled?: boolean;
+    disablePortal?: boolean;
+    error?: boolean;
+    fullWidth?: boolean;
+    id?: string;
+    inputProps?: SelectProps$1['inputProps'];
+    inputRef?: SelectProps$1['inputRef'];
+    internalChange?: () => void;
+    MenuProps?: SelectProps$1['MenuProps'];
+    onBlur?: SelectProps$1['onBlur'];
+    multi?: boolean;
+    onChange?: SelectProps$1['onChange'];
+    onOpen?: SelectProps$1['onOpen'];
+    placeholder?: string | undefined;
+    readOnly?: boolean;
+    ref?: SelectProps$1['ref'];
+    renderListItem?: (value: string, label: string) => ReactElement;
+    renderSelectedItem?: (value: string, label?: string) => ReactElement;
+    required?: boolean;
+    selectOptionProps?: SelectItemProps;
+    sizing?: InputSizing;
+    sx?: SelectProps$1['sx'];
+    value?: SelectProps$1['value'];
+};
+
+export type { InputSizing, SelectProps };

package/dist/systems/WebCore/SelectItem/SelectItem.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { SelectItemProps } from './types.js';
+
+declare const SelectItem: FunctionComponent<SelectItemProps>;
+
+export { SelectItem as default };

package/dist/systems/WebCore/SelectItem/SelectItem.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/icons-material"),i=require("@mui/material"),o=require("../Select/StyledSelect.variant-helpers.js");const r=i.styled(i.MenuItem)(({theme:e,sizing:t})=>({...{...o.selectItemBaseStyles(e,t)},"&.Mui-focusVisible":{backgroundColor:e.custom.palette.interaction.hover},"&:hover":{backgroundColor:e.custom.palette.interaction.hover},"&.Mui-selected":{backgroundColor:e.custom.palette.interaction.press,"&.Mui-focusVisible":{backgroundColor:e.custom.palette.interaction.press},"&:hover":{backgroundColor:e.custom.palette.interaction.press}},"&.MuiButtonBase-root.MuiMenuItem-root.Mui-disabled":{backgroundColor:e.custom.palette.input.default,color:e.custom.palette.text.disabled,"&:before":{backgroundColor:e.custom.palette.interaction.disabled}}}));module.exports=({children:o,selected:s,...l})=>e.jsx(r,{...l,children:e.jsxs(i.Box,{display:"flex",justifyContent:"space-between",alignItems:"center",width:"100%",gap:2,children:[e.jsx(i.Box,{children:o}),e.jsx(i.Box,{sx:{display:"flex",alignItems:"center"},children:e.jsx(t.Check,{sx:{visibility:s?"visible":"hidden",fontSize:"16px"}})})]})});

package/dist/systems/WebCore/SelectItem/types.d.ts

@@ -0,0 +1,12 @@
+import { MenuItemProps } from '@mui/material';
+import { InputSizing } from '../Select/types.js';
+
+interface SelectItemProps extends MenuItemProps {
+    sizing: InputSizing;
+}
+type SelectOption = {
+    label: string;
+    value: string;
+};
+
+export type { SelectItemProps, SelectOption };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@useloops/design-system",
-    "version": "1.4.638",
+    "version": "1.4.639",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",

package/dist/esm/systems/WebCore/CreatableAutocomplete/StyledCreatableAutocomplete.js

@@ -1 +0,0 @@
-import{styled as t,Autocomplete as i,Popper as e}from"@mui/material";import{base as o}from"../../BrandCore/primitiveVariables.js";import{autocompleteStyles as p,popperStyles as m}from"../utils/autocomplete.styles.js";const r=t(i)(({theme:t,sizing:i})=>({...i&&{...p(t,i)},"&.MuiAutocomplete-root .MuiOutlinedInput-root .MuiAutocomplete-input":{...i&&{height:"xs"===i?2*o+"px":3*o+"px"},paddingLeft:t.spacing(t.custom.padding.sm),paddingTop:0,paddingBottom:0,justifyContent:"center",textOverflow:"ellipsis",whiteSpace:"nowrap"}})),n=t(e)(({theme:t,sizing:i})=>({...i&&{...m(t,i)}}));export{r as StyledCreatableAutocomplete,n as StyledCreatablePopper};

package/dist/esm/systems/WebCore/Select/Autocomplete.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Check as o,CloseRounded as t,KeyboardArrowDown as r}from"@mui/icons-material";import{Box as i,autocompleteClasses as n}from"@mui/material";import s,{useState as a,useEffect as p,forwardRef as u}from"react";import{StyledTextField as m}from"../utils/autocomplete.styles.js";import c from"./AutocompleteListbox.js";import d from"./AutocompletePopper.js";import{StyledAutocomplete as b,StyledChip as g}from"./StyledAutocomplete.js";const f=({selections:f,disableClearable:h=!1,disabled:v,internalChange:y,grouped:x=!1,multiple:A=!0,onChange:z,placeholder:C="",renderListItem:O,sizing:S="lg",value:j=(A?[]:"")})=>{const[I,k]=a(f.filter(e=>j.includes(e?.value)));p(()=>{null!=j&&k(f.filter(e=>j.includes(e?.value)))},[j]);const L=(e,l)=>{if(z){const o=l?f.map(({value:e})=>e):[];k(l?f:[]),z(e,o,"selectOption"),y&&y()}},F=e=>null!==e&&(!Array.isArray(e)||e.length>0);return e(b,{disabledItemsFocusable:!0,autoFocus:!1,disableCloseOnSelect:!0,blurOnSelect:!1,popupIcon:e(r,{}),sizing:S,disabled:v,disableClearable:h,autoComplete:!0,multiple:A,...x?{groupBy:e=>(e=>Object.hasOwn(e,"group"))(e)?e.group:"",renderGroup:o=>l(s.Fragment,{children:[0!==parseInt(`${o.key}`)&&e(i,{sx:{borderBottom:e=>`1px solid ${e.custom.palette.stroke.default}`,my:1}}),e(i,{component:"div",className:n.groupLabel,children:o.group}),o.children]},o.key)}:{},renderInput:l=>e(m,{...l,placeholder:F(I)?void 0:C,sizing:S}),options:f,renderTags:(l,o)=>l.map((l,r)=>{const{key:i,...n}=o({index:r});return e(g,{sizing:S,deleteIcon:e(t,{fontSize:"small"}),label:l.label,...n},i)}),onChange:(e,l,o)=>{const t=Array.isArray(l)?l.map(e=>e.value):l?.value??null;k(l),z?.(e,t,o),y?.()},slots:{popper:l=>e(d,{...l,sizing:S})},isOptionEqualToValue:(e,l)=>e.value===l.value,renderOption:(t,r,{selected:i})=>{const{key:n,...s}=t;return l("li",{...s,children:[e("span",{children:O?O(r.value,r.label):r.label}),e(o,{sx:{visibility:i?"visible":"hidden",fontSize:"16px"}})]},n)},ListboxComponent:u((l,o)=>e(c,{ref:o,...l,showSelectAll:A,handleSelectAll:L,value:I,selections:f,sizing:S})),value:I})};export{f as default};

package/dist/esm/systems/WebCore/Select/AutocompleteListbox.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as l}from"react/jsx-runtime";import{forwardRef as t}from"react";import r from"./AutocompleteSelectAll.js";const n=t(({children:t,handleSelectAll:n,showSelectAll:i,value:s=[],selections:c,sizing:o,...a},h)=>{const A=Array.isArray(s)&&s.length===c.length,m=Array.isArray(s)&&s.length>0&&s.length<c.length;return e("ul",{ref:h,...a,children:[i&&l(r,{handleSelectAll:n,isIndeterminate:m,isAllSelected:A,sizing:o}),t]})});export{n as default};

package/dist/esm/systems/WebCore/Select/AutocompletePopper.js

@@ -1 +0,0 @@
-import{jsx as t}from"react/jsx-runtime";import{StyledPopper as o}from"./StyledAutocomplete.js";const e=e=>t(o,{...e});export{e as default};

package/dist/esm/systems/WebCore/Select/AutocompleteSelectAll.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useTheme as i,Stack as r,FormLabel as n}from"@mui/material";import{useState as o,useEffect as l}from"react";import s from"../Checkbox/StyledCheckbox.js";import{fontSizemap as c}from"../utils/typography.util.js";const m=({handleSelectAll:m,isIndeterminate:a,isAllSelected:d,sizing:p})=>{const[f,u]=o(!1),g=i();return l(()=>{d&&u(d)},[d]),e(r,{direction:"row",gap:g.spacing(g.custom.padding.sm),onClick:e=>{const t=!f;u(t),m(e,t)},sx:{marginLeft:"auto",display:"flex",alignItems:"center",justifyContent:"flex-end",p:e=>e.custom.padding.sm},children:[t(n,{sx:{cursor:"pointer",fontSize:()=>p&&c[p]},children:"Select all"}),t(s,{sizing:"default",indeterminate:a,checked:f})]})};export{m as default};

package/dist/esm/systems/WebCore/Select/SelectItem.js

@@ -1 +0,0 @@
-import{jsx as t}from"react/jsx-runtime";import{styled as e,MenuItem as o}from"@mui/material";import{selectItemBaseStyles as r}from"./StyledSelect.variant-helpers.js";const i=e(o)(({theme:t,sizing:e})=>({...{...r(t,e)},"&.Mui-focusVisible":{backgroundColor:t.custom.palette.interaction.hover},"&:hover":{backgroundColor:t.custom.palette.interaction.hover},"&.Mui-selected":{backgroundColor:t.custom.palette.interaction.press,"&.Mui-focusVisible":{backgroundColor:t.custom.palette.interaction.press},"&:hover":{backgroundColor:t.custom.palette.interaction.press}},"&.MuiButtonBase-root.MuiMenuItem-root.Mui-disabled":{backgroundColor:t.custom.palette.input.default,color:t.custom.palette.text.disabled,"&:before":{backgroundColor:t.custom.palette.interaction.disabled}}})),a=({children:e,...o})=>t(i,{...o,children:e});export{a as default};

package/dist/esm/systems/WebCore/Select/StyledAutocomplete.js

@@ -1 +0,0 @@
-import{styled as t,Autocomplete as i,autocompleteClasses as e,Chip as o,Popper as a}from"@mui/material";import{base as s}from"../../BrandCore/primitiveVariables.js";import{selectMenuItemSize as r}from"./StyledSelect.variant-helpers.js";import{autocompleteStyles as p,popperStyles as d}from"../utils/autocomplete.styles.js";import{fontSizemap as n}from"../utils/typography.util.js";const l=t(i)(({theme:t,sizing:i,value:o})=>({...i&&p(t,i),"&.MuiAutocomplete-root .MuiOutlinedInput-root .MuiAutocomplete-input":{paddingLeft:o&&Array.isArray(o)&&o.length>0?0:t.spacing(t.custom.padding.sm),paddingTop:1,paddingBottom:0,justifyContent:"center",textOverflow:"ellipsis",whiteSpace:"nowrap"},"& .MuiAutocomplete-tag":{...i&&{height:"xs"===i?2*s+"px":3*s+"px"},margin:0,"& .MuiSvgIcon-root":{height:"12px",width:"12px"}},"& .MuiChip-root .MuiChip-label":{height:20,lineHeight:"20px",maxWidth:140,...i&&{padding:`0 ${t.spacing(t.custom.padding.xs)}`}},[`&.${e.hasClearIcon}`]:{paddingTop:0}})),u=t(o)(({theme:t,sizing:i})=>({borderRadius:t.spacing(t.custom.radius.sm),border:`1px solid ${t.custom.palette.stroke.default}`,backgroundColor:t.custom.palette.surface.default,...i&&{padding:`0 ${t.spacing(t.custom.padding.xs)}`},"& .MuiChip-deleteIcon":{fill:t.custom.palette.icon.primary,borderRadius:t.custom.radius.round,margin:0,"&:hover":{backgroundColor:t.custom.palette.interaction.hover},"&:active":{backgroundColor:t.custom.palette.interaction.press},"&:disabled":{backgroundColor:t.custom.palette.interaction.disabled,fill:t.custom.palette.icon.disabled}}})),m=t(a)(({theme:t,sizing:i})=>({...i&&{...d(t,i)},[`& .${e.listbox} .${e.groupLabel}`]:{...i&&{minHeight:r(i),fontSize:n[i]},paddingLeft:t.spacing("xs"===i?t.custom.padding.sm:t.custom.padding.md),paddingRight:t.spacing("xs"===i?t.custom.padding.sm:t.custom.padding.md),color:t.custom.palette.text.secondary,fontWeight:t.typography.fontWeightRegular,display:"flex",alignItems:"center"}}));export{l as StyledAutocomplete,u as StyledChip,m as StyledPopper};

package/dist/esm/systems/WebCore/utils/autocomplete.styles.js

@@ -1 +0,0 @@
-import{styled as o,TextField as t,autocompleteClasses as i}from"@mui/material";import"../../BrandCore/colorRamps.js";import{base as a}from"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import"react/jsx-runtime";import{iconSizeMap as e}from"../../BrandCore/Icon/Icon.js";import{popperBoxShadow as s}from"../Select/StyledSelect.variant-helpers.js";import{fontSizemap as r}from"./typography.util.js";const n=(o,t)=>({maxWidth:"100%",backgroundColor:o.custom.palette.surface.raised,borderRadius:o.spacing(o.custom.radius.md),border:`1px solid ${o.custom.palette.stroke.default}`,transition:o.custom.easing.input,"& .MuiSvgIcon-root":{...t&&{width:e[t],height:e[t]}},"& .MuiAutocomplete-inputRoot":{...t&&{fontSize:r[t],gap:"lg"===t?o.spacing(o.custom.padding.sm):o.spacing(o.custom.padding.xs)},display:"flex",alignItems:"flex-start",paddingRight:3*a+"px",flexWrap:"wrap",height:"auto"},"& .MuiOutlinedInput-root":{display:"flex",alignItems:"center",padding:0},"& .MuiAutocomplete-endAdornment":{marginRight:o.spacing(o.custom.margin.sm)},"&.Mui-disabled":{backgroundColor:`${o.custom.palette.input.disabled}`,borderColor:`${o.custom.palette.stroke.disabled}`},"&.Mui-focused":{backgroundColor:o.custom.palette.input.default,borderColor:o.custom.palette.stroke.focus,boxShadow:o.custom.boxShadow.input.focus},"& .MuiChip-root .MuiChip-label":{height:20,lineHeight:"20px",maxWidth:140,...t&&{padding:`0 ${o.spacing(o.custom.padding.xs)}`}}}),d=(o,t)=>({"& .MuiPaper-root":{...t&&{margin:"lg"===t?o.spacing(o.custom.padding.sm):o.spacing(o.custom.padding.xs),marginLeft:"lg"===t?`-${o.spacing(o.custom.padding.sm)}`:`-${o.spacing(o.custom.padding.xs)}`,marginTop:`calc(${"lg"===t?o.spacing(o.custom.margin.sm):o.spacing(o.custom.margin.xs)} + ${o.spacing(o.custom.margin.xs)})`},border:`1px solid ${o.custom.palette.stroke.default}`,backgroundColor:o.custom.palette.surface.raised,boxShadow:s,borderRadius:o.spacing(o.custom.radius.sm)},[`& .${i.listbox}`]:{overflowX:"hidden",width:"100%",padding:`${o.spacing(o.custom.padding.sm)} 0`,[`& .${i.option}`]:{fontSize:r[t],...t&&{minHeight:"lg"===t?5*a+"px":4*a+"px"},paddingLeft:o.spacing("xs"===t?o.custom.padding.sm:o.custom.padding.md),gap:o.spacing(o.custom.padding.sm),display:"flex",alignItems:"center",'&[aria-selected="true"]':{backgroundColor:o.custom.palette.interaction.press,"&.Mui-focused":{backgroundColor:o.custom.palette.interaction.press},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}},"&.Mui-focused":{background:"inherit"},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}}}}),p=o(t)(({theme:o,sizing:t})=>({"& .MuiOutlinedInput-root":{padding:0,...t&&{margin:"lg"===t?o.spacing(o.custom.padding.sm):o.spacing(o.custom.padding.xs)}},"& .MuiInputBase-input":{padding:"0 14px"},"& .MuiOutlinedInput-notchedOutline":{border:"none"}}));export{p as StyledTextField,n as autocompleteStyles,d as popperStyles};

package/dist/systems/WebCore/CreatableAutocomplete/StyledCreatableAutocomplete.js

@@ -1 +0,0 @@
-"use strict";var e=require("@mui/material"),t=require("../../BrandCore/primitiveVariables.js"),i=require("../utils/autocomplete.styles.js");const o=e.styled(e.Autocomplete)(({theme:e,sizing:o})=>({...o&&{...i.autocompleteStyles(e,o)},"&.MuiAutocomplete-root .MuiOutlinedInput-root .MuiAutocomplete-input":{...o&&{height:"xs"===o?2*t.base+"px":3*t.base+"px"},paddingLeft:e.spacing(e.custom.padding.sm),paddingTop:0,paddingBottom:0,justifyContent:"center",textOverflow:"ellipsis",whiteSpace:"nowrap"}})),p=e.styled(e.Popper)(({theme:e,sizing:t})=>({...t&&{...i.popperStyles(e,t)}}));exports.StyledCreatableAutocomplete=o,exports.StyledCreatablePopper=p;

package/dist/systems/WebCore/Select/Autocomplete.js

@@ -1 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),l=require("@mui/icons-material"),s=require("@mui/material"),t=require("react"),r=require("../utils/autocomplete.styles.js"),o=require("./AutocompleteListbox.js"),i=require("./AutocompletePopper.js"),a=require("./StyledAutocomplete.js");function n(e){return e&&e.__esModule?e:{default:e}}var u=n(t);module.exports=({selections:n,disableClearable:d=!1,disabled:c,internalChange:p,grouped:m=!1,multiple:x=!0,onChange:b,placeholder:g="",renderListItem:j,sizing:h="lg",value:v=(x?[]:"")})=>{const[y,f]=t.useState(n.filter(e=>v.includes(e?.value)));t.useEffect(()=>{null!=v&&f(n.filter(e=>v.includes(e?.value)))},[v]);const C=(e,l)=>{if(b){const s=l?n.map(({value:e})=>e):[];f(l?n:[]),b(e,s,"selectOption"),p&&p()}},A=e=>null!==e&&(!Array.isArray(e)||e.length>0);return e.jsx(a.StyledAutocomplete,{disabledItemsFocusable:!0,autoFocus:!1,disableCloseOnSelect:!0,blurOnSelect:!1,popupIcon:e.jsx(l.KeyboardArrowDown,{}),sizing:h,disabled:c,disableClearable:d,autoComplete:!0,multiple:x,...m?{groupBy:e=>(e=>Object.hasOwn(e,"group"))(e)?e.group:"",renderGroup:l=>e.jsxs(u.default.Fragment,{children:[0!==parseInt(`${l.key}`)&&e.jsx(s.Box,{sx:{borderBottom:e=>`1px solid ${e.custom.palette.stroke.default}`,my:1}}),e.jsx(s.Box,{component:"div",className:s.autocompleteClasses.groupLabel,children:l.group}),l.children]},l.key)}:{},renderInput:l=>e.jsx(r.StyledTextField,{...l,placeholder:A(y)?void 0:g,sizing:h}),options:n,renderTags:(s,t)=>s.map((s,r)=>{const{key:o,...i}=t({index:r});return e.jsx(a.StyledChip,{sizing:h,deleteIcon:e.jsx(l.CloseRounded,{fontSize:"small"}),label:s.label,...i},o)}),onChange:(e,l,s)=>{const t=Array.isArray(l)?l.map(e=>e.value):l?.value??null;f(l),b?.(e,t,s),p?.()},slots:{popper:l=>e.jsx(i,{...l,sizing:h})},isOptionEqualToValue:(e,l)=>e.value===l.value,renderOption:(s,t,{selected:r})=>{const{key:o,...i}=s;return e.jsxs("li",{...i,children:[e.jsx("span",{children:j?j(t.value,t.label):t.label}),e.jsx(l.Check,{sx:{visibility:r?"visible":"hidden",fontSize:"16px"}})]},o)},ListboxComponent:t.forwardRef((l,s)=>e.jsx(o,{ref:s,...l,showSelectAll:x,handleSelectAll:C,value:y,selections:n,sizing:h})),value:y})};

package/dist/systems/WebCore/Select/AutocompleteListbox.js

@@ -1 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),l=require("react"),r=require("./AutocompleteSelectAll.js");const t=l.forwardRef(({children:l,handleSelectAll:t,showSelectAll:s,value:n=[],selections:i,sizing:c,...a},h)=>{const u=Array.isArray(n)&&n.length===i.length,A=Array.isArray(n)&&n.length>0&&n.length<i.length;return e.jsxs("ul",{ref:h,...a,children:[s&&e.jsx(r,{handleSelectAll:t,isIndeterminate:A,isAllSelected:u,sizing:c}),l]})});module.exports=t;

package/dist/systems/WebCore/Select/AutocompletePopper.js

@@ -1 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("./StyledAutocomplete.js");module.exports=t=>e.jsx(r.StyledPopper,{...t});

package/dist/systems/WebCore/Select/AutocompleteSelectAll.js

@@ -1 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("react"),r=require("../Checkbox/StyledCheckbox.js"),s=require("../utils/typography.util.js");module.exports=({handleSelectAll:n,isIndeterminate:l,isAllSelected:a,sizing:c})=>{const[u,o]=i.useState(!1),d=t.useTheme();return i.useEffect(()=>{a&&o(a)},[a]),e.jsxs(t.Stack,{direction:"row",gap:d.spacing(d.custom.padding.sm),onClick:e=>{const t=!u;o(t),n(e,t)},sx:{marginLeft:"auto",display:"flex",alignItems:"center",justifyContent:"flex-end",p:e=>e.custom.padding.sm},children:[e.jsx(t.FormLabel,{sx:{cursor:"pointer",fontSize:()=>c&&s.fontSizemap[c]},children:"Select all"}),e.jsx(r,{sizing:"default",indeterminate:l,checked:u})]})};

package/dist/systems/WebCore/Select/SelectItem.d.ts

@@ -1,8 +0,0 @@
-import { MenuItemProps } from '@mui/material';
-import { InputSizing } from './StyledSelect.variant-helpers.js';
-
-interface SelectItemProps extends MenuItemProps {
-    sizing: InputSizing;
-}
-
-export type { SelectItemProps };

package/dist/systems/WebCore/Select/SelectItem.js

@@ -1 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),o=require("./StyledSelect.variant-helpers.js");const r=t.styled(t.MenuItem)(({theme:e,sizing:t})=>({...{...o.selectItemBaseStyles(e,t)},"&.Mui-focusVisible":{backgroundColor:e.custom.palette.interaction.hover},"&:hover":{backgroundColor:e.custom.palette.interaction.hover},"&.Mui-selected":{backgroundColor:e.custom.palette.interaction.press,"&.Mui-focusVisible":{backgroundColor:e.custom.palette.interaction.press},"&:hover":{backgroundColor:e.custom.palette.interaction.press}},"&.MuiButtonBase-root.MuiMenuItem-root.Mui-disabled":{backgroundColor:e.custom.palette.input.default,color:e.custom.palette.text.disabled,"&:before":{backgroundColor:e.custom.palette.interaction.disabled}}}));module.exports=({children:t,...o})=>e.jsx(r,{...o,children:t});

package/dist/systems/WebCore/Select/StyledAutocomplete.js

@@ -1 +0,0 @@
-"use strict";var e=require("@mui/material"),t=require("../../BrandCore/primitiveVariables.js"),i=require("./StyledSelect.variant-helpers.js"),o=require("../utils/autocomplete.styles.js"),s=require("../utils/typography.util.js");const a=e.styled(e.Autocomplete)(({theme:i,sizing:s,value:a})=>({...s&&o.autocompleteStyles(i,s),"&.MuiAutocomplete-root .MuiOutlinedInput-root .MuiAutocomplete-input":{paddingLeft:a&&Array.isArray(a)&&a.length>0?0:i.spacing(i.custom.padding.sm),paddingTop:1,paddingBottom:0,justifyContent:"center",textOverflow:"ellipsis",whiteSpace:"nowrap"},"& .MuiAutocomplete-tag":{...s&&{height:"xs"===s?2*t.base+"px":3*t.base+"px"},margin:0,"& .MuiSvgIcon-root":{height:"12px",width:"12px"}},"& .MuiChip-root .MuiChip-label":{height:20,lineHeight:"20px",maxWidth:140,...s&&{padding:`0 ${i.spacing(i.custom.padding.xs)}`}},[`&.${e.autocompleteClasses.hasClearIcon}`]:{paddingTop:0}})),p=e.styled(e.Chip)(({theme:e,sizing:t})=>({borderRadius:e.spacing(e.custom.radius.sm),border:`1px solid ${e.custom.palette.stroke.default}`,backgroundColor:e.custom.palette.surface.default,...t&&{padding:`0 ${e.spacing(e.custom.padding.xs)}`},"& .MuiChip-deleteIcon":{fill:e.custom.palette.icon.primary,borderRadius:e.custom.radius.round,margin:0,"&:hover":{backgroundColor:e.custom.palette.interaction.hover},"&:active":{backgroundColor:e.custom.palette.interaction.press},"&:disabled":{backgroundColor:e.custom.palette.interaction.disabled,fill:e.custom.palette.icon.disabled}}})),r=e.styled(e.Popper)(({theme:t,sizing:a})=>({...a&&{...o.popperStyles(t,a)},[`& .${e.autocompleteClasses.listbox} .${e.autocompleteClasses.groupLabel}`]:{...a&&{minHeight:i.selectMenuItemSize(a),fontSize:s.fontSizemap[a]},paddingLeft:t.spacing("xs"===a?t.custom.padding.sm:t.custom.padding.md),paddingRight:t.spacing("xs"===a?t.custom.padding.sm:t.custom.padding.md),color:t.custom.palette.text.secondary,fontWeight:t.typography.fontWeightRegular,display:"flex",alignItems:"center"}}));exports.StyledAutocomplete=a,exports.StyledChip=p,exports.StyledPopper=r;

package/dist/systems/WebCore/Select/StyledSelect.variant-helpers.d.ts

@@ -1,12 +0,0 @@
-import { GenericSizeMap } from '../../BrandCore/primitiveVariables.js';
-
-type InputSizing = Exclude<GenericSizeMap, 'none'>;
-type SelectOption = {
-    label: string;
-    value: string;
-};
-type GroupSelectOption = SelectOption & {
-    group: string;
-};
-
-export type { GroupSelectOption, InputSizing, SelectOption };

package/dist/systems/WebCore/utils/autocomplete.styles.js

@@ -1 +0,0 @@
-"use strict";var e=require("@mui/material");require("../../BrandCore/colorRamps.js");var t=require("../../BrandCore/primitiveVariables.js");require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js"),require("react/jsx-runtime");var o=require("../../BrandCore/Icon/Icon.js"),i=require("../Select/StyledSelect.variant-helpers.js"),a=require("./typography.util.js");const s=e.styled(e.TextField)(({theme:e,sizing:t})=>({"& .MuiOutlinedInput-root":{padding:0,...t&&{margin:"lg"===t?e.spacing(e.custom.padding.sm):e.spacing(e.custom.padding.xs)}},"& .MuiInputBase-input":{padding:"0 14px"},"& .MuiOutlinedInput-notchedOutline":{border:"none"}}));exports.StyledTextField=s,exports.autocompleteStyles=(e,i)=>({maxWidth:"100%",backgroundColor:e.custom.palette.surface.raised,borderRadius:e.spacing(e.custom.radius.md),border:`1px solid ${e.custom.palette.stroke.default}`,transition:e.custom.easing.input,"& .MuiSvgIcon-root":{...i&&{width:o.iconSizeMap[i],height:o.iconSizeMap[i]}},"& .MuiAutocomplete-inputRoot":{...i&&{fontSize:a.fontSizemap[i],gap:"lg"===i?e.spacing(e.custom.padding.sm):e.spacing(e.custom.padding.xs)},display:"flex",alignItems:"flex-start",paddingRight:3*t.base+"px",flexWrap:"wrap",height:"auto"},"& .MuiOutlinedInput-root":{display:"flex",alignItems:"center",padding:0},"& .MuiAutocomplete-endAdornment":{marginRight:e.spacing(e.custom.margin.sm)},"&.Mui-disabled":{backgroundColor:`${e.custom.palette.input.disabled}`,borderColor:`${e.custom.palette.stroke.disabled}`},"&.Mui-focused":{backgroundColor:e.custom.palette.input.default,borderColor:e.custom.palette.stroke.focus,boxShadow:e.custom.boxShadow.input.focus},"& .MuiChip-root .MuiChip-label":{height:20,lineHeight:"20px",maxWidth:140,...i&&{padding:`0 ${e.spacing(e.custom.padding.xs)}`}}}),exports.popperStyles=(o,s)=>({"& .MuiPaper-root":{...s&&{margin:"lg"===s?o.spacing(o.custom.padding.sm):o.spacing(o.custom.padding.xs),marginLeft:"lg"===s?`-${o.spacing(o.custom.padding.sm)}`:`-${o.spacing(o.custom.padding.xs)}`,marginTop:`calc(${"lg"===s?o.spacing(o.custom.margin.sm):o.spacing(o.custom.margin.xs)} + ${o.spacing(o.custom.margin.xs)})`},border:`1px solid ${o.custom.palette.stroke.default}`,backgroundColor:o.custom.palette.surface.raised,boxShadow:i.popperBoxShadow,borderRadius:o.spacing(o.custom.radius.sm)},[`& .${e.autocompleteClasses.listbox}`]:{overflowX:"hidden",width:"100%",padding:`${o.spacing(o.custom.padding.sm)} 0`,[`& .${e.autocompleteClasses.option}`]:{fontSize:a.fontSizemap[s],...s&&{minHeight:"lg"===s?5*t.base+"px":4*t.base+"px"},paddingLeft:o.spacing("xs"===s?o.custom.padding.sm:o.custom.padding.md),gap:o.spacing(o.custom.padding.sm),display:"flex",alignItems:"center",'&[aria-selected="true"]':{backgroundColor:o.custom.palette.interaction.press,"&.Mui-focused":{backgroundColor:o.custom.palette.interaction.press},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}},"&.Mui-focused":{background:"inherit"},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}}}});