@workday/canvas-kit-react 11.0.0-alpha.769-next.0 → 11.0.0-alpha.770-next.0

package/button/lib/TertiaryButton.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 
-import {buttonVars, getIconPosition} from './BaseButton';
+import {buttonStencil} from './BaseButton';
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {system, brand, base} from '@workday/canvas-tokens-web';
-import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
+import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {system, brand} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
-import {systemIconStencil} from '../../icon';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -22,133 +21,215 @@ export interface TertiaryButtonProps extends ButtonProps {
   isThemeable?: boolean;
 }
 
-const tertiaryStyles = createStyles({
-  paddingInline: system.space.x2,
-  minWidth: 'auto',
-  textDecoration: 'underline',
-  border: 0,
-  [buttonVars.default.background]: 'transparent',
-  [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.borderRadius]: system.shape.x1,
-  [buttonVars.default.label]: brand.primary.base,
-  [systemIconStencil.vars.color]: base.blackPepper400,
-  '&:focus-visible, &.focus': {
-    [buttonVars.focus.background]: 'transparent',
-    [buttonVars.focus.border]: 'transparent',
-    [buttonVars.focus.label]: brand.primary.base,
-    [buttonVars.focus.boxShadowInner]: brand.common.focusOutline,
-    [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
-    [systemIconStencil.vars.color]: base.blackPepper400,
-    ...focusRing({
-      width: 2,
-      separation: 0,
-      innerColor: base.frenchVanilla100,
-      outerColor: brand.common.focusOutline,
-    }),
-  },
-  '&:hover, &.hover': {
-    [buttonVars.hover.background]: base.soap300,
-    [buttonVars.hover.border]: 'transparent',
-    [buttonVars.hover.label]: brand.primary.dark,
-    [systemIconStencil.vars.color]: base.blackPepper400,
-  },
-  '&:active, &.active': {
-    [buttonVars.active.background]: base.soap400,
-    [buttonVars.active.border]: 'transparent',
-    [buttonVars.active.label]: brand.primary.darkest,
-    [systemIconStencil.vars.color]: base.blackPepper500,
-  },
-  '&:disabled, &.disabled': {
-    [buttonVars.disabled.background]: 'transparent',
-    [buttonVars.disabled.border]: 'transparent',
-    [buttonVars.disabled.label]: brand.primary.base,
-    [buttonVars.disabled.opacity]: '0.4',
-  },
-});
-
-export const tertiaryButtonModifiers = createModifiers({
-  isThemeable: {
-    true: createStyles({
+const tertiaryButtonStencil = createStencil({
+  extends: buttonStencil,
+  // Base Styles
+  base: {
+    paddingInline: system.space.x2,
+    minWidth: 'auto',
+    textDecoration: 'underline',
+    border: system.space.zero,
+    [buttonStencil.vars.background]: 'transparent',
+    [buttonStencil.vars.borderRadius]: system.shape.x1,
+    [buttonStencil.vars.label]: brand.primary.base,
+    [systemIconStencil.vars.color]: brand.primary.base,
+    // Focus Styles
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.background]: 'transparent',
+      [buttonStencil.vars.label]: brand.primary.base,
+      [buttonStencil.vars.boxShadowInner]: brand.common.focusOutline,
+      [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
+      [systemIconStencil.vars.color]: brand.primary.base,
+      ...focusRing({
+        width: 2,
+        separation: 0,
+        innerColor: system.color.fg.inverse,
+        outerColor: brand.common.focusOutline,
+      }),
+    },
+    // Hover Styles
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: system.color.bg.alt.default,
+      [buttonStencil.vars.label]: brand.primary.dark,
+      [systemIconStencil.vars.color]: brand.primary.dark,
+    },
+    // Active Styles
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+      [buttonStencil.vars.label]: brand.primary.darkest,
+      [systemIconStencil.vars.color]: brand.primary.darkest,
+    },
+    // Disabled Styles
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: 'transparent',
+      [buttonStencil.vars.label]: brand.primary.base,
+      [buttonStencil.vars.opacity]: system.opacity.disabled,
       [systemIconStencil.vars.color]: brand.primary.base,
-      '&:focus-visible, &.focus': {
+    },
+  },
+  modifiers: {
+    // IconPosition Styles
+    iconPosition: {
+      only: {
+        padding: 0,
+        borderRadius: system.shape.round,
+        [systemIconStencil.vars.color]: system.color.fg.strong,
+        '&:focus-visible, &.focus': {
+          [systemIconStencil.vars.color]: system.color.fg.strong,
+        },
+        '&:hover, &.hover': {
+          [systemIconStencil.vars.color]: system.color.fg.strong,
+        },
+        '&:active, &.active': {
+          [systemIconStencil.vars.color]: system.color.fg.stronger,
+        },
+        '&:disabled, &.disabled': {
+          [systemIconStencil.vars.color]: system.color.fg.strong,
+        },
+      },
+      start: {},
+      end: {},
+    },
+    isThemeable: {
+      true: {
         [systemIconStencil.vars.color]: brand.primary.base,
+        '&:focus-visible, &.focus': {
+          [systemIconStencil.vars.color]: brand.primary.base,
+        },
+        '&:hover, &.hover': {
+          [systemIconStencil.vars.color]: brand.primary.dark,
+        },
+        '&:active, &.active': {
+          [systemIconStencil.vars.color]: brand.primary.darkest,
+        },
+        '&:disabled, &.disabled': {
+          [systemIconStencil.vars.color]: brand.primary.base,
+        },
       },
-      '&:hover, &.hover': {
-        [systemIconStencil.vars.color]: brand.primary.dark,
+    },
+    variant: {
+      // Inverse Styles
+      inverse: {
+        [buttonStencil.vars.background]: 'transparent',
+        [buttonStencil.vars.label]: system.color.fg.inverse,
+        [systemIconStencil.vars.color]: system.color.fg.inverse,
+        // Focus Styles
+        '&:focus-visible, &.focus': {
+          [buttonStencil.vars.background]: system.color.bg.default,
+          [buttonStencil.vars.label]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: system.color.fg.strong,
+          ...focusRing({
+            inset: 'inner',
+            width: 2,
+            separation: 2,
+            innerColor: system.color.fg.strong,
+            outerColor: system.color.fg.inverse,
+          }),
+        },
+        // Hover Styles
+        '&:hover, &.hover': {
+          [buttonStencil.vars.background]: system.color.bg.default,
+          [buttonStencil.vars.label]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: system.color.fg.strong,
+        },
+        // Active Styles
+        '&:active, &.active': {
+          [buttonStencil.vars.background]: system.color.bg.alt.soft,
+          [buttonStencil.vars.label]: system.color.fg.strong,
+          [systemIconStencil.vars.color]: system.color.fg.strong,
+        },
+        // Disabled Styles
+        '&:disabled, &.disabled': {
+          [buttonStencil.vars.background]: 'transparent',
+          [buttonStencil.vars.label]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: system.color.fg.inverse,
+        },
       },
-      '&:active, &.active': {
-        [systemIconStencil.vars.color]: brand.primary.darkest,
+    },
+  },
+  // Compound Modifier Styles
+  compound: [
+    {
+      modifiers: {size: 'large', iconPosition: 'only'},
+      styles: {
+        minWidth: calc.multiply(system.space.x4, 3),
       },
-      '&:disabled, &.disabled': {
-        [systemIconStencil.vars.color]: brand.primary.base,
+    },
+    {
+      modifiers: {size: 'large', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x2,
+        paddingInlineEnd: system.space.x3,
       },
-    }),
-  },
-  variant: {
-    inverse: createStyles({
-      [buttonVars.default.background]: 'transparent',
-      [buttonVars.default.border]: 'transparent',
-      [buttonVars.default.label]: base.frenchVanilla100,
-      [systemIconStencil.vars.color]: base.frenchVanilla100,
-      '&:focus-visible, &.focus': {
-        [buttonVars.focus.background]: base.frenchVanilla100,
-        [buttonVars.focus.border]: 'transparent',
-        [buttonVars.focus.label]: base.blackPepper400,
-        [systemIconStencil.vars.color]: base.blackPepper400,
-        ...focusRing({
-          inset: 'inner',
-          width: 2,
-          separation: 2,
-          innerColor: base.blackPepper400,
-          outerColor: base.frenchVanilla100,
-        }),
+    },
+    {
+      modifiers: {size: 'large', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x3,
+        paddingInlineEnd: system.space.x2,
+      },
+    },
+    {
+      modifiers: {size: 'medium', iconPosition: 'only'},
+      styles: {
+        minWidth: system.space.x10,
       },
-      '&:hover, &.hover': {
-        [buttonVars.hover.background]: base.frenchVanilla100,
-        [buttonVars.hover.border]: 'transparent',
-        [buttonVars.hover.label]: base.blackPepper400,
-        [systemIconStencil.vars.color]: base.blackPepper400,
+    },
+    {
+      modifiers: {size: 'medium', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x2,
+        paddingInlineEnd: system.space.x3,
       },
-      '&:active, &.active': {
-        [buttonVars.active.background]: base.soap200,
-        [buttonVars.active.border]: 'transparent',
-        [buttonVars.active.label]: base.blackPepper400,
-        [systemIconStencil.vars.color]: base.blackPepper400,
+    },
+    {
+      modifiers: {size: 'medium', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x3,
+        paddingInlineEnd: system.space.x2,
       },
-      '&:disabled, &.disabled': {
-        // Disabled Styles
-        [buttonVars.disabled.background]: 'transparent',
-        [buttonVars.disabled.border]: base.frenchVanilla100,
-        [buttonVars.disabled.label]: base.frenchVanilla100,
-        [systemIconStencil.vars.color]: base.frenchVanilla100,
+    },
+    {
+      modifiers: {size: 'small', iconPosition: 'only'},
+      styles: {
+        minWidth: system.space.x8,
       },
-    }),
-  },
-  iconPosition: {
-    largeOnly: createStyles({
-      borderRadius: borderRadius.circle,
-      padding: '0',
-      minWidth: `calc(${system.space.x4} * 3)`,
-    }),
-    largeStart: createStyles({
-      paddingInlineStart: space.xxs,
-      paddingInlineEnd: space.xs,
-    }),
-    largeEnd: createStyles({paddingInlineStart: space.xs, paddingInlineEnd: space.xxs}),
-    mediumOnly: createStyles({padding: '0', minWidth: space.xl, borderRadius: borderRadius.circle}),
-    mediumStart: createStyles({paddingInlineStart: space.xxs, paddingInlineEnd: space.xs}),
-    mediumEnd: createStyles({paddingInlineStart: space.xs, paddingInlineEnd: space.xxs}),
-    smallOnly: createStyles({padding: '0', minWidth: space.l, borderRadius: borderRadius.circle}),
-    smallStart: createStyles({paddingInlineStart: space.xxs, paddingInlineEnd: space.xs}),
-    smallEnd: createStyles({paddingInlineStart: space.xs, paddingInlineEnd: space.xxs}),
-    extraSmallOnly: createStyles({
-      padding: '0',
-      minWidth: space.m,
-      borderRadius: borderRadius.circle,
-    }),
-    extraSmallStart: createStyles({paddingInlineStart: space.xxxs, paddingInlineEnd: space.xxs}),
-    extraSmallEnd: createStyles({paddingInlineStart: space.xxs, paddingInlineEnd: space.xxxs}),
-  },
+    },
+    {
+      modifiers: {size: 'small', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x2,
+        paddingInlineEnd: system.space.x3,
+      },
+    },
+    {
+      modifiers: {size: 'small', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x3,
+        paddingInlineEnd: system.space.x2,
+      },
+    },
+    {
+      modifiers: {size: 'extraSmall', iconPosition: 'only'},
+      styles: {
+        minWidth: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'extraSmall', iconPosition: 'start'},
+      styles: {
+        paddingInlineStart: system.space.x1,
+        paddingInlineEnd: system.space.x2,
+      },
+    },
+    {
+      modifiers: {size: 'extraSmall', iconPosition: 'end'},
+      styles: {
+        paddingInlineStart: system.space.x2,
+        paddingInlineEnd: system.space.x1,
+      },
+    },
+  ],
 });
 
 export const TertiaryButton = createComponent('button')({
@@ -157,8 +238,8 @@ export const TertiaryButton = createComponent('button')({
     {
       children,
       icon,
-      size = 'medium',
       isThemeable,
+      size = 'medium',
       variant,
       iconPosition,
       ...elemProps
@@ -179,16 +260,17 @@ export const TertiaryButton = createComponent('button')({
         as={Element}
         ref={ref}
         icon={icon}
-        iconPosition={iconPosition}
         size={size}
-        {...mergeStyles(elemProps, [
-          tertiaryStyles,
-          tertiaryButtonModifiers({
+        iconPosition={iconPosition}
+        {...mergeStyles(
+          elemProps,
+          tertiaryButtonStencil({
+            variant,
+            size,
             isThemeable: (isThemeable || baseIconPosition !== 'only') as any,
-            variant: variant,
-            iconPosition: getIconPosition(size, baseIconPosition),
-          }),
-        ])}
+            iconPosition: baseIconPosition,
+          })
+        )}
       >
         {children}
       </Button>

package/dist/commonjs/button/lib/BaseButton.d.ts

@@ -17,7 +17,7 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
     size?: ButtonSizes;
     /**
      * The icon of the Button.
-     * Note: not displayed at `small` size
+     * Note: Not displayed at `small` size
      */
     icon?: CanvasSystemIcon;
     /**
@@ -47,47 +47,88 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
 export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {
 }
 /**
- * Temporary css variables to be used across all Buttons.
+ * The purpose of this object is for the `colors` prop - to provide backwards compatibility with how we allowed color overrides in Emotion.
  */
-export declare const buttonVars: {
+export declare const buttonColorPropVars: {
     default: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
+    focus: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
     hover: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
     active: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
-    focus: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
     disabled: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
 };
 /**
- * Button modifiers that will overwrite the base styles of Buttons.
- * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
- * - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
- * within a button or if there is only an icon and no text.
+ * Base styles for Buttons.
  */
-export declare const buttonModifiers: import("@workday/canvas-kit-styling").ModifierReturn<{
+export declare const buttonStencil: import("@workday/canvas-kit-styling").Stencil<{
+    /**
+     * Button modifiers that will overwrite the base styles of Buttons.
+     * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
+     * - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
+     * within a button or if there is only an icon and no text.
+     */
     size: {
-        large: string;
-        medium: string;
-        small: string;
-        extraSmall: string;
+        large: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: string;
+            paddingInline: "--cnvs-sys-space-x8";
+            minWidth: string;
+            fontFamily: "--cnvs-base-font-family-50";
+            lineHeight: "--cnvs-base-line-height-150";
+            fontSize: "--cnvs-base-font-size-100";
+            letterSpacing: "--cnvs-base-letter-spacing-200";
+        };
+        medium: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            minWidth: string;
+            paddingInline: "--cnvs-sys-space-x6";
+            height: "--cnvs-sys-space-x10";
+            fontFamily: "--cnvs-base-font-family-50";
+            lineHeight: "--cnvs-base-line-height-100";
+            fontSize: "--cnvs-base-font-size-75";
+            letterSpacing: "--cnvs-base-letter-spacing-150";
+        };
+        small: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "--cnvs-sys-space-x8";
+            minWidth: "--cnvs-sys-space-x20";
+            paddingInline: "--cnvs-sys-space-x4";
+            gap: "--cnvs-sys-space-x1";
+            fontFamily: "--cnvs-base-font-family-50";
+            lineHeight: "--cnvs-base-line-height-100";
+            fontSize: "--cnvs-base-font-size-75";
+            letterSpacing: "--cnvs-base-letter-spacing-150";
+        };
+        extraSmall: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "--cnvs-sys-space-x6";
+            minWidth: string;
+            paddingInline: "--cnvs-sys-space-x3";
+            gap: "--cnvs-sys-space-x1";
+            fontFamily: "--cnvs-base-font-family-50";
+            lineHeight: "--cnvs-base-line-height-50";
+            fontSize: "--cnvs-base-font-size-50";
+            letterSpacing: "--cnvs-base-letter-spacing-100";
+        };
     };
     iconPosition: {
-        largeOnly: string;
-        largeStart: string;
-        largeEnd: string;
-        mediumOnly: string;
-        mediumStart: string;
-        mediumEnd: string;
-        smallOnly: string;
-        smallStart: string;
-        smallEnd: string;
-        extraSmallOnly: string;
-        extraSmallStart: string;
-        extraSmallEnd: string;
+        only: {
+            padding: "--cnvs-sys-space-zero";
+        };
+        start: {};
+        end: {};
     };
-}>;
-export declare function capitalize(string?: string): string;
-export declare function getIconPosition(size?: keyof typeof buttonModifiers.size, iconPosition?: IconPositions, children?: React.ReactNode): keyof typeof buttonModifiers.iconPosition;
+}, {
+    background: string;
+    border: string;
+    boxShadowInner: string;
+    boxShadowOuter: string;
+    label: string;
+    opacity: string;
+    borderRadius: string;
+}, never, never>;
 /**
- * The base button which all other buttons are built.
+ * The base button which which is the foundation of all Button variants (`PrimaryButton`,
+ * `SecondaryButton`, `TertiaryButton`, `DeleteButton`, `ToolbarIconButton` and `ToolbarDropdownButton`).
  */
 export declare const BaseButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ButtonContainerProps> & {
     Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("../lib/parts/ButtonLabelIcon").ButtonLabelIconProps>;

package/dist/commonjs/button/lib/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAG5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAqGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;EA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CAyCrB,CAAC"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IAyHtB;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2HL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;;;CAqCrB,CAAC"}