@useloops/design-system 1.4.585 → 1.4.587

package/dist/systems/Platform/VideoControls/VideoControls.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),i=require("@use-it/event-listener"),a=require("../../../utils/normaliseFloat.js");require("../../../utils/formValidation/misc.js"),require("../../BrandCore/Icon/Icon.js"),require("../../BrandCore/primitiveVariables.js"),require("../../WebCore/utils/typography.util.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/Accordion/Accordion.js"),require("../../WebCore/Typography/Typography.js"),require("merge-sx"),require("../../WebCore/Badge/Badge.js"),require("../../WebCore/Breadcrumb/Breadcrumb.js"),require("../../WebCore/Button/Button.js"),require("../../WebCore/ButtonBase/ButtonBase.js"),require("../../WebCore/Checkbox/StyledCheckbox.js"),require("../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),require("@mui/icons-material"),require("../../WebCore/InputLabelBase/StyledInputLabelBase.js"),require("../../WebCore/Differential/DifferentialContainer.js"),require("../../WebCore/Differential/DifferentialRadio.js"),require("../../WebCore/DropdownMenu/StyledMenu.js"),require("../../WebCore/FormGenerator/FormGenerator.js"),require("../../WebCore/GridOverlay/GridOverlay.js"),require("html-react-parser"),require("../../WebCore/IconButton/IconButton.js"),require("../../WebCore/IconButtonBase/IconButtonBase.js"),require("../../WebCore/IconButtonGroup/IconButtonGroup.js"),require("../../WebCore/Image/Image.js"),require("../../WebCore/Label/Label.js"),require("../../WebCore/Likert/LikertContainer.js"),require("../../WebCore/Likert/LikertLabel.js"),require("../../WebCore/Likert/LikertRadio.js"),require("../../WebCore/Link/StyledLink.js"),require("@lottiefiles/dotlottie-react"),require("../../WebCore/LoopsAiButton/LoopsAiButton.js"),require("markdown-to-jsx"),require("material-ui-popup-state/hooks");var o=require("../../WebCore/Surface/Surface.js");require("../../WebCore/Menu/MenuItem.js"),require("../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js"),require("../../WebCore/ModalLayout/_partials/ModalContentWrapper.js"),require("../../WebCore/NavigationButton/NavigationButton.js"),require("../../WebCore/Nudge/NudgeButton.js"),require("../../WebCore/NumberField/NumberField.js"),require("../../BrandCore/colorRamps.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js"),require("../../WebCore/Pill/StyledPill.js"),require("../../WebCore/Progress/Progress.js"),require("../../WebCore/ProgressBar/ProgressBar.js"),require("../../WebCore/Radio/StyledRadio.js"),require("../../WebCore/utils/autocomplete.styles.js"),require("../../WebCore/Select/AutocompleteListbox.js"),require("../../WebCore/Select/StyledAutocomplete.js"),require("../../WebCore/Select/SelectItem.js"),require("../../WebCore/Select/StyledSelect.js"),require("../../WebCore/RankItem/RankItemContainer.js"),require("../../WebCore/RankItem/RankItemLabel.js"),require("../../WebCore/SortableList/SortableList.js"),require("../../WebCore/SortableList/components/SortableItem/SortableItem.js"),require("../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js"),require("@tiptap/extension-placeholder"),require("@tiptap/starter-kit"),require("mui-tiptap"),require("../../WebCore/RichTextField/StyledRichTextEditor.js"),require("../../WebCore/Skeleton/Skeleton.js"),require("../../WebCore/Slider/StyledSlider.js"),require("../../WebCore/StarRating/StarRating.js"),require("../../WebCore/Switch/StyledSwitch.js"),require("../../WebCore/Textarea/Textarea.js"),require("../../WebCore/TrialCard/TrialCardContainers.js"),require("../../WebCore/TrialCard/TrialPill.js"),require("../../WebCore/UserMenu/UserMenuButton.js"),require("../../WebCore/VideoModal/VideoModal.js");var n=require("./components/ActionButton/ActionButton.js"),s=require("./components/Timeline/Timeline.js");function l(e){return e&&e.__esModule?e:{default:e}}var u=l(i);const d=t.styled(o)(({theme:e})=>({display:"flex",flex:1,padding:e.spacing(e.custom.padding.md),borderColor:e.custom.palette.stroke.light,borderWidth:1,gap:e.spacing(e.custom.padding.sm),borderStyle:"solid",flexDirection:"column"})),m=t.styled(t.Stack)(({theme:e})=>({alignItems:"center",gap:e.spacing(e.custom.padding.md),justifyContent:"space-between",flexDirection:"row",flex:1})),c=r.forwardRef(({id:t,videoElement:i,initialEndTime:o=0,initialCurrentTime:l=0,initialMuted:c,initialVolume:b,markers:f,options:C,slots:p,events:{onEnd:g,onPlay:q,onSeekEnd:j,onSeeking:y,onSeekStart:k,onTimeUpdate:T,onPause:W,onVolumeChange:v,onVolumeMute:S,onRestart:B,onFirstPlay:h,onFirstEnded:I,onReset:E}={},videoSeekTime:F},L)=>{const[x,P]=r.useState(!1),[w,M]=r.useState([]),R={rtl:!1,volumeControls:!0,normaliseTime:!1,markerIndicatorMode:"time",markerIndicator:!1,markerIndicatorSize:3,volumeControlsType:"mute",disableBufferingEvents:!1,...C},[{seeking:A,endTime:V,currentTime:D,playing:G,buffering:N,loaded:O,ended:_,volume:z,muted:U,startTime:H,firstPlay:J,firstEnded:K},Q]=r.useState({startTime:a.normaliseFloat(R.normaliseTime?l:0),endTime:a.normaliseFloat(R.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1,volume:b||1,muted:c||!1,buffering:!1});r.useEffect(()=>{if(i.muted=U,i.volume=z,R.normaliseTime&&(void 0===o||void 0===l))throw new Error("Please supply an initial end time and initial currentTime for normalising time in VideoControls.tsx");return()=>{se()}},[]),r.useEffect(()=>{Q(e=>({...e,startTime:a.normaliseFloat(R.normaliseTime?l:0),endTime:a.normaliseFloat(R.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0)})),i.currentTime=a.normaliseFloat(l??0)},[l,o]);const X=r.useCallback(()=>{Q(e=>({...e,playing:!1,ended:!0,...!K&&{firstEnded:!0}})),g&&g(),!K&&I&&I()},[K]);r.useEffect(()=>{if(!i||null==F)return;(async()=>{const e=!i.paused,r=F===V;Q(e=>({...e,playing:!1,currentTime:a.normaliseFloat(F)})),await new Promise(e=>{const r=()=>{i.removeEventListener("seeked",r),e()};i.addEventListener("seeked",r),setTimeout(e,500)}),Q(e=>({...e,currentTime:a.normaliseFloat(F)})),await new Promise(e=>setTimeout(e,50)),Q(t=>({...t,playing:e,currentTime:a.normaliseFloat(r?F-.001:F+.001)}))})().catch(e=>{console.error("Error seeking video:",e)})},[F,i]);const Y=r.useCallback(e=>{Q(r=>({...r,muted:e.target?.muted,volume:"number"==typeof e.target?.volume?e.target?.volume:1})),U!==e.target?.muted&&S&&S(!U),z!==e.target?.volume&&v&&v(z)},[U,z]),Z=r.useCallback(()=>{const e=a.normaliseFloat(i.currentTime)>=V&&V!==a.normaliseFloat(i.duration)&&!_,r=a.normaliseFloat(i.currentTime)>=V&&V===a.normaliseFloat(i.duration)&&!_&&!G;(e||r)&&(i.pause(),i.dispatchEvent(new Event("ended"))),Q(e=>({...e,currentTime:a.normaliseFloat(i.currentTime)})),T&&T(a.normaliseFloat(i.currentTime))},[V,_,G]),$=r.useCallback(()=>{Q(e=>({...e,playing:!1})),W&&W()},[D]),ee=r.useCallback(()=>{Q(e=>({...e,playing:!0,ended:!1,...!R?.disableBufferingEvents&&{buffering:!1},...!J&&{firstPlay:!0}})),!J&&h&&h(),q&&q()},[J,R?.disableBufferingEvents]),re=r.useCallback(()=>{R?.disableBufferingEvents||Q(e=>({...e,buffering:!0}))},[R?.disableBufferingEvents]),te=r.useCallback(()=>{R?.disableBufferingEvents||Q(e=>({...e,buffering:!1}))},[N,R?.disableBufferingEvents]),ie=r.useCallback(()=>{if(R?.disableBufferingEvents)return;const e=[];for(let r=0;r<i.buffered.length;r++){const t=i.buffered.start(r),a=i.buffered.end(r);if(a>=H&&t<=V){const r=Math.max(t,H),i=Math.min(a,V);e.push({start:r-H,end:i-H,startPercent:(r-H)/(V-H)*100,widthPercent:(i-r)/(V-H)*100})}}M(e)},[A,V,D,G,N,O,_,z,U,H,w,R?.disableBufferingEvents]),ae=r.useCallback(async e=>{G&&se(),i.currentTime=H,e&&await ne(),B&&B()},[G,D,H,V,_]),oe=r.useCallback(async()=>{G&&se(),i.currentTime=H,Q(e=>({...e,startTime:a.normaliseFloat(R.normaliseTime?l:0),endTime:a.normaliseFloat(R.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1})),E&&E()},[G,D,H,V,_,l,o]),ne=async()=>{await i.play()},se=()=>{i.pause()},le=r.useCallback(e=>{i.currentTime=a.normaliseFloat(e),Q(r=>({...r,currentTime:a.normaliseFloat(e),ended:!1,seeking:!0,...!R?.disableBufferingEvents&&{buffering:!1},firstPlay:!J||r.firstPlay,bufferProgress:e})),y&&y(e),!J&&h&&h()},[N,J,R?.disableBufferingEvents]),ue=r.useCallback(async()=>{document.hidden?G&&!i.paused?(P(!0),se()):P(!1):(x&&!G&&await ne(),P(!1))},[G,x,se,ne,i]),de=r.useCallback(e=>{e&&i.pause(),Q(e=>({...e,seeking:!0})),k&&k()},[_]),me=r.useCallback(async(e,r,t)=>{r&&(i.currentTime=r),e&&!_&&await i.play(),t&&G&&i.pause(),Q(e=>({...e,...r?{currentTime:r}:{},ended:!t&&e.ended,seeking:!1})),j&&j(r)},[G,_,N,A]);return u.default("visibilitychange",ue,document),u.default("pause",$,i),u.default("playing",ee,i),u.default("timeupdate",Z,i),u.default("ended",X,i),u.default("volumechange",Y,i),u.default("waiting",re,i),u.default("canplay",te,i),u.default("progress",ie,i),r.useImperativeHandle(L,()=>({play:ne,pause:se,restart:ae,reset:oe,seek:(e,r,t)=>me(r,e,t),videoState:{seeking:A,endTime:V,currentTime:D,playing:G,buffering:N,loaded:O,ended:_,volume:z,firstPlay:J,firstEnded:K,muted:U,startTime:H}})),e.jsxs(d,{variation:"raised",borderradius:"xl",id:t,children:[e.jsxs(m,{...R?.rtl&&{dir:"rtl"},children:[e.jsx(n,{seeking:A,playing:G,ended:_,buffering:N,handleAction:async()=>{_?await ae(!0):G?se():await ne()}}),e.jsx(s,{handleSeeking:le,handleSeekEnd:me,handleSeekStart:de,ended:_,marker:p?.marker,markers:f,markerIndicatorMode:R.markerIndicatorMode,markerIndicatorSize:R.markerIndicatorSize,markerIndicator:R.markerIndicator,startTime:R.normaliseTime?H:0,currentTime:D,endTime:V,playing:G,bufferRanges:w,buffering:N,volume:z,muted:U,volumeControls:R.volumeControls,volumeControlsType:R.volumeControlsType,handleVolumeMute:()=>{i.muted=!U},handleVolumeChange:e=>{i.volume=e,U&&(i.muted=!1)}})]}),p?.bottom]})});var b=r.memo(c);module.exports=b;
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material"),i=require("@use-it/event-listener"),a=require("../../../utils/normaliseFloat.js");require("../../../utils/formValidation/misc.js"),require("../../BrandCore/Icon/Icon.js"),require("../../BrandCore/primitiveVariables.js"),require("../../WebCore/utils/typography.util.js"),require("../../WebCore/AnnualController/AnnualController.js"),require("../../WebCore/Accordion/Accordion.js"),require("../../WebCore/Typography/Typography.js"),require("merge-sx"),require("../../WebCore/Badge/Badge.js"),require("../../WebCore/Breadcrumb/Breadcrumb.js"),require("../../WebCore/Button/Button.js"),require("../../WebCore/ButtonBase/ButtonBase.js"),require("../../WebCore/Checkbox/StyledCheckbox.js"),require("../../WebCore/InputFieldBase/InputFieldBase.js"),require("../../WebCore/CreatableAutocomplete/CreatableAutocomplete.js"),require("@mui/icons-material"),require("../../WebCore/InputLabelBase/StyledInputLabelBase.js"),require("../../WebCore/Differential/DifferentialContainer.js"),require("../../WebCore/Differential/DifferentialRadio.js"),require("../../WebCore/DropdownMenu/StyledMenu.js"),require("../../WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js"),require("../../WebCore/FormGenerator/FormGenerator.js"),require("../../WebCore/GridOverlay/GridOverlay.js"),require("html-react-parser"),require("../../WebCore/IconButton/IconButton.js"),require("../../WebCore/IconButtonBase/IconButtonBase.js"),require("../../WebCore/IconButtonGroup/IconButtonGroup.js"),require("../../WebCore/Image/Image.js"),require("../../WebCore/Label/Label.js"),require("../../WebCore/Likert/LikertContainer.js"),require("../../WebCore/Likert/LikertLabel.js"),require("../../WebCore/Likert/LikertRadio.js"),require("../../WebCore/Link/StyledLink.js"),require("@lottiefiles/dotlottie-react"),require("../../WebCore/LoopsAiButton/LoopsAiButton.js"),require("markdown-to-jsx"),require("material-ui-popup-state/hooks");var o=require("../../WebCore/Surface/Surface.js");require("../../WebCore/Menu/MenuItem.js"),require("../../WebCore/ModalLayout/_partials/ModalActionsWrapper.js"),require("../../WebCore/ModalLayout/_partials/ModalContentWrapper.js"),require("../../WebCore/NavigationButton/NavigationButton.js"),require("../../WebCore/Nudge/NudgeButton.js"),require("../../WebCore/NumberField/NumberField.js"),require("../../BrandCore/colorRamps.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js"),require("../../WebCore/Progress/Progress.js"),require("../../WebCore/Pill/StyledPill.js"),require("../../WebCore/ProgressBar/ProgressBar.js"),require("../../WebCore/Radio/StyledRadio.js"),require("../../WebCore/utils/autocomplete.styles.js"),require("../../WebCore/Select/AutocompleteListbox.js"),require("../../WebCore/Select/StyledAutocomplete.js"),require("../../WebCore/Select/SelectItem.js"),require("../../WebCore/Select/StyledSelect.js"),require("../../WebCore/RankItem/RankItemContainer.js"),require("../../WebCore/RankItem/RankItemLabel.js"),require("../../WebCore/SortableList/SortableList.js"),require("../../WebCore/SortableList/components/SortableItem/SortableItem.js"),require("../../WebCore/SortableList/components/SortableOverlay/SortableOverlay.js"),require("@tiptap/extension-placeholder"),require("@tiptap/starter-kit"),require("mui-tiptap"),require("../../WebCore/RichTextField/StyledRichTextEditor.js"),require("../../WebCore/Skeleton/Skeleton.js"),require("../../WebCore/Slider/StyledSlider.js"),require("../../WebCore/StarRating/StarRating.js"),require("../../WebCore/Switch/StyledSwitch.js"),require("../../WebCore/Textarea/Textarea.js"),require("../../WebCore/TrialCard/TrialCardContainers.js"),require("../../WebCore/TrialCard/TrialPill.js"),require("../../WebCore/UserMenu/UserMenuButton.js"),require("../../WebCore/VideoModal/VideoModal.js");var n=require("./components/ActionButton/ActionButton.js"),s=require("./components/Timeline/Timeline.js");function l(e){return e&&e.__esModule?e:{default:e}}var u=l(i);const d=t.styled(o)(({theme:e})=>({display:"flex",flex:1,padding:e.spacing(e.custom.padding.md),borderColor:e.custom.palette.stroke.light,borderWidth:1,gap:e.spacing(e.custom.padding.sm),borderStyle:"solid",flexDirection:"column"})),m=t.styled(t.Stack)(({theme:e})=>({alignItems:"center",gap:e.spacing(e.custom.padding.md),justifyContent:"space-between",flexDirection:"row",flex:1})),c=r.forwardRef(({id:t,videoElement:i,initialEndTime:o=0,initialCurrentTime:l=0,initialMuted:c,initialVolume:b,markers:C,options:f,slots:p,events:{onEnd:g,onPlay:q,onSeekEnd:j,onSeeking:y,onSeekStart:k,onTimeUpdate:T,onPause:W,onVolumeChange:v,onVolumeMute:S,onRestart:B,onFirstPlay:h,onFirstEnded:E,onReset:I}={},videoSeekTime:F},x)=>{const[L,P]=r.useState(!1),[w,M]=r.useState([]),R={rtl:!1,volumeControls:!0,normaliseTime:!1,markerIndicatorMode:"time",markerIndicator:!1,markerIndicatorSize:3,volumeControlsType:"mute",disableBufferingEvents:!1,...f},[{seeking:A,endTime:V,currentTime:D,playing:G,buffering:N,loaded:O,ended:_,volume:z,muted:U,startTime:H,firstPlay:J,firstEnded:K},Q]=r.useState({startTime:a.normaliseFloat(R.normaliseTime?l:0),endTime:a.normaliseFloat(R.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1,volume:b||1,muted:c||!1,buffering:!1});r.useEffect(()=>{if(i.muted=U,i.volume=z,R.normaliseTime&&(void 0===o||void 0===l))throw new Error("Please supply an initial end time and initial currentTime for normalising time in VideoControls.tsx");return()=>{se()}},[]),r.useEffect(()=>{Q(e=>({...e,startTime:a.normaliseFloat(R.normaliseTime?l:0),endTime:a.normaliseFloat(R.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0)})),i.currentTime=a.normaliseFloat(l??0)},[l,o]);const X=r.useCallback(()=>{Q(e=>({...e,playing:!1,ended:!0,...!K&&{firstEnded:!0}})),g&&g(),!K&&E&&E()},[K]);r.useEffect(()=>{if(!i||null==F)return;(async()=>{const e=!i.paused,r=F===V;Q(e=>({...e,playing:!1,currentTime:a.normaliseFloat(F)})),await new Promise(e=>{const r=()=>{i.removeEventListener("seeked",r),e()};i.addEventListener("seeked",r),setTimeout(e,500)}),Q(e=>({...e,currentTime:a.normaliseFloat(F)})),await new Promise(e=>setTimeout(e,50)),Q(t=>({...t,playing:e,currentTime:a.normaliseFloat(r?F-.001:F+.001)}))})().catch(e=>{console.error("Error seeking video:",e)})},[F,i]);const Y=r.useCallback(e=>{Q(r=>({...r,muted:e.target?.muted,volume:"number"==typeof e.target?.volume?e.target?.volume:1})),U!==e.target?.muted&&S&&S(!U),z!==e.target?.volume&&v&&v(z)},[U,z]),Z=r.useCallback(()=>{const e=a.normaliseFloat(i.currentTime)>=V&&V!==a.normaliseFloat(i.duration)&&!_,r=a.normaliseFloat(i.currentTime)>=V&&V===a.normaliseFloat(i.duration)&&!_&&!G;(e||r)&&(i.pause(),i.dispatchEvent(new Event("ended"))),Q(e=>({...e,currentTime:a.normaliseFloat(i.currentTime)})),T&&T(a.normaliseFloat(i.currentTime))},[V,_,G]),$=r.useCallback(()=>{Q(e=>({...e,playing:!1})),W&&W()},[D]),ee=r.useCallback(()=>{Q(e=>({...e,playing:!0,ended:!1,...!R?.disableBufferingEvents&&{buffering:!1},...!J&&{firstPlay:!0}})),!J&&h&&h(),q&&q()},[J,R?.disableBufferingEvents]),re=r.useCallback(()=>{R?.disableBufferingEvents||Q(e=>({...e,buffering:!0}))},[R?.disableBufferingEvents]),te=r.useCallback(()=>{R?.disableBufferingEvents||Q(e=>({...e,buffering:!1}))},[N,R?.disableBufferingEvents]),ie=r.useCallback(()=>{if(R?.disableBufferingEvents)return;const e=[];for(let r=0;r<i.buffered.length;r++){const t=i.buffered.start(r),a=i.buffered.end(r);if(a>=H&&t<=V){const r=Math.max(t,H),i=Math.min(a,V);e.push({start:r-H,end:i-H,startPercent:(r-H)/(V-H)*100,widthPercent:(i-r)/(V-H)*100})}}M(e)},[A,V,D,G,N,O,_,z,U,H,w,R?.disableBufferingEvents]),ae=r.useCallback(async e=>{G&&se(),i.currentTime=H,e&&await ne(),B&&B()},[G,D,H,V,_]),oe=r.useCallback(async()=>{G&&se(),i.currentTime=H,Q(e=>({...e,startTime:a.normaliseFloat(R.normaliseTime?l:0),endTime:a.normaliseFloat(R.normaliseTime?o:i.duration),currentTime:a.normaliseFloat(l??0),loaded:!0,ended:!1,firstPlay:!1,firstEnded:!1,seeking:!1,playing:!1})),I&&I()},[G,D,H,V,_,l,o]),ne=async()=>{await i.play()},se=()=>{i.pause()},le=r.useCallback(e=>{i.currentTime=a.normaliseFloat(e),Q(r=>({...r,currentTime:a.normaliseFloat(e),ended:!1,seeking:!0,...!R?.disableBufferingEvents&&{buffering:!1},firstPlay:!J||r.firstPlay,bufferProgress:e})),y&&y(e),!J&&h&&h()},[N,J,R?.disableBufferingEvents]),ue=r.useCallback(async()=>{document.hidden?G&&!i.paused?(P(!0),se()):P(!1):(L&&!G&&await ne(),P(!1))},[G,L,se,ne,i]),de=r.useCallback(e=>{e&&i.pause(),Q(e=>({...e,seeking:!0})),k&&k()},[_]),me=r.useCallback(async(e,r,t)=>{r&&(i.currentTime=r),e&&!_&&await i.play(),t&&G&&i.pause(),Q(e=>({...e,...r?{currentTime:r}:{},ended:!t&&e.ended,seeking:!1})),j&&j(r)},[G,_,N,A]);return u.default("visibilitychange",ue,document),u.default("pause",$,i),u.default("playing",ee,i),u.default("timeupdate",Z,i),u.default("ended",X,i),u.default("volumechange",Y,i),u.default("waiting",re,i),u.default("canplay",te,i),u.default("progress",ie,i),r.useImperativeHandle(x,()=>({play:ne,pause:se,restart:ae,reset:oe,seek:(e,r,t)=>me(r,e,t),videoState:{seeking:A,endTime:V,currentTime:D,playing:G,buffering:N,loaded:O,ended:_,volume:z,firstPlay:J,firstEnded:K,muted:U,startTime:H}})),e.jsxs(d,{variation:"raised",borderradius:"xl",id:t,children:[e.jsxs(m,{...R?.rtl&&{dir:"rtl"},children:[e.jsx(n,{seeking:A,playing:G,ended:_,buffering:N,handleAction:async()=>{_?await ae(!0):G?se():await ne()}}),e.jsx(s,{handleSeeking:le,handleSeekEnd:me,handleSeekStart:de,ended:_,marker:p?.marker,markers:C,markerIndicatorMode:R.markerIndicatorMode,markerIndicatorSize:R.markerIndicatorSize,markerIndicator:R.markerIndicator,startTime:R.normaliseTime?H:0,currentTime:D,endTime:V,playing:G,bufferRanges:w,buffering:N,volume:z,muted:U,volumeControls:R.volumeControls,volumeControlsType:R.volumeControlsType,handleVolumeMute:()=>{i.muted=!U},handleVolumeChange:e=>{i.volume=e,U&&(i.muted=!1)}})]}),p?.bottom]})});var b=r.memo(c);module.exports=b;

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

@@ -1,20 +1,24 @@
-import { Theme, BoxProps } from '@mui/material';
+import { BoxProps, Theme } from '@mui/material';
 import react__default from 'react';
-import { ButtonProps } from '../Button/Button.js';
+import { GenericSizeMap } from 'systems/BrandCore';
 import { TypographyProps } from '../Typography/Typography.js';
 
+type ButtonSizing = Exclude<GenericSizeMap, 'none' | 'xxxl'>;
 interface ExpandableTypographyClampProps extends Partial<TypographyProps> {
-    onShowMoreClick?: ButtonProps['onClick'];
-    onShowLessClick?: ButtonProps['onClick'];
+    onShowMoreClick?: BoxProps['onClick'];
+    onShowLessClick?: BoxProps['onClick'];
+    disabled?: boolean;
+    dimmed?: boolean;
+    sizing?: ButtonSizing;
     slotProps?: {
         gradientBox?: {
             background?: string | ((theme: Theme) => string);
         } & BoxProps;
-        showMoreButton?: ButtonProps;
-        showLessButton?: ButtonProps;
+        showMoreButton?: BoxProps;
+        showLessButton?: BoxProps;
     };
 }
 declare const ExpandableTypographyClamp: react__default.FC<ExpandableTypographyClampProps>;
 
 export { ExpandableTypographyClamp as default };
-export type { ExpandableTypographyClampProps };
+export type { ButtonSizing, ExpandableTypographyClampProps };

package/dist/systems/WebCore/ExpandableTypographyClamp/ExpandableTypographyClamp.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("merge-sx"),o=require("react"),s=require("../Button/Button.js"),i=require("../Typography/Typography.js"),n=require("../../../utils/usePrevious.js");const a=(e,r)=>"function"==typeof r?r(e):r;module.exports=({onShowMoreClick:u,onShowLessClick:c,slotProps:x,...d})=>{const g=o.useRef(null),[l,p]=o.useState(!1),h=n.usePrevious(l),b=()=>{if(!g.current)return;const{scrollHeight:e,clientHeight:r}=g.current;p(e>r)};return o.useEffect(()=>{if(g.current){b();new ResizeObserver(b).observe(g.current)}return()=>{}},[d.children]),e.jsxs(r.Box,{sx:{position:"relative"},children:[e.jsx(i,{ref:g,component:"p",clamp:2,...d}),void 0!==u&&l&&e.jsxs(r.Box,{sx:{position:"absolute",bottom:-4,right:-4,display:"flex"},children:[e.jsx(r.Box,{...x?.gradientBox,sx:t.mergeSx({background:e=>`linear-gradient(to right, transparent 0%,${a(e,x?.gradientBox?.background)||e.custom.palette.surface.raised} 100%)`,width:20,height:20},x?.gradientBox?.sx)}),e.jsx(s,{sizing:"xs",variation:"subtle",onClick:u,...x?.showMoreButton,sx:t.mergeSx(e=>({borderRadius:0,color:e.custom.palette.text.link,fontSize:e.custom.typography.body.xs,fontWeight:500,textTransform:"uppercase",paddingX:0,"&:before, &:hover:before":{background:a(e,x?.gradientBox?.background)||e.custom.palette.surface.raised}}),x?.showMoreButton?.sx),children:"More"})]}),void 0!==c&&h&&!l&&e.jsxs(r.Box,{sx:{position:"absolute",bottom:-4,right:-4,display:"flex"},children:[e.jsx(r.Box,{...x?.gradientBox,sx:t.mergeSx({background:e=>`linear-gradient(to right, transparent 0%,${a(e,x?.gradientBox?.background)||e.custom.palette.surface.raised} 100%)`,width:20,height:20},x?.gradientBox?.sx)}),e.jsx(s,{sizing:"xs",variation:"subtle",onClick:c,...x?.showLessButton,sx:t.mergeSx(e=>({borderRadius:0,color:e.custom.palette.text.link,fontSize:e.custom.typography.body.xs,fontWeight:500,textTransform:"uppercase",paddingX:0,"&:before, &:hover:before":{background:a(e,x?.gradientBox?.background)||e.custom.palette.surface.raised}}),x?.showLessButton?.sx),children:"Less"})]})]})};
+"use strict";var e=require("react/jsx-runtime"),s=require("@mui/material"),o=require("react"),r=require("../../../utils/usePrevious.js"),t=require("../Typography/Typography.js"),i=require("./components/ExpandCollapseButton/ExpandCollapseButton.js"),n=require("./components/GradientShim/GradientShim.js"),a=require("./helpers/shimUtils.js");const l=s.styled(s.Box)(()=>({position:"absolute",bottom:0,right:0,display:"flex",alignItems:"center",overflow:"hidden"}));module.exports=({onShowMoreClick:u,onShowLessClick:c,disabled:d,dimmed:x,sizing:p="sm",slotProps:h,...m})=>{const g=s.useTheme(),b=o.useRef(null),[j,y]=o.useState(!1),B=r.usePrevious(j),f=()=>{if(!b.current)return;const{scrollHeight:e,clientHeight:s}=b.current;y(e>s)};return o.useEffect(()=>{if(b.current){f();new ResizeObserver(f).observe(b.current)}return()=>{}},[m.children]),e.jsxs(s.Box,{sx:{position:"relative"},id:"ExpandableTypography",children:[e.jsx(t,{ref:b,component:"p",clamp:2,sx:{color:d||x?g.custom.palette.text.disabled:g.custom.palette.text.primary},...m}),void 0!==u&&j&&e.jsxs(l,{className:"ExpandableTypography__show-more-container",children:[e.jsx(n,{...h?.gradientBox,sx:h?.gradientBox?.sx,sizing:p}),e.jsx(s.Box,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:g.custom.palette.surface.default,boxShadow:a.createShimGradient(g.custom.palette.surface.default),...h?.showMoreButton?.sx},children:e.jsx(i,{sizing:p,disabled:d,onClick:d?void 0:u,...h?.showMoreButton,children:"More"})})]}),void 0!==c&&B&&!j&&e.jsxs(l,{children:[e.jsx(n,{...h?.gradientBox,sx:h?.gradientBox?.sx,sizing:p}),e.jsx(s.Box,{className:"ExpandableTypography__show-more-button",sx:{backgroundColor:g.custom.palette.surface.raised,...h?.showLessButton?.sx},children:e.jsx(i,{sizing:p,onClick:d?void 0:c,...h?.showLessButton,sx:h?.showLessButton?.sx,children:"Less"})})]})]})};

package/dist/systems/WebCore/ExpandableTypographyClamp/components/ExpandCollapseButton/ExpandCollapseButton.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("merge-sx"),i=require("../../../Typography/Typography.js");module.exports=({onClick:o,sizing:s,sx:n,children:a,disabled:u,...c})=>{const p=r.useTheme();return e.jsx(r.Box,{onClick:o,sx:t.mergeSx({pointerEvents:u?"none":"auto",paddingX:p.custom.padding.xs,"&:hover":{cursor:"pointer"}},n),...c,children:e.jsx(i,{component:"p",variation:s,sx:{textTransform:"uppercase",fontWeight:500,color:u?p.custom.palette.text.disabled:p.custom.palette.text.link},children:a})})};

package/dist/systems/WebCore/ExpandableTypographyClamp/components/GradientShim/GradientShim.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),i=require("merge-sx"),s=require("../../helpers/shimUtils.js");module.exports=({sx:m,sizing:u,...t})=>(r.useTheme(),e.jsx(r.Box,{...t,sx:i.mergeSx({...s.getShimSizing(u)},m)}));

package/dist/systems/WebCore/ExpandableTypographyClamp/helpers/shimUtils.d.ts

@@ -0,0 +1,3 @@
+declare const createShimGradient: (backgroundColor: string) => string;
+
+export { createShimGradient };

package/dist/systems/WebCore/ExpandableTypographyClamp/helpers/shimUtils.js

@@ -0,0 +1 @@
+"use strict";exports.createShimGradient=h=>`-5px 0px 4px ${h}, -20px 0px 20px ${h}, -30px 0px 40px ${h}`,exports.getShimSizing=h=>{const t={xxl:{height:32,width:32},xl:{height:28,width:32},lg:{height:25,width:32},md:{height:22,width:32},sm:{height:20,width:32},xs:{height:18,width:32},xxs:{height:16,width:32}};return t[h]||t.md};

package/dist/systems/WebCore/Pill/Pill.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material");require("../../BrandCore/colorRamps.js"),require("../../BrandCore/primitiveVariables.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var o=require("../../BrandCore/Icon/Icon.js"),i=require("../IconButton/IconButton.js"),s=require("../Tooltip/Tooltip.js"),t=require("../Typography/Typography.js"),a=require("./StyledPill.js"),n=require("./useTextTruncation.js");module.exports=u=>{const l=r.useTheme(),{label:c,iconLeft:j,iconRight:p,onDelete:d,active:m,slots:q}=u,{textRef:x,isTruncated:h}=n([c]),y=e.jsxs(a,{...u,children:[j&&e.jsx(o.default,{size:16,name:j}),e.jsx(t,{component:"p",variation:"sm",noWrap:!0,ref:x,children:c}),p&&e.jsx(o.default,{size:16,name:p}),d&&e.jsx(i,{sizing:"xs",onClick:d,shape:"round",variation:"default",icon:e.jsx(o.default,{name:"cancel",sx:{color:m?l.custom.palette.blue[1e3]:l.custom.palette.icon.secondary}})})]});return h?e.jsx(s,{message:c,...q?.tooltip,children:y}):y};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material");require("../../BrandCore/colorRamps.js"),require("../../BrandCore/primitiveVariables.js"),require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var s=require("../../BrandCore/Icon/Icon.js"),i=require("../IconButton/IconButton.js"),o=require("../Progress/Progress.js"),a=require("../Tooltip/Tooltip.js"),n=require("../Typography/Typography.js"),t=require("./StyledPill.js"),d=require("./useTextTruncation.js");module.exports=l=>{const c=r.useTheme(),{label:u,secondaryLabel:p,iconLeft:m,iconRight:x,onDelete:j,active:g,slots:b,loading:q,sizing:y,disabled:f}=l,{textRef:h,isTruncated:B}=d([u]),C=e.jsxs(t,{className:"loops-pill",tabIndex:0,...l,children:[q&&e.jsx(o,{sizing:y||"xl",sx:{color:c.custom.palette.icon.disabled}}),!q&&e.jsxs(e.Fragment,{children:[m&&e.jsx(s.default,{disabled:f,size:16,name:m}),"string"==typeof u?e.jsx(n,{component:"p",variation:"sm",noWrap:!0,ref:h,disabled:f,sx:{padding:`0 ${c.spacing(c.custom.padding.xs)}`},children:u}):u,"string"==typeof p?e.jsx(n,{component:"p",secondary:!0,variation:"sm",monospaced:!0,noWrap:!0,ref:h,disabled:f,sx:{padding:`0 ${c.spacing(c.custom.padding.xs)}`},children:p}):p,x&&e.jsx(s.default,{disabled:f,size:16,name:x}),j&&e.jsx(i,{sizing:"xs",onClick:j,shape:"round",disabled:f,variation:"default",sx:{"&.MuiIconButton-root.Mui-disabled":{"&:before":{backgroundColor:"transparent"}}},icon:e.jsx(s.default,{name:"cancel",sx:{color:g?c.custom.palette.blue[1e3]:c.custom.palette.icon.secondary}})})]})]});return B?e.jsx(a,{message:u,...b?.tooltip,children:C}):C};

package/dist/systems/WebCore/Pill/StyledPill.js

@@ -1 +1 @@
-"use strict";var e=require("@mui/material"),t=require("../ButtonBase/Button.variant-helpers.js");const o=e.styled(e.Box,{shouldForwardProp:e=>!["active","disabled","sizing","onDelete","iconRight","iconLeft","freezeInteractions"].includes(e)})(({theme:o,active:a,disabled:s,sizing:r,onDelete:l,freezeInteractions:i})=>({display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"fill-available",height:t.buttonHeightMap[r||"md"],paddingLeft:o.spacing(o.custom.padding.sm),paddingRight:l?o.spacing(o.custom.padding.xs):o.spacing(o.custom.padding.sm),borderRadius:o.spacing(o.custom.radius.md),transition:"all 180ms ease",border:`1px solid ${a?o.custom.palette.blue[500]:o.custom.palette.stroke.default}`,backgroundColor:a?o.custom.palette.blue[0]:o.custom.palette.neutral[0],"&:hover":{backgroundColor:i?"none":a?o.custom.palette.blue[100]:o.custom.palette.interaction.hover,borderColor:a?o.custom.palette.blue[500]:o.custom.palette.stroke.default},"&:active":{backgroundColor:i?"none":a?o.custom.palette.blue[200]:o.custom.palette.interaction.press,borderColor:a?o.custom.palette.blue[500]:o.custom.palette.stroke.default},...s&&{backgroundColor:o.custom.palette.interaction.disabled,borderColor:o.custom.palette.stroke.disabled,pointerEvents:"none","&:hover":{backgroundColor:o.custom.palette.interaction.disabled,borderColor:o.custom.palette.stroke.disabled},"&:active":{backgroundColor:o.custom.palette.interaction.disabled,borderColor:o.custom.palette.stroke.disabled}},[`& .${e.typographyClasses.root}`]:{lineHeight:"110%",color:s?o.custom.palette.text.disabled:o.custom.palette.text.primary,padding:`0 ${o.spacing(o.custom.padding.xs)}`},"& > svg":{color:s?o.custom.palette.icon.disabled:o.custom.palette.icon.primary}}));module.exports=o;
+"use strict";var e=require("@mui/material"),t=require("../ButtonBase/Button.variant-helpers.js"),i=require("../styleblocks/focusedStyle.js"),l=require("../styleblocks/selectedStyle.js"),a=require("./pill.helpers.js");const s=e.styled(e.Box,{shouldForwardProp:e=>!["active","disabled","sizing","onDelete","iconRight","iconLeft","freezeInteractions"].includes(e)})(({theme:e,active:s,disabled:d,sizing:r,onDelete:n,freezeInteractions:o,loading:c})=>({display:"flex",justifyContent:"center",alignItems:"center",maxWidth:"fill-available",height:t.buttonHeightMap[r||"md"],paddingLeft:e.spacing(e.custom.padding.sm),paddingRight:n?e.spacing(e.custom.padding.xs):e.spacing(e.custom.padding.sm),borderRadius:e.spacing(e.custom.radius.md),transition:"all 180ms ease",cursor:o?"auto":"pointer",...a.pillDefaultState(e),...s&&l.selectedState(e),...(d||c)&&a.pillDisabledState(e),"&:hover":{...a.pillDefaultStateHover(e),...(d||c)&&a.pillDisabledState(e),...s&&l.selectedStateHover(e),...o&&a.pillDefaultState(e),...o&&s&&l.selectedState(e)},"&:active":{...a.pillDefaultStateActive(e),...(d||c)&&a.pillDisabledState(e),...s&&l.selectedStateActive(e),...o&&a.pillDefaultState(e),...o&&s&&l.selectedState(e)},"&:focus-visible":{...i.focusedInputState(e)}}));module.exports=s;

package/dist/systems/WebCore/Pill/pill.helpers.js

@@ -0,0 +1 @@
+"use strict";var t=require("../styleblocks/interactionStates.js");exports.pillDefaultState=t=>({backgroundColor:t.custom.palette.neutral[0],border:`1px solid ${t.custom.palette.stroke.default}`}),exports.pillDefaultStateActive=e=>({backgroundColor:t.getInteractionStateStyles(e,"active",e.custom.palette.neutral[0]),border:`1px solid ${e.custom.palette.stroke.default}`}),exports.pillDefaultStateHover=e=>({backgroundColor:t.getInteractionStateStyles(e,"hover",e.custom.palette.neutral[0]),border:`1px solid ${e.custom.palette.stroke.default}`}),exports.pillDisabledState=t=>({backgroundColor:t.custom.palette.interaction.disabled,borderColor:t.custom.palette.stroke.disabled,pointerEvents:"none"});

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

@@ -5,6 +5,7 @@ import { TooltipProps } from '../Tooltip/Tooltip.js';
 interface PillProps {
     id?: string;
     label: string;
+    secondaryLabel?: string;
     iconLeft?: IconName;
     freezeInteractions?: boolean;
     iconRight?: IconName;
@@ -12,6 +13,7 @@ interface PillProps {
     onDelete?: ((event: any) => void) | undefined;
     active?: boolean;
     disabled?: boolean;
+    loading?: boolean;
     sx?: SxProps<Theme>;
     slots?: {
         tooltip: Partial<Omit<TooltipProps, 'message'>>;

package/dist/systems/WebCore/Surface/StyledSurface.js

@@ -1 +1 @@
-"use strict";var r=require("@mui/material"),a=require("./Surface.variant-helpers.js");const e=r.styled(r.Paper,{shouldForwardProp:r=>!["variation","borderradius","active"].includes(r)})(({theme:r,variation:e="default",borderradius:i,active:o})=>({boxShadow:"unset",borderRadius:a.getBorderRadius(r,i),background:a.backgroundBasedOnVariation(e,r),..."overlay"===e&&{...a.overlay(r)},..."raised"===e&&{...a.raised(r)},..."float"===e&&{...a.float(r)},...o&&{...a.activeState(r)}}));module.exports=e;
+"use strict";var e=require("@mui/material"),r=require("./Surface.variant-helpers.js");const a=e.styled(e.Paper,{shouldForwardProp:e=>!["variation","borderradius","active","interactive"].includes(e)})(({theme:e,variation:a="default",borderradius:t,active:i,interactive:d})=>({boxShadow:"unset",borderRadius:r.getBorderRadius(e,t),background:r.backgroundBasedOnVariation(a,e),..."overlay"===a&&{...r.overlay(e)},..."raised"===a&&{...r.raised(e)},..."float"===a&&{...r.float(e)},...i&&{...r.surfaceSelectedState(e)},...d&&{...r.createInteractiveStates(e,i)}}));module.exports=a;

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

@@ -5,6 +5,7 @@ import { SurfaceVariation, BorderRadius } from './Surface.variant-helpers.js';
 interface SurfaceProps extends PaperProps {
     variation?: SurfaceVariation;
     borderradius?: BorderRadius;
+    interactive?: boolean;
     active?: boolean;
 }
 declare const Surface: react.ForwardRefExoticComponent<Omit<SurfaceProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

package/dist/systems/WebCore/Surface/Surface.variant-helpers.js

@@ -1 +1 @@
-"use strict";var e=require("@mui/material");exports.activeState=t=>({background:t.custom.palette.blue[0],[`&.${e.paperClasses.root}`]:{border:`1px solid ${t.custom.palette.blue[500]}`}}),exports.backgroundBasedOnVariation=(e,t)=>{switch(e){case"sunken":return t.custom.palette.surface.sunken;case"raised":return t.custom.palette.surface.raised;case"overlay":return t.custom.palette.surface.overlay;case"float":return t.custom.palette.surface.float;default:return t.custom.palette.surface.default}},exports.float=e=>({boxShadow:e.custom.elevation.float}),exports.getBorderRadius=(e,t)=>{switch(t){case"xs":return e.spacing(e.custom.radius.xs);case"sm":return e.spacing(e.custom.radius.sm);case"md":return e.spacing(e.custom.radius.md);case"lg":return e.spacing(e.custom.radius.lg);default:return e.spacing(e.custom.radius.xl)}},exports.overlay=e=>({boxShadow:e.custom.elevation.overlay}),exports.raised=e=>({boxShadow:e.custom.elevation.raised});
+"use strict";var e=require("@mui/material"),t=require("../styleblocks/interactionStates.js"),a=require("../styleblocks/selectedStyle.js");const s=e=>({boxShadow:e.custom.elevation.float});exports.backgroundBasedOnVariation=(e,t)=>{switch(e){case"sunken":return t.custom.palette.surface.sunken;case"raised":case"float":return t.custom.palette.surface.raised;case"overlay":return t.custom.palette.surface.overlay;default:return t.custom.palette.surface.default}},exports.createInteractiveStates=(e,a,r)=>({cursor:"pointer",transition:"all 150ms ease","&:hover":{boxShadow:s(e).boxShadow,background:t.getInteractionStateStyles(e,"hover",a?e.custom.palette.blue[0]:e.custom.palette.surface.raised)},"&:active":{boxShadow:s(e).boxShadow,background:t.getInteractionStateStyles(e,"active",a?e.custom.palette.blue[0]:e.custom.palette.surface.raised)}}),exports.float=s,exports.getBorderRadius=(e,t)=>{switch(t){case"xs":return e.spacing(e.custom.radius.xs);case"sm":return e.spacing(e.custom.radius.sm);case"md":return e.spacing(e.custom.radius.md);case"lg":return e.spacing(e.custom.radius.lg);default:return e.spacing(e.custom.radius.xl)}},exports.overlay=e=>({boxShadow:e.custom.elevation.overlay}),exports.raised=e=>({boxShadow:e.custom.elevation.raised}),exports.surfaceSelectedState=t=>({backgroundColor:a.selectedState(t).backgroundColor,[`&.${e.paperClasses.root}`]:{outline:`1px solid ${t.custom.palette.blue[500]}`}});

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

@@ -8,6 +8,7 @@ interface TypographyProps extends Omit<TypographyProps$1, 'ref'> {
     variation?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
     weight?: 'default' | 'bold';
     monospaced?: boolean;
+    disabled?: boolean;
     sx?: SxProps<Theme>;
     secondary?: boolean;
     textColor?: string;

package/dist/systems/WebCore/Typography/Typography.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx"),o=require("react"),i=require("../../BrandCore/types.js");const a=e=>"bold"===e?i.FontWeight.BOLD:i.FontWeight.DEFAULT,n=o.forwardRef(({component:o,weight:i="default",variation:n,clamp:s=0,type:u="default",monospaced:l,secondary:c,textColor:m,...d},p)=>{const x=t.useTheme();return e.jsx(t.Typography,{ref:p,variant:n,fontWeight:a(i),component:o,...d,sx:r.mergeSx(d.sx,!!s&&{display:"-webkit-box",overflow:"hidden",WebkitBoxOrient:"vertical",WebkitLineClamp:s},"button"===u&&{lineHeight:1.2},l&&{fontVariantNumeric:"tabular-nums"},c&&{color:x.custom.palette.text.secondary},Boolean(m)&&{color:m})})});module.exports=n;
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx"),o=require("react"),a=require("../../BrandCore/types.js");const i=e=>"bold"===e?a.FontWeight.BOLD:a.FontWeight.DEFAULT,n=o.forwardRef(({component:o,weight:a="default",variation:n,clamp:s=0,type:l="default",disabled:u,monospaced:c,secondary:d,textColor:m,...p},x)=>{const b=t.useTheme();return e.jsx(t.Typography,{ref:x,variant:n,fontWeight:i(a),component:o,...p,sx:r.mergeSx(p.sx,!!s&&{display:"-webkit-box",overflow:"hidden",WebkitBoxOrient:"vertical",WebkitLineClamp:s},"button"===l&&{lineHeight:1.2},c&&{fontVariantNumeric:"tabular-nums"},d&&{color:b.custom.palette.text.secondary},u&&{color:b.custom.palette.text.disabled},Boolean(m)&&{color:m})})});module.exports=n;

package/dist/systems/WebCore/styleblocks/focusedStyle.js

@@ -0,0 +1 @@
+"use strict";exports.focusedInputState=o=>({boxShadow:o.custom.boxShadow.input.focus,outline:"none"});

package/dist/systems/WebCore/styleblocks/interactionStates.js

@@ -0,0 +1 @@
+"use strict";exports.getInteractionStateStyles=(t,r,e,i)=>{const c=t.custom.palette.text.primary,s="ltr"===t.direction?"4%":"96%",n="ltr"===t.direction?"8%":"92%";switch(r){case"initial":return e;case"hover":return`color-mix(in srgb, ${e}, ${c} ${i??s})`;case"active":return`color-mix(in srgb, ${e}, ${c} ${i??n})`}};

package/dist/systems/WebCore/styleblocks/selectedStyle.js

@@ -0,0 +1 @@
+"use strict";var e=require("./interactionStates.js");exports.selectedState=e=>({backgroundColor:e.custom.palette.blue[0],border:`1px solid ${e.custom.palette.blue[500]}`}),exports.selectedStateActive=t=>({backgroundColor:e.getInteractionStateStyles(t,"active",t.custom.palette.blue[0]),border:`1px solid ${t.custom.palette.blue[500]}`}),exports.selectedStateHover=t=>({backgroundColor:e.getInteractionStateStyles(t,"hover",t.custom.palette.blue[0]),border:`1px solid ${t.custom.palette.blue[500]}`});

package/package.json

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