@muraldevkit/ui-toolkit 4.42.0-dev-k3q1.1 → 4.43.0

package/dist/styles/MrlCallout/module.scss

@@ -31,7 +31,10 @@
 		display: flex;
 		justify-content: flex-start;
 		margin-top: var(--mrl-spacing-05);
-		:global(.mrlButton:last-child) {
+		:global(.mrlButton) {
+			margin-left: var(--mrl-spacing-03);
+		}
+		:global(.mrlButton:first-child) {
 			margin-left: auto;
 		}
 	}

package/dist/styles.css

@@ -87,7 +87,7 @@
 @keyframes shimmer--eczHY{0%{background-position:right}100%{background-position:left}}.MrlSkeleton--L9ZOR{background-color:var(--mrl-black-opacity-00);border-radius:var(--mrl-border-radius-functional);overflow:hidden;position:relative}.MrlSkeleton--L9ZOR::after{animation-direction:normal;animation-duration:2.5s;animation-iteration-count:infinite;animation-name:shimmer--eczHY;animation-timing-function:ease-in-out;background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);background-repeat:no-repeat;background-size:400% 200%;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:200%}@media(prefers-reduced-motion){.MrlSkeleton--L9ZOR::after{animation-name:none;background:var(--mrl-black-opacity-00)}}.MrlSkeleton-circle--V35an{border-radius:50%}
 @keyframes shimmer--n2jh9{0%{background-position:right}100%{background-position:left}}.MrlSkeletonText--aZt7x{background-color:var(--mrl-black-opacity-00);border-radius:var(--mrl-border-radius-functional);overflow:hidden;position:relative}.MrlSkeletonText--aZt7x::after{animation-direction:normal;animation-duration:2.5s;animation-iteration-count:infinite;animation-name:shimmer--n2jh9;animation-timing-function:ease-in-out;background:linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, var(--mrl-white-opacity-06) 56%, rgba(255, 255, 255, 0) 64%);background-repeat:no-repeat;background-size:400% 200%;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:200%}@media(prefers-reduced-motion){.MrlSkeletonText--aZt7x::after{animation-name:none;background:var(--mrl-black-opacity-00)}}.MrlSkeletonText-large--hMKwp{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-large)*var(--mrl-type-line-height-text-large) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-large)*var(--mrl-type-line-height-text-large) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-small--c6iHj{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-small)*var(--mrl-type-line-height-text-small) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-small)*var(--mrl-type-line-height-text-small) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-xsmall--_I_hY{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-xsmall)*var(--mrl-type-line-height-text-xsmall) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-xsmall)*var(--mrl-type-line-height-text-xsmall) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-xxsmall--iasp3{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text-xxsmall)*var(--mrl-type-line-height-text-xxsmall) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text-xxsmall)*var(--mrl-type-line-height-text-xxsmall) - var(--mrl-spacing-03))/2)}.MrlSkeletonText-medium--VD22L{height:var(--mrl-spacing-03);margin-bottom:calc(var(--mrl-type-size-text)*var(--mrl-type-line-height-text) - var(--mrl-spacing-03));margin-top:calc((var(--mrl-type-size-text)*var(--mrl-type-line-height-text) - var(--mrl-spacing-03))/2)}
 .mrl-empty--bBaPG{text-align:center}.mrl-empty-default--UfKTY{max-width:200px}.mrl-empty-large--jiZ0b{max-width:360px}.mrl-empty-text--EE6Hx{margin:var(--mrl-spacing-05) 0}.mrl-empty-text-large--tKa8r{margin:var(--mrl-spacing-06) 0}.mrl-empty-color-text-secondary--cR3LB{color:var(--mrl-color-text-secondary)}
-.mrl-u-focus-wrapper--U8AgI{position:relative}.MrlCallout--content--o1NZT{max-width:17.5rem}.MrlCallout--title--rEMq8{font-size:var(--mrl-font-size-03);margin-bottom:var(--mrl-spacing-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--eyebrow--zPSfr{font-size:var(--mrl-font-size-01);font-weight:var(--mrl-font-weight-04);margin-bottom:var(--mrl-spacing-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--description--s524D p{font-size:var(--mrl-font-size-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--image--F809e{margin-top:var(--mrl-spacing-05)}.MrlCallout--image--F809e img{height:auto;width:100%}.MrlCallout--footer--sjbLA{display:flex;justify-content:flex-start;margin-top:var(--mrl-spacing-05)}.MrlCallout--footer--sjbLA .mrlButton:last-child{margin-left:auto}.MrlCallout--O6y8L .mrlButton:focus-visible{position:relative}.MrlCallout--O6y8L .mrlButton:focus-visible:focus-visible{outline:none}.MrlCallout--O6y8L .mrlButton:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation-inverse--otiHy;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation--Oj9lG{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--otiHy{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}@media screen and (min-resolution: 384dpi)and (max-resolution: 399dpi),(min-resolution: 4dppx)and (max-resolution: 3.99dppx){.MrlCallout--O6y8L>div:first-child{min-height:75px}}
+.mrl-u-focus-wrapper--U8AgI{position:relative}.MrlCallout--content--o1NZT{max-width:17.5rem}.MrlCallout--title--rEMq8{font-size:var(--mrl-font-size-03);margin-bottom:var(--mrl-spacing-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--eyebrow--zPSfr{font-size:var(--mrl-font-size-01);font-weight:var(--mrl-font-weight-04);margin-bottom:var(--mrl-spacing-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--description--s524D p{font-size:var(--mrl-font-size-02);padding-right:var(--mrl-spacing-06)}.MrlCallout--image--F809e{margin-top:var(--mrl-spacing-05)}.MrlCallout--image--F809e img{height:auto;width:100%}.MrlCallout--footer--sjbLA{display:flex;justify-content:flex-start;margin-top:var(--mrl-spacing-05)}.MrlCallout--footer--sjbLA .mrlButton{margin-left:var(--mrl-spacing-03)}.MrlCallout--footer--sjbLA .mrlButton:first-child{margin-left:auto}.MrlCallout--O6y8L .mrlButton:focus-visible{position:relative}.MrlCallout--O6y8L .mrlButton:focus-visible:focus-visible{outline:none}.MrlCallout--O6y8L .mrlButton:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation-inverse--otiHy;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation--Oj9lG{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--otiHy{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}@media screen and (min-resolution: 384dpi)and (max-resolution: 399dpi),(min-resolution: 4dppx)and (max-resolution: 3.99dppx){.MrlCallout--O6y8L>div:first-child{min-height:75px}}
 .MrlPanel--ctJ4U{background-color:var(--mrl-color-background);border-radius:var(--mrl-border-radius-container);box-shadow:var(--mrl-shadows-raised);display:flex;flex-direction:column;height:auto;max-height:100%;overflow:hidden;padding:var(--mrl-spacing-06) 0 0 0;pointer-events:auto;position:relative;width:16.75rem;z-index:400}.MrlPanel--ctJ4U .MrlPanel--header-content--VTdag{margin-bottom:calc(var(--mrl-spacing-06) - var(--mrl-spacing-01));padding:0 var(--mrl-spacing-09) 0 var(--mrl-spacing-06)}.MrlPanel--ctJ4U .MrlPanel--header-content--VTdag.MrlPanel--header-content-description--CUyJq{margin-bottom:calc(var(--mrl-spacing-04) - var(--mrl-spacing-01))}.MrlPanel--ctJ4U .MrlPanel--header-content--VTdag .MrlPanel--title--tyjoU{height:auto}.MrlPanel--ctJ4U .MrlPanel--header-content--VTdag .MrlPanel--top-actions--vzrrd{align-items:center;display:flex;justify-content:center;position:absolute;right:calc(var(--mrl-spacing-10) - var(--mrl-spacing-02));top:var(--mrl-spacing-04)}.MrlPanel--ctJ4U .MrlPanel--header-content--VTdag .MrlPanel--top-actions-divider--xLz2L{align-self:auto}.MrlPanel--ctJ4U .MrlPanel--close--sRBzI{position:absolute;right:var(--mrl-spacing-04);top:var(--mrl-spacing-04)}.MrlPanel--scrollable--kRudV{outline:none;overflow:clip scroll;overflow-y:overlay;padding-left:var(--mrl-spacing-06);padding-right:var(--mrl-spacing-06);padding-top:var(--mrl-spacing-01)}.MrlPanel--scrollable--kRudV:focus-visible{outline:var(--mrl-spacing-01) var(--mrl-color-focus) solid}.MrlPanel--scrollable--kRudV.MrlPanel--scrollable-has-sticky-header--CIres{padding-top:0}.MrlPanel--scrollable--kRudV .MrlPanel--description--dCF7g{margin-bottom:var(--mrl-spacing-06);padding-right:var(--mrl-space-inset-container-large)}
 .MrlPanelFooter--iX4RS{background-color:var(--mrl-color-background);bottom:var(--mrl-spacing-03);color:rgba(var(--mrl-gray-60), 1);left:0;margin:0 var(--mrl-spacing-06);position:absolute;width:calc(100% - var(--mrl-spacing-06)*2)}.MrlPanelFooter--iX4RS .MrlPanelFooter--divider--DMvrl{margin:0 0 var(--mrl-spacing-02) 0}
 .MrlPanelStickyHeader--I1FiZ{background-color:var(--mrl-color-background);position:sticky;top:0}.MrlPanelStickyHeader--I1FiZ::after{background:var(--mrl-color-background);content:"";display:block;inset:0 calc(-1*var(--mrl-spacing-03));pointer-events:all;position:absolute;z-index:-1}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "4.42.0-dev-k3q1.1",
+	"version": "4.43.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",

package/dist/components/menu/demo/MenuGroupWithTrigger.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { MenuWithTriggerProps } from './MenuWithTrigger';
-/**
- * Demo of a menu with a trigger for stories and testing
- *
- * @param {MenuWithTriggerProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export declare const MenuGroupWithTrigger: ({ alignment, position, spacing, actionState, customPosition, onClose }: MenuWithTriggerProps) => JSX.Element;

package/dist/components/menu/demo/MenuWithActionState.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import { CustomMenuPosition } from '..';
-import { MenuPosition, MenuAlignment } from '../constants';
-interface MenuWithTriggerProps {
-    position?: MenuPosition;
-    spacing?: 'default' | 'compact';
-    alignment?: MenuAlignment;
-    onClose?: () => void;
-    customPosition?: CustomMenuPosition;
-    triggerAlignment?: 'left' | 'right' | 'center';
-}
-/**
- * Demo of a menu that is manually opened by setting the action state.
- *
- * @param {MenuWithTriggerProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export declare const MenuWithActionState: ({ alignment, position, spacing, customPosition, onClose, triggerAlignment }: MenuWithTriggerProps) => JSX.Element;
-export {};

package/dist/components/menu/demo/MenuWithIconButtonTrigger.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import { CustomMenuPosition } from '..';
-import { MenuPosition, ActionState, MenuAlignment } from '../constants';
-export interface MenuWithIconTriggerProps {
-    position?: MenuPosition;
-    spacing?: 'default' | 'compact';
-    alignment?: MenuAlignment;
-    actionState?: ActionState;
-    onClose?: () => void;
-    customPosition?: CustomMenuPosition;
-    triggerAlignment?: 'left' | 'right' | 'center';
-}
-/**
- * Demo of a menu with a trigger for stories and testing
- *
- * @param {MenuWithIconTriggerProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export declare const MenuWithIconTrigger: ({ alignment, position, spacing, actionState, customPosition, onClose, triggerAlignment }: MenuWithIconTriggerProps) => JSX.Element;

package/dist/components/menu/demo/MenuWithLink.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { MenuPosition, MenuAlignment, ActionState } from '../constants';
-interface MenuWithLinkProps {
-    menuAlign?: MenuPosition;
-    spacing?: 'default' | 'compact';
-    alignment?: MenuAlignment;
-    menuState?: ActionState;
-    onClose?: () => void;
-    triggerAlignment?: 'left' | 'right' | 'center';
-}
-/**
- * Demo of a menu with a trigger for stories and testing
- *
- * @param {MenuWithLinkProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export declare const MenuWithLink: ({ menuAlign, alignment, menuState, spacing, onClose, triggerAlignment }: MenuWithLinkProps) => JSX.Element;
-export {};

package/dist/components/menu/demo/MenuWithRTI.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import { CustomMenuPosition } from '..';
-import { MenuPosition, ActionState, MenuAlignment } from '../constants';
-export interface MenuWithRTIProps {
-    position?: MenuPosition;
-    spacing?: 'default' | 'compact';
-    alignment?: MenuAlignment;
-    actionState?: ActionState;
-    onClose?: () => void;
-    customPosition?: CustomMenuPosition;
-    triggerAlignment?: 'left' | 'right' | 'center';
-}
-/**
- * Demo of a menu within an instance of a roving tabindex
- *
- * @param {MenuWithRTIProps} props - The props for the menu with trigger
- * @returns {Element} The menu with trigger demo
- */
-export declare const MenuWithRTI: ({ alignment, position, spacing, actionState, customPosition, onClose }: MenuWithRTIProps) => JSX.Element;