paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 45 Packages Projects Releases Wiki Activity

Merge pull request #28235 from backstage/canon-utility-classes-2

Browse Source 
Canon - Remove Vanilla Extract from all other components
This commit is contained in:
Charles de Dreuille
2024-12-19 16:45:49 +00:00
committed by GitHub
parent e14cf6e7f9 208f9a27fa
commit 23c19b978b
43 changed files with 2049 additions and 1395 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/.storybook/main.ts
+1 -9
View File
@@ -1,7 +1,4 @@
import type { StorybookConfig } from '@storybook/react-webpack5';
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
import { merge } from 'webpack-merge';
import { join, dirname } from 'path';
/**
@@ -28,13 +25,8 @@ const config: StorybookConfig = {
framework: {
name: getAbsolutePath('@storybook/react-webpack5'),
options: {
plugins: [new VanillaExtractPlugin()],
plugins: [],
},
},
webpackFinal: config => {
return merge(config, {
plugins: [new VanillaExtractPlugin()],
});
},
};
export default config;
packages/canon/src/components/Stack/sprinkles.css.ts → packages/canon/docs/spaceProps.ts
+23 -15
View File
@@ -14,20 +14,28 @@
* limitations under the License.
*/
import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
import { breakpoints } from '../../layout/properties';
import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
const stackProperties = defineProperties({
conditions: breakpoints,
defaultCondition: 'xs',
properties: {
alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
export const spacePropsList = [
'margin',
'marginBottom',
'marginLeft',
'marginRight',
'marginTop',
'marginX',
'marginY',
'padding',
'paddingBottom',
'paddingLeft',
'paddingRight',
'paddingTop',
'paddingX',
'paddingY',
].reduce(
(acc: { [key: string]: { type: string[]; responsive: boolean } }, prop) => {
acc[prop] = {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
};
return acc;
},
});
export const stackSprinkles = createSprinkles(
spacingProperties,
colorProperties,
stackProperties,
{},
);
packages/canon/docs/utils/argTypes.ts
-41
View File
@@ -1,41 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
colorProperties,
spacingProperties,
} from '../../src/layout/sprinkles.css';
export const argTypesSpacing = Object.keys(spacingProperties.styles).reduce<
Record<string, any>
>((acc, n) => {
acc[n] = {
control: 'inline-radio',
options: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
};
return acc;
}, {});
export const argTypesColor = Object.keys(colorProperties.styles).reduce<
Record<string, any>
>((acc, n) => {
acc[n as keyof typeof colorProperties.styles] = {
control: 'select',
options: Object.keys(
colorProperties.styles[n as keyof typeof colorProperties.styles].values,
),
};
return acc;
}, {});
packages/canon/package.json
+1 -5
View File
@@ -55,17 +55,13 @@
"@testing-library/jest-dom": "^6.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vanilla-extract/rollup-plugin": "^1.3.10",
"@vanilla-extract/sprinkles": "^1.6.3",
"@vanilla-extract/webpack-plugin": "^2.3.14",
"eslint-plugin-storybook": "^0.11.1",
"globals": "^15.11.0",
"mini-css-extract-plugin": "^2.9.2",
"react": "^18.0.2",
"react-dom": "^18.0.2",
"react-router-dom": "^6.3.0",
"storybook": "^8.4.7",
"webpack-merge": "^6.0.1"
"storybook": "^8.4.7"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
packages/canon/report.api.md
+52 -139
View File
@@ -32,16 +32,6 @@ export type AsProps =
| 'dl'
| 'dt';
// @public (undocumented)
export type Background =
| 'background'
| 'elevation1'
| 'elevation2'
| 'transparent'
| Partial<
Record<Theme, 'background' | 'elevation1' | 'elevation2' | 'transparent'>
>;
// @public (undocumented)
export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
@@ -131,22 +121,7 @@ export interface CheckboxProps {
}
// @public (undocumented)
export type Color =
| 'primary'
| 'secondary'
| 'error'
| Partial<Record<Theme, 'primary' | 'secondary' | 'error'>>;
// @public (undocumented)
export interface ColorProps {
// (undocumented)
background?: Background;
// (undocumented)
color?: Color;
}
// @public (undocumented)
export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
// @public (undocumented)
export const Container: React_2.ForwardRefExoticComponent<
@@ -154,24 +129,24 @@ export const Container: React_2.ForwardRefExoticComponent<
>;
// @public (undocumented)
export interface ContainerProps
extends Omit<
SpaceProps,
| 'padding'
| 'paddingLeft'
| 'paddingRight'
| 'paddingX'
| 'margin'
| 'marginLeft'
| 'marginRight'
| 'marginX'
| 'gap'
> {
export interface ContainerProps {
// (undocumented)
children?: React.ReactNode;
// (undocumented)
className?: string;
// (undocumented)
marginBottom?: SpaceProps['marginBottom'];
// (undocumented)
marginTop?: SpaceProps['marginTop'];
// (undocumented)
marginY?: SpaceProps['marginY'];
// (undocumented)
paddingBottom?: SpaceProps['paddingBottom'];
// (undocumented)
paddingTop?: SpaceProps['paddingTop'];
// (undocumented)
paddingY?: SpaceProps['paddingY'];
// (undocumented)
style?: React.CSSProperties;
}
@@ -184,9 +159,6 @@ export type FlexDirection = 'row' | 'column';
// @public (undocumented)
export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
// @public (undocumented)
export type Gap = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export const Grid: ForwardRefExoticComponent<
GridProps & RefAttributes<HTMLDivElement>
@@ -203,25 +175,27 @@ export interface GridItemProps {
// (undocumented)
className?: string;
// (undocumented)
colSpan?: Columns | 'full';
colEnd?: UtilityProps['colEnd'];
// (undocumented)
end?: Columns | 'auto';
colSpan?: UtilityProps['colSpan'];
// (undocumented)
rowSpan?: Columns | 'full';
colStart?: UtilityProps['colStart'];
// (undocumented)
start?: Columns | 'auto';
rowSpan?: UtilityProps['rowSpan'];
// (undocumented)
style?: React.CSSProperties;
}
// @public (undocumented)
export interface GridProps extends SpaceProps, ColorProps {
export interface GridProps extends SpaceProps {
// (undocumented)
children?: React.ReactNode;
// (undocumented)
className?: string;
// (undocumented)
columns?: Columns | Partial<Record<Breakpoint, Columns>>;
columns?: UtilityProps['columns'];
// (undocumented)
gap?: UtilityProps['gap'];
// (undocumented)
style?: React.CSSProperties;
}
@@ -264,7 +238,7 @@ export const Inline: ForwardRefExoticComponent<
>;
// @public (undocumented)
export interface InlineProps extends SpaceProps, ColorProps {
export interface InlineProps extends SpaceProps {
// (undocumented)
align?:
| 'left'
@@ -284,6 +258,8 @@ export interface InlineProps extends SpaceProps, ColorProps {
// (undocumented)
className?: string;
// (undocumented)
gap?: UtilityProps['gap'];
// (undocumented)
style?: React.CSSProperties;
}
@@ -296,83 +272,39 @@ export type JustifyContent =
| 'around'
| 'between';
// @public (undocumented)
export type Margin = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type MarginBottom = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type MarginLeft = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type MarginRight = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type MarginTop = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type MarginX = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type MarginY = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type Padding = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type PaddingBottom = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type PaddingLeft = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type PaddingRight = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type PaddingTop = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
// @public (undocumented)
export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
// @public (undocumented)
export interface SpaceProps {
// (undocumented)
gap?: Gap;
margin?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
margin?: Margin;
marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginBottom?: MarginBottom;
marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginLeft?: MarginLeft;
marginRight?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginRight?: MarginRight;
marginTop?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginTop?: MarginTop;
marginX?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginX?: MarginX;
marginY?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginY?: MarginY;
padding?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
padding?: Padding;
paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingBottom?: PaddingBottom;
paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingLeft?: PaddingLeft;
paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingRight?: PaddingRight;
paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingTop?: PaddingTop;
paddingX?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingX?: PaddingX;
// (undocumented)
paddingY?: PaddingY;
paddingY?: Space | Partial<Record<Breakpoint, Space>>;
}
// @public (undocumented)
@@ -381,7 +313,7 @@ export const Stack: ForwardRefExoticComponent<
>;
// @public (undocumented)
export interface StackProps extends SpaceProps, ColorProps {
export interface StackProps extends SpaceProps {
// (undocumented)
align?:
| 'left'
@@ -395,6 +327,8 @@ export interface StackProps extends SpaceProps, ColorProps {
// (undocumented)
className?: string;
// (undocumented)
gap?: UtilityProps['gap'];
// (undocumented)
style?: React.CSSProperties;
}
@@ -441,10 +375,7 @@ export const TableRow: React_3.ForwardRefExoticComponent<
>;
// @public (undocumented)
export type Theme = 'light' | 'dark';
// @public (undocumented)
export interface UtilityProps {
export interface UtilityProps extends SpaceProps {
// (undocumented)
alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
// (undocumented)
@@ -452,6 +383,14 @@ export interface UtilityProps {
// (undocumented)
borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
// (undocumented)
colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
// (undocumented)
colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
// (undocumented)
colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
// (undocumented)
columns?: Columns | Partial<Record<Breakpoint, Columns>>;
// (undocumented)
display?: Display | Partial<Record<Breakpoint, Display>>;
// (undocumented)
flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
@@ -462,32 +401,6 @@ export interface UtilityProps {
// (undocumented)
justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
// (undocumented)
margin?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginRight?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginTop?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginX?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
marginY?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
padding?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingX?: Space | Partial<Record<Breakpoint, Space>>;
// (undocumented)
paddingY?: Space | Partial<Record<Breakpoint, Space>>;
rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
}
```
packages/canon/src/components/Box/Docs.mdx
+2 -60
View File
@@ -2,6 +2,7 @@ import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
import * as BoxStories from './Box.stories';
import { Title, Text } from '../../../docs/components';
import { PropsTable } from '../../../docs/components';
import { spacePropsList } from '../../../docs/spaceProps';
<Meta of={BoxStories} />
@@ -84,66 +85,7 @@ import { PropsTable } from '../../../docs/components';
<Canvas of={BoxStories.Padding} />
<PropsTable
data={{
margin: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
marginBottom: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
marginLeft: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
marginRight: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
marginTop: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
marginX: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
marginY: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
padding: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
paddingBottom: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
paddingLeft: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
paddingRight: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
paddingTop: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
paddingX: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
paddingY: {
type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
responsive: true,
},
}}
/>
<PropsTable data={spacePropsList} />
<Title type="h2">Examples</Title>
<Text>Here are some examples of how you can use the Box component.</Text>
packages/canon/src/components/Container/Container.stories.tsx
-13
View File
@@ -17,25 +17,12 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Box } from '../Box/Box';
import { argTypesSpacing } from '../../../docs/utils/argTypes';
import { Container } from './Container';
const argTypesSpacingWithoutLeftAndRight = { ...argTypesSpacing };
delete argTypesSpacingWithoutLeftAndRight.padding;
delete argTypesSpacingWithoutLeftAndRight.paddingLeft;
delete argTypesSpacingWithoutLeftAndRight.paddingRight;
delete argTypesSpacingWithoutLeftAndRight.paddingX;
delete argTypesSpacingWithoutLeftAndRight.margin;
delete argTypesSpacingWithoutLeftAndRight.marginLeft;
delete argTypesSpacingWithoutLeftAndRight.marginRight;
delete argTypesSpacingWithoutLeftAndRight.marginX;
delete argTypesSpacingWithoutLeftAndRight.gap;
const meta = {
title: 'Components/Container',
component: Container,
argTypes: {
...argTypesSpacingWithoutLeftAndRight,
children: {
control: false,
},
packages/canon/src/components/Container/Container.tsx
+9 -7
View File
@@ -14,22 +14,24 @@
* limitations under the License.
*/
import React, { forwardRef } from 'react';
import { containerSprinkles } from './sprinkles.css';
import { ContainerProps } from './types';
import { getClassNames } from '../../utils/getClassNames';
/** @public */
export const Container = forwardRef<HTMLDivElement, ContainerProps>(
(props, ref) => {
const { children, className, style, ...restProps } = props;
const containerClassName = containerSprinkles(restProps);
// Generate utility class names
const utilityClassNames = getClassNames(restProps);
// Combine the base class name, the sprinkles class name, and any additional class names
const classNames = ['canon-container', utilityClassNames, className]
.filter(Boolean)
.join(' ');
return (
<div
ref={ref}
className={['container', containerClassName].filter(Boolean).join(' ')}
style={style}
>
<div ref={ref} className={classNames} style={style}>
{children}
</div>
);
packages/canon/src/components/Container/Docs.mdx
+28 -6
View File
@@ -1,8 +1,7 @@
import { Meta, Unstyled, Source } from '@storybook/blocks';
import * as ContainerStories from './Container.stories';
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
import { spacingProperties } from '../../layout/sprinkles.css';
import { containerProperties } from './sprinkles.css';
import { spacePropsList } from '../../../docs/spaceProps';
<Meta of={ContainerStories} />
@@ -28,18 +27,41 @@ import { containerProperties } from './sprinkles.css';
<PropsTable
data={{
...getProps(containerProperties.styles),
children: {
type: 'ReactNode',
required: false,
responsive: false,
},
className: {
type: 'string',
required: false,
responsive: false,
},
marginY: {
type: spacePropsList.marginY.type,
responsive: spacePropsList.marginY.responsive,
},
marginBottom: {
type: spacePropsList.marginBottom.type,
responsive: spacePropsList.marginBottom.responsive,
},
marginTop: {
type: spacePropsList.marginTop.type,
responsive: spacePropsList.marginTop.responsive,
},
paddingY: {
type: spacePropsList.paddingY.type,
responsive: spacePropsList.paddingY.responsive,
},
paddingBottom: {
type: spacePropsList.paddingBottom.type,
responsive: spacePropsList.paddingBottom.responsive,
},
paddingTop: {
type: spacePropsList.paddingTop.type,
responsive: spacePropsList.paddingTop.responsive,
},
style: {
type: 'CSSProperties',
required: false,
responsive: false,
},
}}
/>
packages/canon/src/components/Container/sprinkles.css.ts
-40
View File
@@ -1,40 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
import { breakpoints, space } from '../../layout/properties';
import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
export const containerProperties = defineProperties({
conditions: breakpoints,
defaultCondition: 'xs',
properties: {
paddingTop: space,
paddingBottom: space,
marginTop: space,
marginBottom: space,
},
shorthands: {
paddingY: ['paddingTop', 'paddingBottom'],
marginY: ['marginTop', 'marginBottom'],
},
});
export const containerSprinkles = createSprinkles(
spacingProperties,
colorProperties,
containerProperties,
);
packages/canon/src/components/Container/styles.css
+1 -1
View File
@@ -1,4 +1,4 @@
.container {
.canon-container {
max-width: var(--canon-container-max-width);
margin: 0 auto;
padding: 0 var(--canon-container-padding);
packages/canon/src/components/Container/types.ts
+8 -14
View File
@@ -13,23 +13,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { SpaceProps } from '../../layout/types';
import { SpaceProps } from '../../types';
/** @public */
export interface ContainerProps
extends Omit<
SpaceProps,
| 'padding'
| 'paddingLeft'
| 'paddingRight'
| 'paddingX'
| 'margin'
| 'marginLeft'
| 'marginRight'
| 'marginX'
| 'gap'
> {
export interface ContainerProps {
children?: React.ReactNode;
className?: string;
marginY?: SpaceProps['marginY'];
marginBottom?: SpaceProps['marginBottom'];
marginTop?: SpaceProps['marginTop'];
paddingY?: SpaceProps['paddingY'];
paddingBottom?: SpaceProps['paddingBottom'];
paddingTop?: SpaceProps['paddingTop'];
style?: React.CSSProperties;
}
packages/canon/src/components/Grid/Docs.mdx
+3 -3
View File
@@ -1,7 +1,7 @@
import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
import * as GridStories from './Grid.stories';
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
import { spacingProperties } from '../../layout/sprinkles.css';
import { Title, Text, PropsTable } from '../../../docs/components';
import { spacePropsList } from '../../../docs/spaceProps';
<Meta of={GridStories} />
@@ -59,7 +59,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
The grid component also accepts all the spacing props from the Box component.
</Text>
<PropsTable data={getProps(spacingProperties.styles)} />
<PropsTable data={spacePropsList} />
<Title type="h3">Grid Item</Title>
<Text>
packages/canon/src/components/Grid/Grid.stories.tsx
-3
View File
@@ -19,15 +19,12 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Grid } from './Grid';
import type { GridItemProps } from './types';
import { Box } from '../Box/Box';
import { argTypesSpacing, argTypesColor } from '../../../docs/utils/argTypes';
import { Stack } from '../Stack';
const meta = {
title: 'Components/Grid',
component: Grid,
argTypes: {
...argTypesSpacing,
...argTypesColor,
children: {
control: false,
},
packages/canon/src/components/Grid/Grid.tsx
+17 -32
View File
@@ -16,62 +16,47 @@
import { createElement, forwardRef } from 'react';
import { GridItemProps, GridProps } from './types';
import { gridItemSprinkles, gridSprinkles } from './sprinkles.css';
import { getClassNames } from '../../utils/getClassNames';
const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
const {
children,
columns,
gap = 'xs',
columns = 'auto',
className,
style,
...restProps
} = props;
const sprinklesClassName = gridSprinkles({
...restProps,
gap,
gridTemplateColumns: columns ? columns : 'auto',
});
const utilityClassNames = getClassNames({ gap, columns, ...restProps });
const classNames = ['grid', sprinklesClassName, className]
const classNames = ['canon-grid', utilityClassNames, className]
.filter(Boolean)
.join(' ');
return createElement(
'div',
{
ref,
className: classNames,
style,
},
return createElement('div', {
ref,
className: classNames,
style,
children,
);
});
});
const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
const { children, rowSpan, colSpan, start, end, className, style } = props;
const { children, className, style, ...restProps } = props;
const sprinklesClassName = gridItemSprinkles({
rowSpan,
colSpan,
start,
end,
});
const utilityClassNames = getClassNames(restProps);
const classNames = ['grid-item', sprinklesClassName, className]
const classNames = ['grid-item', utilityClassNames, className]
.filter(Boolean)
.join(' ');
return createElement(
'div',
{
ref,
className: classNames,
style,
},
return createElement('div', {
ref,
className: classNames,
style,
children,
);
});
});
/** @public */
packages/canon/src/components/Grid/index.ts
+1 -1
View File
@@ -14,4 +14,4 @@
* limitations under the License.
*/
export { Grid } from './Grid';
export type { GridProps, GridItemProps, Columns } from './types';
export type { GridProps, GridItemProps } from './types';
packages/canon/src/components/Grid/sprinkles.css.ts
-130
View File
@@ -1,130 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
import { breakpoints } from '../../layout/properties';
import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
const gridProperties = defineProperties({
conditions: breakpoints,
defaultCondition: 'xs',
properties: {
gridTemplateColumns: {
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
7: 'repeat(7, minmax(0, 1fr))',
8: 'repeat(8, minmax(0, 1fr))',
9: 'repeat(9, minmax(0, 1fr))',
10: 'repeat(10, minmax(0, 1fr))',
11: 'repeat(11, minmax(0, 1fr))',
12: 'repeat(12, minmax(0, 1fr))',
auto: 'repeat(auto-fit, minmax(0, 1fr))',
},
},
shorthands: {
columns: ['gridTemplateColumns'],
},
});
export const gridSprinkles = createSprinkles(
spacingProperties,
colorProperties,
gridProperties,
);
const gridItemProperties = defineProperties({
conditions: breakpoints,
defaultCondition: 'xs',
properties: {
gridColumn: {
1: 'span 1 / span 1',
2: 'span 2 / span 2',
3: 'span 3 / span 3',
4: 'span 4 / span 4',
5: 'span 5 / span 5',
6: 'span 6 / span 6',
7: 'span 7 / span 7',
8: 'span 8 / span 8',
9: 'span 9 / span 9',
10: 'span 10 / span 10',
11: 'span 11 / span 11',
12: 'span 12 / span 12',
full: '1 / -1',
},
gridRow: {
1: 'span 1 / span 1',
2: 'span 2 / span 2',
3: 'span 3 / span 3',
4: 'span 4 / span 4',
5: 'span 5 / span 5',
6: 'span 6 / span 6',
7: 'span 7 / span 7',
8: 'span 8 / span 8',
9: 'span 9 / span 9',
10: 'span 10 / span 10',
11: 'span 11 / span 11',
12: 'span 12 / span 12',
full: '1 / -1',
},
gridColumnStart: {
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
auto: 'auto',
},
gridColumnEnd: {
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
auto: 'auto',
},
},
shorthands: {
colSpan: ['gridColumn'],
rowSpan: ['gridRow'],
start: ['gridColumnStart'],
end: ['gridColumnEnd'],
},
});
export const gridItemSprinkles = createSprinkles(
colorProperties,
gridItemProperties,
);
packages/canon/src/components/Grid/styles.css
+1 -1
View File
@@ -1,3 +1,3 @@
.grid {
.canon-grid {
display: grid;
}
packages/canon/src/components/Grid/types.ts
+9 -11
View File
@@ -13,27 +13,25 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ColorProps } from '../../layout/types';
import { SpaceProps } from '../../layout/types';
import type { Breakpoint } from '../../types';
/** @public */
export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
import type { UtilityProps, SpaceProps } from '../../types';
/** @public */
export interface GridProps extends SpaceProps, ColorProps {
export interface GridProps extends SpaceProps {
children?: React.ReactNode;
columns?: Columns | Partial<Record<Breakpoint, Columns>>;
className?: string;
columns?: UtilityProps['columns'];
gap?: UtilityProps['gap'];
style?: React.CSSProperties;
}
/** @public */
export interface GridItemProps {
children: React.ReactNode;
rowSpan?: Columns | 'full';
colSpan?: Columns | 'full';
start?: Columns | 'auto';
end?: Columns | 'auto';
className?: string;
colSpan?: UtilityProps['colSpan'];
colEnd?: UtilityProps['colEnd'];
colStart?: UtilityProps['colStart'];
rowSpan?: UtilityProps['rowSpan'];
style?: React.CSSProperties;
}
packages/canon/src/components/Inline/Docs.mdx
+4 -5
View File
@@ -1,8 +1,7 @@
import { Meta, Unstyled, Source } from '@storybook/blocks';
import * as InlineStories from './Inline.stories';
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
import { spacingProperties } from '../../layout/sprinkles.css';
import { inlineProperties } from './sprinkles.css';
import { spacePropsList } from '../../../docs/spaceProps';
<Meta of={InlineStories} />
@@ -34,11 +33,11 @@ import { inlineProperties } from './sprinkles.css';
<PropsTable
data={{
align: {
type: 'left | center | right',
type: 'start | center | end',
responsive: true,
},
alignY: {
type: 'top | center | bottom',
type: 'start | center | end',
responsive: true,
},
children: {
@@ -60,7 +59,7 @@ import { inlineProperties } from './sprinkles.css';
The grid component also accepts all the spacing props from the Box component.
</Text>
<PropsTable data={getProps(spacingProperties.styles)} />
<PropsTable data={spacePropsList} />
<Title type="h2">Examples</Title>
packages/canon/src/components/Inline/Inline.stories.tsx
+37 -9
View File
@@ -18,14 +18,11 @@ import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Inline } from './Inline';
import { Box } from '../Box/Box';
import { argTypesSpacing, argTypesColor } from '../../../docs/utils/argTypes';
const meta = {
title: 'Components/Inline',
component: Inline,
argTypes: {
...argTypesSpacing,
...argTypesColor,
align: {
control: 'inline-radio',
options: ['left', 'center', 'right'],
@@ -49,6 +46,41 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
const fakeBlockList = [
{ width: 45, height: 60 },
{ width: 150, height: 75 },
{ width: 80, height: 50 },
{ width: 120, height: 70 },
{ width: 95, height: 65 },
{ width: 110, height: 55 },
{ width: 130, height: 60 },
{ width: 100, height: 80 },
{ width: 140, height: 45 },
{ width: 85, height: 70 },
{ width: 125, height: 50 },
{ width: 105, height: 75 },
{ width: 115, height: 65 },
{ width: 135, height: 55 },
{ width: 90, height: 60 },
{ width: 145, height: 80 },
{ width: 75, height: 45 },
{ width: 155, height: 70 },
{ width: 60, height: 50 },
{ width: 160, height: 75 },
{ width: 70, height: 65 },
{ width: 150, height: 55 },
{ width: 95, height: 60 },
{ width: 120, height: 80 },
{ width: 85, height: 45 },
{ width: 130, height: 70 },
{ width: 100, height: 50 },
{ width: 140, height: 75 },
{ width: 110, height: 65 },
{ width: 125, height: 55 },
{ width: 105, height: 60 },
{ width: 145, height: 80 },
];
const FakeBox = ({
width = 120,
height = 80,
@@ -66,12 +98,8 @@ export const Default: Story = {
args: {
children: (
<>
{Array.from({ length: 32 }).map((_, index) => (
<FakeBox
key={index}
width={Math.floor(Math.random() * (160 - 40 + 1)) + 40}
height={Math.floor(Math.random() * (80 - 40 + 1)) + 40}
/>
{fakeBlockList.map((block, index) => (
<FakeBox key={index} width={block.width} height={block.height} />
))}
</>
),
packages/canon/src/components/Inline/Inline.tsx
+39 -17
View File
@@ -15,21 +15,43 @@
*/
import { createElement, forwardRef } from 'react';
import { inlineSprinkles } from './sprinkles.css';
import type { InlineProps } from './types';
import { getClassNames } from '../../utils/getClassNames';
import { JustifyContent, Breakpoint, AlignItems } from '../../types';
const alignYToFlexAlign = (alignY: InlineProps['alignY']) => {
if (alignY === 'top') return 'flex-start';
if (alignY === 'center') return 'center';
if (alignY === 'bottom') return 'flex-end';
return undefined;
// Function to map align values
const mapAlignValue = (value?: InlineProps['align']) => {
if (typeof value === 'string') {
let returnedValue: JustifyContent = 'stretch';
if (value === 'left') returnedValue = 'start';
if (value === 'center') returnedValue = 'center';
if (value === 'right') returnedValue = 'end';
return returnedValue;
} else if (typeof value === 'object') {
const returnedValue: Partial<Record<Breakpoint, JustifyContent>> = {};
for (const [key, val] of Object.entries(value)) {
returnedValue[key as Breakpoint] = mapAlignValue(val) as JustifyContent;
}
return returnedValue;
}
return 'stretch';
};
const alignToFlexAlignY = (align: InlineProps['align']) => {
if (align === 'left') return 'flex-start';
if (align === 'center') return 'center';
if (align === 'right') return 'flex-end';
return undefined;
const mapAlignYValue = (value?: InlineProps['alignY']) => {
if (typeof value === 'string') {
let returnedValue: AlignItems = 'stretch';
if (value === 'top') returnedValue = 'start';
if (value === 'center') returnedValue = 'center';
if (value === 'bottom') returnedValue = 'end';
return returnedValue;
} else if (typeof value === 'object') {
const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
for (const [key, val] of Object.entries(value)) {
returnedValue[key as Breakpoint] = mapAlignYValue(val) as AlignItems;
}
return returnedValue;
}
return 'stretch';
};
/** @public */
@@ -45,16 +67,16 @@ export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
...restProps
} = props;
// Generate the list of class names
const sprinklesClassName = inlineSprinkles({
...restProps,
// Generate utility class names
const utilityClassNames = getClassNames({
gap,
alignItems: alignYToFlexAlign(alignY),
justifyContent: alignToFlexAlignY(align),
alignItems: mapAlignYValue(alignY),
justifyContent: mapAlignValue(align),
...restProps,
});
// Combine the base class name, the sprinkles class name, and any additional class names
const classNames = ['inline', sprinklesClassName, className]
const classNames = ['canon-inline', utilityClassNames, className]
.filter(Boolean)
.join(' ');
packages/canon/src/components/Inline/sprinkles.css.ts
-34
View File
@@ -1,34 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
import { breakpoints } from '../../layout/properties';
import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
export const inlineProperties = defineProperties({
conditions: breakpoints,
defaultCondition: 'xs',
properties: {
alignItems: ['flex-start', 'center', 'flex-end'],
justifyContent: ['flex-start', 'center', 'flex-end'],
},
});
export const inlineSprinkles = createSprinkles(
spacingProperties,
colorProperties,
inlineProperties,
);
packages/canon/src/components/Inline/styles.css
+1 -1
View File
@@ -1,4 +1,4 @@
.inline {
.canon-inline {
display: flex;
flex-wrap: wrap;
}
packages/canon/src/components/Inline/types.ts
+9 -4
View File
@@ -14,13 +14,18 @@
* limitations under the License.
*/
import { AsProps, ColorProps } from '../../layout/types';
import { SpaceProps } from '../../layout/types';
import type { Breakpoint } from '../../types';
import type {
SpaceProps,
UtilityProps,
AsProps,
Breakpoint,
} from '../../types';
/** @public */
export interface InlineProps extends SpaceProps, ColorProps {
export interface InlineProps extends SpaceProps {
children: React.ReactNode;
as?: AsProps;
gap?: UtilityProps['gap'];
align?:
| 'left'
| 'center'
packages/canon/src/components/Stack/Docs.mdx
+3 -3
View File
@@ -1,7 +1,7 @@
import { Meta, Unstyled, Source } from '@storybook/blocks';
import * as StackStories from './Stack.stories';
import { Title, Text, PropsTable, getProps } from '../../../docs/components';
import { spacingProperties } from '../../layout/sprinkles.css';
import { spacePropsList } from '../../../docs/spaceProps';
<Meta of={StackStories} />
@@ -33,7 +33,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
<PropsTable
data={{
align: {
type: ['left', 'center', 'right'],
type: ['start', 'center', 'end'],
responsive: true,
},
children: {
@@ -55,7 +55,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
The grid component also accepts all the spacing props from the Box component.
</Text>
<PropsTable data={getProps(spacingProperties.styles)} />
<PropsTable data={spacePropsList} />
<Title type="h2">Common questions</Title>
packages/canon/src/components/Stack/Stack.stories.tsx
-3
View File
@@ -18,14 +18,11 @@ import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Stack } from './Stack';
import { Box } from '../Box/Box';
import { argTypesSpacing, argTypesColor } from '../../../docs/utils/argTypes';
const meta = {
title: 'Components/Stack',
component: Stack,
argTypes: {
...argTypesSpacing,
...argTypesColor,
align: {
control: 'inline-radio',
options: ['left', 'center', 'right'],
packages/canon/src/components/Stack/Stack.tsx
+23 -14
View File
@@ -16,13 +16,25 @@
import { createElement, forwardRef } from 'react';
import { StackProps } from './types';
import { stackSprinkles } from './sprinkles.css';
import { getClassNames } from '../../utils/getClassNames';
import type { AlignItems, Breakpoint } from '../../types';
const alignToFlexAlign = (align: StackProps['align']) => {
if (align === 'left') return 'stretch';
if (align === 'center') return 'center';
if (align === 'right') return 'flex-end';
return undefined;
// Function to map align values
const mapAlignValue = (value?: StackProps['align']) => {
if (typeof value === 'string') {
let returnedValue: AlignItems = 'stretch';
if (value === 'left') returnedValue = 'stretch';
if (value === 'center') returnedValue = 'center';
if (value === 'right') returnedValue = 'end';
return returnedValue;
} else if (typeof value === 'object') {
const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
for (const [key, val] of Object.entries(value)) {
returnedValue[key as Breakpoint] = mapAlignValue(val) as AlignItems;
}
return returnedValue;
}
return 'stretch';
};
/** @public */
@@ -37,18 +49,15 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
...restProps
} = props;
// Transform the align prop
const flexAlign = alignToFlexAlign(align);
// Generate the list of class names
const sprinklesClassName = stackSprinkles({
...restProps,
// Generate utility class names
const utilityClassNames = getClassNames({
gap,
alignItems: flexAlign,
alignItems: mapAlignValue(align),
...restProps,
});
// Combine the base class name, the sprinkles class name, and any additional class names
const classNames = ['stack', sprinklesClassName, className]
const classNames = ['canon-stack', utilityClassNames, className]
.filter(Boolean)
.join(' ');
packages/canon/src/components/Stack/styles.css
+1 -1
View File
@@ -1,4 +1,4 @@
.stack {
.canon-stack {
display: flex;
flex-direction: column;
}
packages/canon/src/components/Stack/types.ts
+10 -4
View File
@@ -13,13 +13,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AsProps, ColorProps } from '../../layout/types';
import { SpaceProps } from '../../layout/types';
import type { Breakpoint } from '../../types';
import type {
SpaceProps,
UtilityProps,
AsProps,
Breakpoint,
} from '../../types';
/** @public */
export interface StackProps extends SpaceProps, ColorProps {
export interface StackProps extends SpaceProps {
children: React.ReactNode;
as?: AsProps;
gap?: UtilityProps['gap'];
align?:
| 'left'
| 'center'
packages/canon/src/css/utilities/2xl.css
+268
View File
@@ -49,6 +49,170 @@
border-style: solid;
}
.cu-2xl-col-end-1 {
grid-column-end: 1;
}
.cu-2xl-col-end-10 {
grid-column-end: 10;
}
.cu-2xl-col-end-11 {
grid-column-end: 11;
}
.cu-2xl-col-end-12 {
grid-column-end: 12;
}
.cu-2xl-col-end-13 {
grid-column-end: 13;
}
.cu-2xl-col-end-2 {
grid-column-end: 2;
}
.cu-2xl-col-end-3 {
grid-column-end: 3;
}
.cu-2xl-col-end-4 {
grid-column-end: 4;
}
.cu-2xl-col-end-5 {
grid-column-end: 5;
}
.cu-2xl-col-end-6 {
grid-column-end: 6;
}
.cu-2xl-col-end-7 {
grid-column-end: 7;
}
.cu-2xl-col-end-8 {
grid-column-end: 8;
}
.cu-2xl-col-end-9 {
grid-column-end: 9;
}
.cu-2xl-col-end-auto {
grid-column-end: auto;
}
.cu-2xl-col-span-1 {
grid-column: span 1 / span 1;
}
.cu-2xl-col-span-10 {
grid-column: span 10 / span 10;
}
.cu-2xl-col-span-11 {
grid-column: span 11 / span 11;
}
.cu-2xl-col-span-12 {
grid-column: span 12 / span 12;
}
.cu-2xl-col-span-2 {
grid-column: span 2 / span 2;
}
.cu-2xl-col-span-3 {
grid-column: span 3 / span 3;
}
.cu-2xl-col-span-4 {
grid-column: span 4 / span 4;
}
.cu-2xl-col-span-5 {
grid-column: span 5 / span 5;
}
.cu-2xl-col-span-6 {
grid-column: span 6 / span 6;
}
.cu-2xl-col-span-7 {
grid-column: span 7 / span 7;
}
.cu-2xl-col-span-8 {
grid-column: span 8 / span 8;
}
.cu-2xl-col-span-9 {
grid-column: span 9 / span 9;
}
.cu-2xl-col-span-auto {
grid-column: span auto / span auto;
}
.cu-2xl-col-start-1 {
grid-column-start: 1;
}
.cu-2xl-col-start-10 {
grid-column-start: 10;
}
.cu-2xl-col-start-11 {
grid-column-start: 11;
}
.cu-2xl-col-start-12 {
grid-column-start: 12;
}
.cu-2xl-col-start-13 {
grid-column-start: 13;
}
.cu-2xl-col-start-2 {
grid-column-start: 2;
}
.cu-2xl-col-start-3 {
grid-column-start: 3;
}
.cu-2xl-col-start-4 {
grid-column-start: 4;
}
.cu-2xl-col-start-5 {
grid-column-start: 5;
}
.cu-2xl-col-start-6 {
grid-column-start: 6;
}
.cu-2xl-col-start-7 {
grid-column-start: 7;
}
.cu-2xl-col-start-8 {
grid-column-start: 8;
}
.cu-2xl-col-start-9 {
grid-column-start: 9;
}
.cu-2xl-col-start-auto {
grid-column-start: auto;
}
.cu-2xl-flex {
display: flex;
}
@@ -105,6 +269,58 @@
display: grid;
}
.cu-2xl-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.cu-2xl-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.cu-2xl-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.cu-2xl-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cu-2xl-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cu-2xl-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cu-2xl-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cu-2xl-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cu-2xl-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cu-2xl-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cu-2xl-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.cu-2xl-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.cu-2xl-grid-cols-auto {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.cu-2xl-hidden {
display: none;
}
@@ -609,6 +825,58 @@
border-radius: var(--canon-border-radius-xs);
}
.cu-2xl-row-span-1 {
grid-row: span 1 / span 1;
}
.cu-2xl-row-span-10 {
grid-row: span 10 / span 10;
}
.cu-2xl-row-span-11 {
grid-row: span 11 / span 11;
}
.cu-2xl-row-span-12 {
grid-row: span 12 / span 12;
}
.cu-2xl-row-span-2 {
grid-row: span 2 / span 2;
}
.cu-2xl-row-span-3 {
grid-row: span 3 / span 3;
}
.cu-2xl-row-span-4 {
grid-row: span 4 / span 4;
}
.cu-2xl-row-span-5 {
grid-row: span 5 / span 5;
}
.cu-2xl-row-span-6 {
grid-row: span 6 / span 6;
}
.cu-2xl-row-span-7 {
grid-row: span 7 / span 7;
}
.cu-2xl-row-span-8 {
grid-row: span 8 / span 8;
}
.cu-2xl-row-span-9 {
grid-row: span 9 / span 9;
}
.cu-2xl-row-span-auto {
grid-row: span auto / span auto;
}
.cu-2xl-wrap-reverse {
flex-wrap: wrap-reverse;
}
packages/canon/src/css/utilities/lg.css
+268
View File
@@ -49,6 +49,170 @@
border-style: solid;
}
.cu-lg-col-end-1 {
grid-column-end: 1;
}
.cu-lg-col-end-10 {
grid-column-end: 10;
}
.cu-lg-col-end-11 {
grid-column-end: 11;
}
.cu-lg-col-end-12 {
grid-column-end: 12;
}
.cu-lg-col-end-13 {
grid-column-end: 13;
}
.cu-lg-col-end-2 {
grid-column-end: 2;
}
.cu-lg-col-end-3 {
grid-column-end: 3;
}
.cu-lg-col-end-4 {
grid-column-end: 4;
}
.cu-lg-col-end-5 {
grid-column-end: 5;
}
.cu-lg-col-end-6 {
grid-column-end: 6;
}
.cu-lg-col-end-7 {
grid-column-end: 7;
}
.cu-lg-col-end-8 {
grid-column-end: 8;
}
.cu-lg-col-end-9 {
grid-column-end: 9;
}
.cu-lg-col-end-auto {
grid-column-end: auto;
}
.cu-lg-col-span-1 {
grid-column: span 1 / span 1;
}
.cu-lg-col-span-10 {
grid-column: span 10 / span 10;
}
.cu-lg-col-span-11 {
grid-column: span 11 / span 11;
}
.cu-lg-col-span-12 {
grid-column: span 12 / span 12;
}
.cu-lg-col-span-2 {
grid-column: span 2 / span 2;
}
.cu-lg-col-span-3 {
grid-column: span 3 / span 3;
}
.cu-lg-col-span-4 {
grid-column: span 4 / span 4;
}
.cu-lg-col-span-5 {
grid-column: span 5 / span 5;
}
.cu-lg-col-span-6 {
grid-column: span 6 / span 6;
}
.cu-lg-col-span-7 {
grid-column: span 7 / span 7;
}
.cu-lg-col-span-8 {
grid-column: span 8 / span 8;
}
.cu-lg-col-span-9 {
grid-column: span 9 / span 9;
}
.cu-lg-col-span-auto {
grid-column: span auto / span auto;
}
.cu-lg-col-start-1 {
grid-column-start: 1;
}
.cu-lg-col-start-10 {
grid-column-start: 10;
}
.cu-lg-col-start-11 {
grid-column-start: 11;
}
.cu-lg-col-start-12 {
grid-column-start: 12;
}
.cu-lg-col-start-13 {
grid-column-start: 13;
}
.cu-lg-col-start-2 {
grid-column-start: 2;
}
.cu-lg-col-start-3 {
grid-column-start: 3;
}
.cu-lg-col-start-4 {
grid-column-start: 4;
}
.cu-lg-col-start-5 {
grid-column-start: 5;
}
.cu-lg-col-start-6 {
grid-column-start: 6;
}
.cu-lg-col-start-7 {
grid-column-start: 7;
}
.cu-lg-col-start-8 {
grid-column-start: 8;
}
.cu-lg-col-start-9 {
grid-column-start: 9;
}
.cu-lg-col-start-auto {
grid-column-start: auto;
}
.cu-lg-flex {
display: flex;
}
@@ -105,6 +269,58 @@
display: grid;
}
.cu-lg-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.cu-lg-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.cu-lg-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.cu-lg-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cu-lg-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cu-lg-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cu-lg-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cu-lg-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cu-lg-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cu-lg-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cu-lg-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.cu-lg-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.cu-lg-grid-cols-auto {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.cu-lg-hidden {
display: none;
}
@@ -609,6 +825,58 @@
border-radius: var(--canon-border-radius-xs);
}
.cu-lg-row-span-1 {
grid-row: span 1 / span 1;
}
.cu-lg-row-span-10 {
grid-row: span 10 / span 10;
}
.cu-lg-row-span-11 {
grid-row: span 11 / span 11;
}
.cu-lg-row-span-12 {
grid-row: span 12 / span 12;
}
.cu-lg-row-span-2 {
grid-row: span 2 / span 2;
}
.cu-lg-row-span-3 {
grid-row: span 3 / span 3;
}
.cu-lg-row-span-4 {
grid-row: span 4 / span 4;
}
.cu-lg-row-span-5 {
grid-row: span 5 / span 5;
}
.cu-lg-row-span-6 {
grid-row: span 6 / span 6;
}
.cu-lg-row-span-7 {
grid-row: span 7 / span 7;
}
.cu-lg-row-span-8 {
grid-row: span 8 / span 8;
}
.cu-lg-row-span-9 {
grid-row: span 9 / span 9;
}
.cu-lg-row-span-auto {
grid-row: span auto / span auto;
}
.cu-lg-wrap-reverse {
flex-wrap: wrap-reverse;
}
packages/canon/src/css/utilities/md.css
+268
View File
@@ -49,6 +49,170 @@
border-style: solid;
}
.cu-md-col-end-1 {
grid-column-end: 1;
}
.cu-md-col-end-10 {
grid-column-end: 10;
}
.cu-md-col-end-11 {
grid-column-end: 11;
}
.cu-md-col-end-12 {
grid-column-end: 12;
}
.cu-md-col-end-13 {
grid-column-end: 13;
}
.cu-md-col-end-2 {
grid-column-end: 2;
}
.cu-md-col-end-3 {
grid-column-end: 3;
}
.cu-md-col-end-4 {
grid-column-end: 4;
}
.cu-md-col-end-5 {
grid-column-end: 5;
}
.cu-md-col-end-6 {
grid-column-end: 6;
}
.cu-md-col-end-7 {
grid-column-end: 7;
}
.cu-md-col-end-8 {
grid-column-end: 8;
}
.cu-md-col-end-9 {
grid-column-end: 9;
}
.cu-md-col-end-auto {
grid-column-end: auto;
}
.cu-md-col-span-1 {
grid-column: span 1 / span 1;
}
.cu-md-col-span-10 {
grid-column: span 10 / span 10;
}
.cu-md-col-span-11 {
grid-column: span 11 / span 11;
}
.cu-md-col-span-12 {
grid-column: span 12 / span 12;
}
.cu-md-col-span-2 {
grid-column: span 2 / span 2;
}
.cu-md-col-span-3 {
grid-column: span 3 / span 3;
}
.cu-md-col-span-4 {
grid-column: span 4 / span 4;
}
.cu-md-col-span-5 {
grid-column: span 5 / span 5;
}
.cu-md-col-span-6 {
grid-column: span 6 / span 6;
}
.cu-md-col-span-7 {
grid-column: span 7 / span 7;
}
.cu-md-col-span-8 {
grid-column: span 8 / span 8;
}
.cu-md-col-span-9 {
grid-column: span 9 / span 9;
}
.cu-md-col-span-auto {
grid-column: span auto / span auto;
}
.cu-md-col-start-1 {
grid-column-start: 1;
}
.cu-md-col-start-10 {
grid-column-start: 10;
}
.cu-md-col-start-11 {
grid-column-start: 11;
}
.cu-md-col-start-12 {
grid-column-start: 12;
}
.cu-md-col-start-13 {
grid-column-start: 13;
}
.cu-md-col-start-2 {
grid-column-start: 2;
}
.cu-md-col-start-3 {
grid-column-start: 3;
}
.cu-md-col-start-4 {
grid-column-start: 4;
}
.cu-md-col-start-5 {
grid-column-start: 5;
}
.cu-md-col-start-6 {
grid-column-start: 6;
}
.cu-md-col-start-7 {
grid-column-start: 7;
}
.cu-md-col-start-8 {
grid-column-start: 8;
}
.cu-md-col-start-9 {
grid-column-start: 9;
}
.cu-md-col-start-auto {
grid-column-start: auto;
}
.cu-md-flex {
display: flex;
}
@@ -105,6 +269,58 @@
display: grid;
}
.cu-md-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.cu-md-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.cu-md-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.cu-md-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cu-md-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cu-md-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cu-md-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cu-md-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cu-md-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cu-md-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cu-md-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.cu-md-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.cu-md-grid-cols-auto {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.cu-md-hidden {
display: none;
}
@@ -609,6 +825,58 @@
border-radius: var(--canon-border-radius-xs);
}
.cu-md-row-span-1 {
grid-row: span 1 / span 1;
}
.cu-md-row-span-10 {
grid-row: span 10 / span 10;
}
.cu-md-row-span-11 {
grid-row: span 11 / span 11;
}
.cu-md-row-span-12 {
grid-row: span 12 / span 12;
}
.cu-md-row-span-2 {
grid-row: span 2 / span 2;
}
.cu-md-row-span-3 {
grid-row: span 3 / span 3;
}
.cu-md-row-span-4 {
grid-row: span 4 / span 4;
}
.cu-md-row-span-5 {
grid-row: span 5 / span 5;
}
.cu-md-row-span-6 {
grid-row: span 6 / span 6;
}
.cu-md-row-span-7 {
grid-row: span 7 / span 7;
}
.cu-md-row-span-8 {
grid-row: span 8 / span 8;
}
.cu-md-row-span-9 {
grid-row: span 9 / span 9;
}
.cu-md-row-span-auto {
grid-row: span auto / span auto;
}
.cu-md-wrap-reverse {
flex-wrap: wrap-reverse;
}
packages/canon/src/css/utilities/sm.css
+268
View File
@@ -49,6 +49,170 @@
border-style: solid;
}
.cu-sm-col-end-1 {
grid-column-end: 1;
}
.cu-sm-col-end-10 {
grid-column-end: 10;
}
.cu-sm-col-end-11 {
grid-column-end: 11;
}
.cu-sm-col-end-12 {
grid-column-end: 12;
}
.cu-sm-col-end-13 {
grid-column-end: 13;
}
.cu-sm-col-end-2 {
grid-column-end: 2;
}
.cu-sm-col-end-3 {
grid-column-end: 3;
}
.cu-sm-col-end-4 {
grid-column-end: 4;
}
.cu-sm-col-end-5 {
grid-column-end: 5;
}
.cu-sm-col-end-6 {
grid-column-end: 6;
}
.cu-sm-col-end-7 {
grid-column-end: 7;
}
.cu-sm-col-end-8 {
grid-column-end: 8;
}
.cu-sm-col-end-9 {
grid-column-end: 9;
}
.cu-sm-col-end-auto {
grid-column-end: auto;
}
.cu-sm-col-span-1 {
grid-column: span 1 / span 1;
}
.cu-sm-col-span-10 {
grid-column: span 10 / span 10;
}
.cu-sm-col-span-11 {
grid-column: span 11 / span 11;
}
.cu-sm-col-span-12 {
grid-column: span 12 / span 12;
}
.cu-sm-col-span-2 {
grid-column: span 2 / span 2;
}
.cu-sm-col-span-3 {
grid-column: span 3 / span 3;
}
.cu-sm-col-span-4 {
grid-column: span 4 / span 4;
}
.cu-sm-col-span-5 {
grid-column: span 5 / span 5;
}
.cu-sm-col-span-6 {
grid-column: span 6 / span 6;
}
.cu-sm-col-span-7 {
grid-column: span 7 / span 7;
}
.cu-sm-col-span-8 {
grid-column: span 8 / span 8;
}
.cu-sm-col-span-9 {
grid-column: span 9 / span 9;
}
.cu-sm-col-span-auto {
grid-column: span auto / span auto;
}
.cu-sm-col-start-1 {
grid-column-start: 1;
}
.cu-sm-col-start-10 {
grid-column-start: 10;
}
.cu-sm-col-start-11 {
grid-column-start: 11;
}
.cu-sm-col-start-12 {
grid-column-start: 12;
}
.cu-sm-col-start-13 {
grid-column-start: 13;
}
.cu-sm-col-start-2 {
grid-column-start: 2;
}
.cu-sm-col-start-3 {
grid-column-start: 3;
}
.cu-sm-col-start-4 {
grid-column-start: 4;
}
.cu-sm-col-start-5 {
grid-column-start: 5;
}
.cu-sm-col-start-6 {
grid-column-start: 6;
}
.cu-sm-col-start-7 {
grid-column-start: 7;
}
.cu-sm-col-start-8 {
grid-column-start: 8;
}
.cu-sm-col-start-9 {
grid-column-start: 9;
}
.cu-sm-col-start-auto {
grid-column-start: auto;
}
.cu-sm-flex {
display: flex;
}
@@ -105,6 +269,58 @@
display: grid;
}
.cu-sm-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.cu-sm-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.cu-sm-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.cu-sm-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cu-sm-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cu-sm-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cu-sm-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cu-sm-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cu-sm-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cu-sm-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cu-sm-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.cu-sm-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.cu-sm-grid-cols-auto {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.cu-sm-hidden {
display: none;
}
@@ -609,6 +825,58 @@
border-radius: var(--canon-border-radius-xs);
}
.cu-sm-row-span-1 {
grid-row: span 1 / span 1;
}
.cu-sm-row-span-10 {
grid-row: span 10 / span 10;
}
.cu-sm-row-span-11 {
grid-row: span 11 / span 11;
}
.cu-sm-row-span-12 {
grid-row: span 12 / span 12;
}
.cu-sm-row-span-2 {
grid-row: span 2 / span 2;
}
.cu-sm-row-span-3 {
grid-row: span 3 / span 3;
}
.cu-sm-row-span-4 {
grid-row: span 4 / span 4;
}
.cu-sm-row-span-5 {
grid-row: span 5 / span 5;
}
.cu-sm-row-span-6 {
grid-row: span 6 / span 6;
}
.cu-sm-row-span-7 {
grid-row: span 7 / span 7;
}
.cu-sm-row-span-8 {
grid-row: span 8 / span 8;
}
.cu-sm-row-span-9 {
grid-row: span 9 / span 9;
}
.cu-sm-row-span-auto {
grid-row: span auto / span auto;
}
.cu-sm-wrap-reverse {
flex-wrap: wrap-reverse;
}
packages/canon/src/css/utilities/xl.css
+268
View File
@@ -49,6 +49,170 @@
border-style: solid;
}
.cu-xl-col-end-1 {
grid-column-end: 1;
}
.cu-xl-col-end-10 {
grid-column-end: 10;
}
.cu-xl-col-end-11 {
grid-column-end: 11;
}
.cu-xl-col-end-12 {
grid-column-end: 12;
}
.cu-xl-col-end-13 {
grid-column-end: 13;
}
.cu-xl-col-end-2 {
grid-column-end: 2;
}
.cu-xl-col-end-3 {
grid-column-end: 3;
}
.cu-xl-col-end-4 {
grid-column-end: 4;
}
.cu-xl-col-end-5 {
grid-column-end: 5;
}
.cu-xl-col-end-6 {
grid-column-end: 6;
}
.cu-xl-col-end-7 {
grid-column-end: 7;
}
.cu-xl-col-end-8 {
grid-column-end: 8;
}
.cu-xl-col-end-9 {
grid-column-end: 9;
}
.cu-xl-col-end-auto {
grid-column-end: auto;
}
.cu-xl-col-span-1 {
grid-column: span 1 / span 1;
}
.cu-xl-col-span-10 {
grid-column: span 10 / span 10;
}
.cu-xl-col-span-11 {
grid-column: span 11 / span 11;
}
.cu-xl-col-span-12 {
grid-column: span 12 / span 12;
}
.cu-xl-col-span-2 {
grid-column: span 2 / span 2;
}
.cu-xl-col-span-3 {
grid-column: span 3 / span 3;
}
.cu-xl-col-span-4 {
grid-column: span 4 / span 4;
}
.cu-xl-col-span-5 {
grid-column: span 5 / span 5;
}
.cu-xl-col-span-6 {
grid-column: span 6 / span 6;
}
.cu-xl-col-span-7 {
grid-column: span 7 / span 7;
}
.cu-xl-col-span-8 {
grid-column: span 8 / span 8;
}
.cu-xl-col-span-9 {
grid-column: span 9 / span 9;
}
.cu-xl-col-span-auto {
grid-column: span auto / span auto;
}
.cu-xl-col-start-1 {
grid-column-start: 1;
}
.cu-xl-col-start-10 {
grid-column-start: 10;
}
.cu-xl-col-start-11 {
grid-column-start: 11;
}
.cu-xl-col-start-12 {
grid-column-start: 12;
}
.cu-xl-col-start-13 {
grid-column-start: 13;
}
.cu-xl-col-start-2 {
grid-column-start: 2;
}
.cu-xl-col-start-3 {
grid-column-start: 3;
}
.cu-xl-col-start-4 {
grid-column-start: 4;
}
.cu-xl-col-start-5 {
grid-column-start: 5;
}
.cu-xl-col-start-6 {
grid-column-start: 6;
}
.cu-xl-col-start-7 {
grid-column-start: 7;
}
.cu-xl-col-start-8 {
grid-column-start: 8;
}
.cu-xl-col-start-9 {
grid-column-start: 9;
}
.cu-xl-col-start-auto {
grid-column-start: auto;
}
.cu-xl-flex {
display: flex;
}
@@ -105,6 +269,58 @@
display: grid;
}
.cu-xl-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.cu-xl-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.cu-xl-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.cu-xl-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cu-xl-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cu-xl-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cu-xl-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cu-xl-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cu-xl-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cu-xl-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cu-xl-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.cu-xl-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.cu-xl-grid-cols-auto {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.cu-xl-hidden {
display: none;
}
@@ -609,6 +825,58 @@
border-radius: var(--canon-border-radius-xs);
}
.cu-xl-row-span-1 {
grid-row: span 1 / span 1;
}
.cu-xl-row-span-10 {
grid-row: span 10 / span 10;
}
.cu-xl-row-span-11 {
grid-row: span 11 / span 11;
}
.cu-xl-row-span-12 {
grid-row: span 12 / span 12;
}
.cu-xl-row-span-2 {
grid-row: span 2 / span 2;
}
.cu-xl-row-span-3 {
grid-row: span 3 / span 3;
}
.cu-xl-row-span-4 {
grid-row: span 4 / span 4;
}
.cu-xl-row-span-5 {
grid-row: span 5 / span 5;
}
.cu-xl-row-span-6 {
grid-row: span 6 / span 6;
}
.cu-xl-row-span-7 {
grid-row: span 7 / span 7;
}
.cu-xl-row-span-8 {
grid-row: span 8 / span 8;
}
.cu-xl-row-span-9 {
grid-row: span 9 / span 9;
}
.cu-xl-row-span-auto {
grid-row: span auto / span auto;
}
.cu-xl-wrap-reverse {
flex-wrap: wrap-reverse;
}
packages/canon/src/css/utilities/xs.css
+268
View File
@@ -48,6 +48,170 @@
border-style: solid;
}
.cu-col-end-1 {
grid-column-end: 1;
}
.cu-col-end-10 {
grid-column-end: 10;
}
.cu-col-end-11 {
grid-column-end: 11;
}
.cu-col-end-12 {
grid-column-end: 12;
}
.cu-col-end-13 {
grid-column-end: 13;
}
.cu-col-end-2 {
grid-column-end: 2;
}
.cu-col-end-3 {
grid-column-end: 3;
}
.cu-col-end-4 {
grid-column-end: 4;
}
.cu-col-end-5 {
grid-column-end: 5;
}
.cu-col-end-6 {
grid-column-end: 6;
}
.cu-col-end-7 {
grid-column-end: 7;
}
.cu-col-end-8 {
grid-column-end: 8;
}
.cu-col-end-9 {
grid-column-end: 9;
}
.cu-col-end-auto {
grid-column-end: auto;
}
.cu-col-span-1 {
grid-column: span 1 / span 1;
}
.cu-col-span-10 {
grid-column: span 10 / span 10;
}
.cu-col-span-11 {
grid-column: span 11 / span 11;
}
.cu-col-span-12 {
grid-column: span 12 / span 12;
}
.cu-col-span-2 {
grid-column: span 2 / span 2;
}
.cu-col-span-3 {
grid-column: span 3 / span 3;
}
.cu-col-span-4 {
grid-column: span 4 / span 4;
}
.cu-col-span-5 {
grid-column: span 5 / span 5;
}
.cu-col-span-6 {
grid-column: span 6 / span 6;
}
.cu-col-span-7 {
grid-column: span 7 / span 7;
}
.cu-col-span-8 {
grid-column: span 8 / span 8;
}
.cu-col-span-9 {
grid-column: span 9 / span 9;
}
.cu-col-span-auto {
grid-column: span auto / span auto;
}
.cu-col-start-1 {
grid-column-start: 1;
}
.cu-col-start-10 {
grid-column-start: 10;
}
.cu-col-start-11 {
grid-column-start: 11;
}
.cu-col-start-12 {
grid-column-start: 12;
}
.cu-col-start-13 {
grid-column-start: 13;
}
.cu-col-start-2 {
grid-column-start: 2;
}
.cu-col-start-3 {
grid-column-start: 3;
}
.cu-col-start-4 {
grid-column-start: 4;
}
.cu-col-start-5 {
grid-column-start: 5;
}
.cu-col-start-6 {
grid-column-start: 6;
}
.cu-col-start-7 {
grid-column-start: 7;
}
.cu-col-start-8 {
grid-column-start: 8;
}
.cu-col-start-9 {
grid-column-start: 9;
}
.cu-col-start-auto {
grid-column-start: auto;
}
.cu-flex {
display: flex;
}
@@ -104,6 +268,58 @@
display: grid;
}
.cu-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.cu-grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.cu-grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.cu-grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cu-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cu-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cu-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cu-grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cu-grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cu-grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cu-grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.cu-grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.cu-grid-cols-auto {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.cu-hidden {
display: none;
}
@@ -608,6 +824,58 @@
border-radius: var(--canon-border-radius-xs);
}
.cu-row-span-1 {
grid-row: span 1 / span 1;
}
.cu-row-span-10 {
grid-row: span 10 / span 10;
}
.cu-row-span-11 {
grid-row: span 11 / span 11;
}
.cu-row-span-12 {
grid-row: span 12 / span 12;
}
.cu-row-span-2 {
grid-row: span 2 / span 2;
}
.cu-row-span-3 {
grid-row: span 3 / span 3;
}
.cu-row-span-4 {
grid-row: span 4 / span 4;
}
.cu-row-span-5 {
grid-row: span 5 / span 5;
}
.cu-row-span-6 {
grid-row: span 6 / span 6;
}
.cu-row-span-7 {
grid-row: span 7 / span 7;
}
.cu-row-span-8 {
grid-row: span 8 / span 8;
}
.cu-row-span-9 {
grid-row: span 9 / span 9;
}
.cu-row-span-auto {
grid-row: span auto / span auto;
}
.cu-wrap-reverse {
flex-wrap: wrap-reverse;
}
packages/canon/src/index.ts
-1
View File
@@ -34,5 +34,4 @@ export * from './components/Checkbox';
export * from './components/Table';
// Types
export * from './layout/types';
export * from './types';
packages/canon/src/layout/properties.ts
-43
View File
@@ -1,43 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/** @public */
export const breakpoints = {
xs: {},
sm: { '@media': 'screen and (min-width: 640px)' },
md: { '@media': 'screen and (min-width: 768px)' },
lg: { '@media': 'screen and (min-width: 1024px)' },
xl: { '@media': 'screen and (min-width: 1280px)' },
'2xl': { '@media': 'screen and (min-width: 1536px)' },
};
/** @public */
export const themes = {
light: { selector: '[data-theme="light"] &' },
dark: { selector: '[data-theme="dark"] &' },
};
/** @public */
export const space = {
none: 0,
'2xs': 'var(--canon-spacing-2xs)',
xs: 'var(--canon-spacing-xs)',
sm: 'var(--canon-spacing-sm)',
md: 'var(--canon-spacing-md)',
lg: 'var(--canon-spacing-lg)',
xl: 'var(--canon-spacing-xl)',
'2xl': 'var(--canon-spacing-2xl)',
};
packages/canon/src/layout/sprinkles.css.ts
-63
View File
@@ -1,63 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { defineProperties } from '@vanilla-extract/sprinkles';
import { breakpoints, space } from './properties';
export const spacingProperties = defineProperties({
conditions: breakpoints,
defaultCondition: 'xs',
responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
properties: {
paddingTop: space,
paddingBottom: space,
paddingLeft: space,
paddingRight: space,
marginTop: space,
marginBottom: space,
marginLeft: space,
marginRight: space,
gap: space,
},
shorthands: {
padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
paddingX: ['paddingLeft', 'paddingRight'],
paddingY: ['paddingTop', 'paddingBottom'],
margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
marginX: ['marginLeft', 'marginRight'],
marginY: ['marginTop', 'marginBottom'],
},
});
export const colorProperties = defineProperties({
conditions: {
light: { selector: '[data-theme="light"] &' },
dark: { selector: '[data-theme="dark"] &' },
},
defaultCondition: ['light', 'dark'],
properties: {
color: {
primary: 'var(--canon-text-primary)',
secondary: 'var(--canon-text-secondary)',
error: 'var(--canon-error)',
},
background: {
background: 'var(--canon-background)',
elevation1: 'var(--canon-surface-1)',
elevation2: 'var(--canon-surface-2)',
transparent: 'transparent',
},
},
});
packages/canon/src/layout/types.ts
-126
View File
@@ -1,126 +0,0 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Breakpoint, Space } from '../types';
/** @public */
export type Theme = 'light' | 'dark';
/** @public */
export type Gap = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type PaddingLeft = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type PaddingRight = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type PaddingTop = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type PaddingBottom = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type Padding = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type MarginLeft = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type MarginRight = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type MarginTop = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type MarginBottom = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type Margin = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type MarginX = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export type MarginY = Space | Partial<Record<Breakpoint, Space>>;
/** @public */
export interface SpaceProps {
gap?: Gap;
padding?: Padding;
paddingLeft?: PaddingLeft;
paddingRight?: PaddingRight;
paddingTop?: PaddingTop;
paddingBottom?: PaddingBottom;
paddingX?: PaddingX;
paddingY?: PaddingY;
margin?: Margin;
marginLeft?: MarginLeft;
marginRight?: MarginRight;
marginTop?: MarginTop;
marginBottom?: MarginBottom;
marginX?: MarginX;
marginY?: MarginY;
}
/** @public */
export type Background =
| 'background'
| 'elevation1'
| 'elevation2'
| 'transparent'
| Partial<
Record<Theme, 'background' | 'elevation1' | 'elevation2' | 'transparent'>
>;
/** @public */
export type Color =
| 'primary'
| 'secondary'
| 'error'
| Partial<Record<Theme, 'primary' | 'secondary' | 'error'>>;
/** @public */
export type AsProps =
| 'div'
| 'span'
| 'p'
| 'article'
| 'section'
| 'main'
| 'nav'
| 'aside'
| 'ul'
| 'ol'
| 'li'
| 'details'
| 'summary'
| 'dd'
| 'dl'
| 'dt';
/** @public */
export interface ColorProps {
color?: Color;
background?: Background;
}
packages/canon/src/types.ts
+40 -9
View File
@@ -14,6 +14,25 @@
* limitations under the License.
*/
/** @public */
export type AsProps =
| 'div'
| 'span'
| 'p'
| 'article'
| 'section'
| 'main'
| 'nav'
| 'aside'
| 'ul'
| 'ol'
| 'li'
| 'details'
| 'summary'
| 'dd'
| 'dl'
| 'dt';
/** @public */
export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -56,15 +75,10 @@ export type BorderRadius =
export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
/** @public */
export interface UtilityProps {
alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
border?: Border | Partial<Record<Breakpoint, Border>>;
borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
display?: Display | Partial<Record<Breakpoint, Display>>;
flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
gap?: Space | Partial<Record<Breakpoint, Space>>;
justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
/** @public */
export interface SpaceProps {
margin?: Space | Partial<Record<Breakpoint, Space>>;
marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
@@ -80,3 +94,20 @@ export interface UtilityProps {
paddingX?: Space | Partial<Record<Breakpoint, Space>>;
paddingY?: Space | Partial<Record<Breakpoint, Space>>;
}
/** @public */
export interface UtilityProps extends SpaceProps {
alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
border?: Border | Partial<Record<Breakpoint, Border>>;
borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
columns?: Columns | Partial<Record<Breakpoint, Columns>>;
display?: Display | Partial<Record<Breakpoint, Display>>;
flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
gap?: Space | Partial<Record<Breakpoint, Space>>;
justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
}
packages/canon/src/utils/getClassNames.ts
+111 -35
View File
@@ -13,6 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Breakpoint, UtilityProps } from '../types';
const spaceMap = (type: string) => ({
@@ -27,6 +28,89 @@ const spaceMap = (type: string) => ({
});
const valueMap: Record<string, Record<string, string>> = {
alignItems: {
stretch: 'items-stretch',
start: 'items-start',
center: 'items-center',
end: 'items-end',
},
border: {
none: 'border-none',
base: 'border-base',
error: 'border-error',
warning: 'border-warning',
selected: 'border-selected',
},
borderRadius: {
none: 'rounded-none',
'2xs': 'rounded-2xs',
xs: 'rounded-xs',
sm: 'rounded-sm',
md: 'rounded-md',
lg: 'rounded-lg',
xl: 'rounded-xl',
'2xl': 'rounded-2xl',
},
colEnd: {
1: 'col-end-1',
2: 'col-end-2',
3: 'col-end-3',
4: 'col-end-4',
5: 'col-end-5',
6: 'col-end-6',
7: 'col-end-7',
8: 'col-end-8',
9: 'col-end-9',
10: 'col-end-10',
11: 'col-end-11',
12: 'col-end-12',
auto: 'col-end-auto',
},
colSpan: {
1: 'col-span-1',
2: 'col-span-2',
3: 'col-span-3',
4: 'col-span-4',
5: 'col-span-5',
6: 'col-span-6',
7: 'col-span-7',
8: 'col-span-8',
9: 'col-span-9',
10: 'col-span-10',
11: 'col-span-11',
12: 'col-span-12',
auto: 'col-span-auto',
},
colStart: {
1: 'col-start-1',
2: 'col-start-2',
3: 'col-start-3',
4: 'col-start-4',
5: 'col-start-5',
6: 'col-start-6',
7: 'col-start-7',
8: 'col-start-8',
9: 'col-start-9',
10: 'col-start-10',
11: 'col-start-11',
12: 'col-start-12',
auto: 'col-start-auto',
},
columns: {
1: 'grid-cols-1',
2: 'grid-cols-2',
3: 'grid-cols-3',
4: 'grid-cols-4',
5: 'grid-cols-5',
6: 'grid-cols-6',
7: 'grid-cols-7',
8: 'grid-cols-8',
9: 'grid-cols-9',
10: 'grid-cols-10',
11: 'grid-cols-11',
12: 'grid-cols-12',
auto: 'grid-cols-auto',
},
display: {
none: 'hidden',
flex: 'flex',
@@ -42,6 +126,7 @@ const valueMap: Record<string, Record<string, string>> = {
nowrap: 'flex-nowrap',
'wrap-reverse': 'flex-wrap-reverse',
},
gap: spaceMap('gap'),
justifyContent: {
stretch: 'justify-stretch',
start: 'justify-start',
@@ -50,44 +135,35 @@ const valueMap: Record<string, Record<string, string>> = {
around: 'justify-around',
between: 'justify-between',
},
alignItems: {
stretch: 'items-stretch',
start: 'items-start',
center: 'items-center',
end: 'items-end',
},
borderRadius: {
none: 'rounded-none',
'2xs': 'rounded-2xs',
xs: 'rounded-xs',
sm: 'rounded-sm',
md: 'rounded-md',
lg: 'rounded-lg',
xl: 'rounded-xl',
'2xl': 'rounded-2xl',
},
border: {
none: 'border-none',
base: 'border-base',
error: 'border-error',
warning: 'border-warning',
selected: 'border-selected',
},
padding: spaceMap('p'),
paddingX: spaceMap('px'),
paddingY: spaceMap('py'),
paddingLeft: spaceMap('pl'),
paddingRight: spaceMap('pr'),
paddingTop: spaceMap('pt'),
paddingBottom: spaceMap('pb'),
margin: spaceMap('m'),
marginX: spaceMap('mx'),
marginY: spaceMap('my'),
marginBottom: spaceMap('mb'),
marginLeft: spaceMap('ml'),
marginRight: spaceMap('mr'),
marginTop: spaceMap('mt'),
marginBottom: spaceMap('mb'),
gap: spaceMap('gap'),
marginX: spaceMap('mx'),
marginY: spaceMap('my'),
padding: spaceMap('p'),
paddingBottom: spaceMap('pb'),
paddingLeft: spaceMap('pl'),
paddingRight: spaceMap('pr'),
paddingTop: spaceMap('pt'),
paddingX: spaceMap('px'),
paddingY: spaceMap('py'),
rowSpan: {
1: 'row-span-1',
2: 'row-span-2',
3: 'row-span-3',
4: 'row-span-4',
5: 'row-span-5',
6: 'row-span-6',
7: 'row-span-7',
8: 'row-span-8',
9: 'row-span-9',
10: 'row-span-10',
11: 'row-span-11',
12: 'row-span-12',
full: 'row-span-full',
},
};
const generateClassNames = (propName: string, propValue: any) => {
@@ -98,7 +174,7 @@ const generateClassNames = (propName: string, propValue: any) => {
return classNames;
}
if (typeof propValue === 'string') {
if (typeof propValue === 'string' || typeof propValue === 'number') {
// If the property value is a string, map it to the valueMap
const value = valueMap[propName]?.[propValue] || propValue;
classNames.push(`cu-${value}`);
yarn.lock
+7 -492
View File
@@ -1872,7 +1872,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.19.6, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.7, @babel/core@npm:^7.26.0":
"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.19.6, @babel/core@npm:^7.24.7, @babel/core@npm:^7.26.0":
version: 7.26.0
resolution: "@babel/core@npm:7.26.0"
dependencies:
@@ -2434,7 +2434,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/plugin-syntax-typescript@npm:^7.23.3, @babel/plugin-syntax-typescript@npm:^7.24.7, @babel/plugin-syntax-typescript@npm:^7.7.2":
"@babel/plugin-syntax-typescript@npm:^7.24.7, @babel/plugin-syntax-typescript@npm:^7.7.2":
version: 7.25.9
resolution: "@babel/plugin-syntax-typescript@npm:7.25.9"
dependencies:
@@ -3823,9 +3823,6 @@ __metadata:
"@testing-library/jest-dom": ^6.0.0
"@types/react": ^18.0.0
"@types/react-dom": ^18.0.0
"@vanilla-extract/rollup-plugin": ^1.3.10
"@vanilla-extract/sprinkles": ^1.6.3
"@vanilla-extract/webpack-plugin": ^2.3.14
eslint-plugin-storybook: ^0.11.1
globals: ^15.11.0
mini-css-extract-plugin: ^2.9.2
@@ -3833,7 +3830,6 @@ __metadata:
react-dom: ^18.0.2
react-router-dom: ^6.3.0
storybook: ^8.4.7
webpack-merge: ^6.0.1
peerDependencies:
"@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
react: ^16.13.1 || ^17.0.0 || ^18.0.0
@@ -9028,7 +9024,7 @@ __metadata:
languageName: node
linkType: hard
"@emotion/hash@npm:^0.9.0, @emotion/hash@npm:^0.9.1, @emotion/hash@npm:^0.9.2":
"@emotion/hash@npm:^0.9.1, @emotion/hash@npm:^0.9.2":
version: 0.9.2
resolution: "@emotion/hash@npm:0.9.2"
checksum: 379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387
@@ -9179,13 +9175,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/aix-ppc64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/aix-ppc64@npm:0.23.1"
conditions: os=aix & cpu=ppc64
languageName: node
linkType: hard
"@esbuild/aix-ppc64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/aix-ppc64@npm:0.24.0"
@@ -9200,13 +9189,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/android-arm64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/android-arm64@npm:0.23.1"
conditions: os=android & cpu=arm64
languageName: node
linkType: hard
"@esbuild/android-arm64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/android-arm64@npm:0.24.0"
@@ -9221,13 +9203,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/android-arm@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/android-arm@npm:0.23.1"
conditions: os=android & cpu=arm
languageName: node
linkType: hard
"@esbuild/android-arm@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/android-arm@npm:0.24.0"
@@ -9242,13 +9217,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/android-x64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/android-x64@npm:0.23.1"
conditions: os=android & cpu=x64
languageName: node
linkType: hard
"@esbuild/android-x64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/android-x64@npm:0.24.0"
@@ -9263,13 +9231,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/darwin-arm64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/darwin-arm64@npm:0.23.1"
conditions: os=darwin & cpu=arm64
languageName: node
linkType: hard
"@esbuild/darwin-arm64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/darwin-arm64@npm:0.24.0"
@@ -9284,13 +9245,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/darwin-x64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/darwin-x64@npm:0.23.1"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard
"@esbuild/darwin-x64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/darwin-x64@npm:0.24.0"
@@ -9305,13 +9259,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/freebsd-arm64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/freebsd-arm64@npm:0.23.1"
conditions: os=freebsd & cpu=arm64
languageName: node
linkType: hard
"@esbuild/freebsd-arm64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/freebsd-arm64@npm:0.24.0"
@@ -9326,13 +9273,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/freebsd-x64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/freebsd-x64@npm:0.23.1"
conditions: os=freebsd & cpu=x64
languageName: node
linkType: hard
"@esbuild/freebsd-x64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/freebsd-x64@npm:0.24.0"
@@ -9347,13 +9287,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/linux-arm64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/linux-arm64@npm:0.23.1"
conditions: os=linux & cpu=arm64
languageName: node
linkType: hard
"@esbuild/linux-arm64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/linux-arm64@npm:0.24.0"
@@ -9368,13 +9301,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/linux-arm@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/linux-arm@npm:0.23.1"
conditions: os=linux & cpu=arm
languageName: node
linkType: hard
"@esbuild/linux-arm@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/linux-arm@npm:0.24.0"
@@ -9389,13 +9315,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/linux-ia32@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/linux-ia32@npm:0.23.1"
conditions: os=linux & cpu=ia32
languageName: node
linkType: hard
"@esbuild/linux-ia32@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/linux-ia32@npm:0.24.0"
@@ -9410,13 +9329,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/linux-loong64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/linux-loong64@npm:0.23.1"
conditions: os=linux & cpu=loong64
languageName: node
linkType: hard
"@esbuild/linux-loong64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/linux-loong64@npm:0.24.0"
@@ -9431,13 +9343,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/linux-mips64el@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/linux-mips64el@npm:0.23.1"
conditions: os=linux & cpu=mips64el
languageName: node
linkType: hard
"@esbuild/linux-mips64el@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/linux-mips64el@npm:0.24.0"
@@ -9452,13 +9357,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/linux-ppc64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/linux-ppc64@npm:0.23.1"
conditions: os=linux & cpu=ppc64
languageName: node
linkType: hard
"@esbuild/linux-ppc64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/linux-ppc64@npm:0.24.0"
@@ -9473,13 +9371,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/linux-riscv64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/linux-riscv64@npm:0.23.1"
conditions: os=linux & cpu=riscv64
languageName: node
linkType: hard
"@esbuild/linux-riscv64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/linux-riscv64@npm:0.24.0"
@@ -9494,13 +9385,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/linux-s390x@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/linux-s390x@npm:0.23.1"
conditions: os=linux & cpu=s390x
languageName: node
linkType: hard
"@esbuild/linux-s390x@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/linux-s390x@npm:0.24.0"
@@ -9515,13 +9399,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/linux-x64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/linux-x64@npm:0.23.1"
conditions: os=linux & cpu=x64
languageName: node
linkType: hard
"@esbuild/linux-x64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/linux-x64@npm:0.24.0"
@@ -9536,13 +9413,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/netbsd-x64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/netbsd-x64@npm:0.23.1"
conditions: os=netbsd & cpu=x64
languageName: node
linkType: hard
"@esbuild/netbsd-x64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/netbsd-x64@npm:0.24.0"
@@ -9550,13 +9420,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/openbsd-arm64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/openbsd-arm64@npm:0.23.1"
conditions: os=openbsd & cpu=arm64
languageName: node
linkType: hard
"@esbuild/openbsd-arm64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/openbsd-arm64@npm:0.24.0"
@@ -9571,13 +9434,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/openbsd-x64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/openbsd-x64@npm:0.23.1"
conditions: os=openbsd & cpu=x64
languageName: node
linkType: hard
"@esbuild/openbsd-x64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/openbsd-x64@npm:0.24.0"
@@ -9592,13 +9448,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/sunos-x64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/sunos-x64@npm:0.23.1"
conditions: os=sunos & cpu=x64
languageName: node
linkType: hard
"@esbuild/sunos-x64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/sunos-x64@npm:0.24.0"
@@ -9613,13 +9462,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/win32-arm64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/win32-arm64@npm:0.23.1"
conditions: os=win32 & cpu=arm64
languageName: node
linkType: hard
"@esbuild/win32-arm64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/win32-arm64@npm:0.24.0"
@@ -9634,13 +9476,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/win32-ia32@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/win32-ia32@npm:0.23.1"
conditions: os=win32 & cpu=ia32
languageName: node
linkType: hard
"@esbuild/win32-ia32@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/win32-ia32@npm:0.24.0"
@@ -9655,13 +9490,6 @@ __metadata:
languageName: node
linkType: hard
"@esbuild/win32-x64@npm:0.23.1":
version: 0.23.1
resolution: "@esbuild/win32-x64@npm:0.23.1"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard
"@esbuild/win32-x64@npm:0.24.0":
version: 0.24.0
resolution: "@esbuild/win32-x64@npm:0.24.0"
@@ -20982,96 +20810,6 @@ __metadata:
languageName: node
linkType: hard
"@vanilla-extract/babel-plugin-debug-ids@npm:^1.1.0":
version: 1.1.0
resolution: "@vanilla-extract/babel-plugin-debug-ids@npm:1.1.0"
dependencies:
"@babel/core": ^7.23.9
checksum: b2feec9016ba2dd6740c2ce002d814123f38bf8fc01a6d771eff74ed8108abefdc9d6507e2045587d2a73d8a538ece867e4bfef8c5ccc2b13095a2c825160e7a
languageName: node
linkType: hard
"@vanilla-extract/css@npm:^1.16.1":
version: 1.16.1
resolution: "@vanilla-extract/css@npm:1.16.1"
dependencies:
"@emotion/hash": ^0.9.0
"@vanilla-extract/private": ^1.0.6
css-what: ^6.1.0
cssesc: ^3.0.0
csstype: ^3.0.7
dedent: ^1.5.3
deep-object-diff: ^1.1.9
deepmerge: ^4.2.2
lru-cache: ^10.4.3
media-query-parser: ^2.0.2
modern-ahocorasick: ^1.0.0
picocolors: ^1.0.0
checksum: ff58f32778cbc15458aff951ad771ba46f772d78633ff99f849f590b83a22ce67e017af28351c68c32edcdaae4454146dd90f369842a627ee79dc9c3ab434e1e
languageName: node
linkType: hard
"@vanilla-extract/integration@npm:^7.1.11":
version: 7.1.11
resolution: "@vanilla-extract/integration@npm:7.1.11"
dependencies:
"@babel/core": ^7.23.9
"@babel/plugin-syntax-typescript": ^7.23.3
"@vanilla-extract/babel-plugin-debug-ids": ^1.1.0
"@vanilla-extract/css": ^1.16.1
dedent: ^1.5.3
esbuild: "npm:esbuild@>=0.17.6 <0.24.0"
eval: 0.1.8
find-up: ^5.0.0
javascript-stringify: ^2.0.1
mlly: ^1.4.2
vite: ^5.0.11
vite-node: ^1.2.0
checksum: 23196f388045c0cdaa35bf26cf484ca4423e336026770b743017056aed7704c74c2134b425571eee9c6859ed1a1553a435e4d0c502ff5a78f8dc2c02db00707a
languageName: node
linkType: hard
"@vanilla-extract/private@npm:^1.0.6":
version: 1.0.6
resolution: "@vanilla-extract/private@npm:1.0.6"
checksum: 2265b02af29d8cd40f6ddeeed197fb2df1a7695f5a9821d5e3597677179be8b83bcd8fe4df4a6178544f89123d745a3c6a13599d4fe4e5873b065a8ad329f690
languageName: node
linkType: hard
"@vanilla-extract/rollup-plugin@npm:^1.3.10":
version: 1.3.11
resolution: "@vanilla-extract/rollup-plugin@npm:1.3.11"
dependencies:
"@vanilla-extract/integration": ^7.1.11
peerDependencies:
rollup: ^2.0.0 || ^3.0.0 || ^4.0.0
checksum: 2e38981d156f8db962dedfc64131adbe8bd5ec9236686dccec92f3418d43d658f2f3a5797456f67eeb43ce75dcc84f9593e4f073e0e42c6df31d4e3ba6a59785
languageName: node
linkType: hard
"@vanilla-extract/sprinkles@npm:^1.6.3":
version: 1.6.3
resolution: "@vanilla-extract/sprinkles@npm:1.6.3"
peerDependencies:
"@vanilla-extract/css": ^1.0.0
checksum: 7eb4fe0f1a6048bf5ffb5ffab964c2d127ff95244da79dca2e448af380b591c7af3b4f63ab243584baa8a42c7694d8fe9eeb366587a2da381a481fe1a9e02af8
languageName: node
linkType: hard
"@vanilla-extract/webpack-plugin@npm:^2.3.14":
version: 2.3.15
resolution: "@vanilla-extract/webpack-plugin@npm:2.3.15"
dependencies:
"@vanilla-extract/integration": ^7.1.11
debug: ^4.3.1
loader-utils: ^2.0.0
picocolors: ^1.0.0
peerDependencies:
webpack: ^4.30.0 || ^5.20.2
checksum: 105540377d0eb19f8dafcd2cc2cf893471494d4b82012574d4b70c32351ef78b6107ffaecf188a7a6edc10e70bd2963c4fd13ff16954f8063bb785aab98070dd
languageName: node
linkType: hard
"@vitejs/plugin-react@npm:^4.3.1":
version: 4.3.4
resolution: "@vitejs/plugin-react@npm:4.3.4"
@@ -23951,13 +23689,6 @@ __metadata:
languageName: node
linkType: hard
"cac@npm:^6.7.14":
version: 6.7.14
resolution: "cac@npm:6.7.14"
checksum: 45a2496a9443abbe7f52a49b22fbe51b1905eff46e03fd5e6c98e3f85077be3f8949685a1849b1a9cd2bc3e5567dfebcf64f01ce01847baf918f1b37c839791a
languageName: node
linkType: hard
"cacache@npm:^15.0.3, cacache@npm:^15.0.5, cacache@npm:^15.2.0":
version: 15.3.0
resolution: "cacache@npm:15.3.0"
@@ -25174,13 +24905,6 @@ __metadata:
languageName: node
linkType: hard
"confbox@npm:^0.1.8":
version: 0.1.8
resolution: "confbox@npm:0.1.8"
checksum: 5c7718ab22cf9e35a31c21ef124156076ae8c9dc65e6463d54961caf5a1d529284485a0fdf83fd23b27329f3b75b0c8c07d2e36c699f5151a2efe903343f976a
languageName: node
linkType: hard
"configstore@npm:^5.0.1":
version: 5.0.1
resolution: "configstore@npm:5.0.1"
@@ -25968,7 +25692,7 @@ __metadata:
languageName: node
linkType: hard
"csstype@npm:^3.0.2, csstype@npm:^3.0.7, csstype@npm:^3.1.2, csstype@npm:^3.1.3":
"csstype@npm:^3.0.2, csstype@npm:^3.1.2, csstype@npm:^3.1.3":
version: 3.0.9
resolution: "csstype@npm:3.0.9"
checksum: 199f9af7e673f9f188525c3102a329d637ff46c52f6385a4427ff5cb17adcb736189150170a7af7c5701d18d7704bdad130273f4aa7e44c6c4f9967e6115dc93
@@ -26334,7 +26058,7 @@ __metadata:
languageName: node
linkType: hard
"dedent@npm:^1.0.0, dedent@npm:^1.5.3":
"dedent@npm:^1.0.0":
version: 1.5.3
resolution: "dedent@npm:1.5.3"
peerDependencies:
@@ -26374,13 +26098,6 @@ __metadata:
languageName: node
linkType: hard
"deep-object-diff@npm:^1.1.9":
version: 1.1.9
resolution: "deep-object-diff@npm:1.1.9"
checksum: ecd42455e4773f653595d28070295e7aaa8402db5f8ab21d0bec115a7cb4de5e207a5665514767da5f025c96597f1d3a0a4888aeb4dd49e03c996871a3aa05ef
languageName: node
linkType: hard
"deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1, deepmerge@npm:~4.3.0":
version: 4.3.1
resolution: "deepmerge@npm:4.3.1"
@@ -27754,89 +27471,6 @@ __metadata:
languageName: node
linkType: hard
"esbuild@npm:esbuild@>=0.17.6 <0.24.0":
version: 0.23.1
resolution: "esbuild@npm:0.23.1"
dependencies:
"@esbuild/aix-ppc64": 0.23.1
"@esbuild/android-arm": 0.23.1
"@esbuild/android-arm64": 0.23.1
"@esbuild/android-x64": 0.23.1
"@esbuild/darwin-arm64": 0.23.1
"@esbuild/darwin-x64": 0.23.1
"@esbuild/freebsd-arm64": 0.23.1
"@esbuild/freebsd-x64": 0.23.1
"@esbuild/linux-arm": 0.23.1
"@esbuild/linux-arm64": 0.23.1
"@esbuild/linux-ia32": 0.23.1
"@esbuild/linux-loong64": 0.23.1
"@esbuild/linux-mips64el": 0.23.1
"@esbuild/linux-ppc64": 0.23.1
"@esbuild/linux-riscv64": 0.23.1
"@esbuild/linux-s390x": 0.23.1
"@esbuild/linux-x64": 0.23.1
"@esbuild/netbsd-x64": 0.23.1
"@esbuild/openbsd-arm64": 0.23.1
"@esbuild/openbsd-x64": 0.23.1
"@esbuild/sunos-x64": 0.23.1
"@esbuild/win32-arm64": 0.23.1
"@esbuild/win32-ia32": 0.23.1
"@esbuild/win32-x64": 0.23.1
dependenciesMeta:
"@esbuild/aix-ppc64":
optional: true
"@esbuild/android-arm":
optional: true
"@esbuild/android-arm64":
optional: true
"@esbuild/android-x64":
optional: true
"@esbuild/darwin-arm64":
optional: true
"@esbuild/darwin-x64":
optional: true
"@esbuild/freebsd-arm64":
optional: true
"@esbuild/freebsd-x64":
optional: true
"@esbuild/linux-arm":
optional: true
"@esbuild/linux-arm64":
optional: true
"@esbuild/linux-ia32":
optional: true
"@esbuild/linux-loong64":
optional: true
"@esbuild/linux-mips64el":
optional: true
"@esbuild/linux-ppc64":
optional: true
"@esbuild/linux-riscv64":
optional: true
"@esbuild/linux-s390x":
optional: true
"@esbuild/linux-x64":
optional: true
"@esbuild/netbsd-x64":
optional: true
"@esbuild/openbsd-arm64":
optional: true
"@esbuild/openbsd-x64":
optional: true
"@esbuild/sunos-x64":
optional: true
"@esbuild/win32-arm64":
optional: true
"@esbuild/win32-ia32":
optional: true
"@esbuild/win32-x64":
optional: true
bin:
esbuild: bin/esbuild
checksum: 0413c3b9257327fb598427688b7186ea335bf1693746fe5713cc93c95854d6388b8ed4ad643fddf5b5ace093f7dcd9038dd58e087bf2da1f04dfb4c5571660af
languageName: node
linkType: hard
"escalade@npm:^3.1.1, escalade@npm:^3.2.0":
version: 3.2.0
resolution: "escalade@npm:3.2.0"
@@ -28369,16 +28003,6 @@ __metadata:
languageName: node
linkType: hard
"eval@npm:0.1.8":
version: 0.1.8
resolution: "eval@npm:0.1.8"
dependencies:
"@types/node": "*"
require-like: ">= 0.1.1"
checksum: d005567f394cfbe60948e34982e4637d2665030f9aa7dcac581ea6f9ec6eceb87133ed3dc0ae21764aa362485c242a731dbb6371f1f1a86807c58676431e9d1a
languageName: node
linkType: hard
"event-emitter@npm:^0.3.5":
version: 0.3.5
resolution: "event-emitter@npm:0.3.5"
@@ -29456,15 +29080,6 @@ __metadata:
languageName: node
linkType: hard
"flat@npm:^5.0.2":
version: 5.0.2
resolution: "flat@npm:5.0.2"
bin:
flat: cli.js
checksum: 12a1536ac746db74881316a181499a78ef953632ddd28050b7a3a43c62ef5462e3357c8c29d76072bb635f147f7a9a1f0c02efef6b4be28f8db62ceb3d5c7f5d
languageName: node
linkType: hard
"flatstr@npm:^1.0.12":
version: 1.0.12
resolution: "flatstr@npm:1.0.12"
@@ -32826,13 +32441,6 @@ __metadata:
languageName: node
linkType: hard
"javascript-stringify@npm:^2.0.1":
version: 2.1.0
resolution: "javascript-stringify@npm:2.1.0"
checksum: 009981ec84299da88795fc764221ed213e3d52251cc93a396430a7a02ae09f1163a9be36a36808689681a8e6113cf00fe97ec2eea2552df48111f79be59e9358
languageName: node
linkType: hard
"jest-changed-files@npm:^29.7.0":
version: 29.7.0
resolution: "jest-changed-files@npm:29.7.0"
@@ -35012,7 +34620,7 @@ __metadata:
languageName: node
linkType: hard
"lru-cache@npm:^10.0.0, lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0, lru-cache@npm:^10.4.3":
"lru-cache@npm:^10.0.0, lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
version: 10.4.3
resolution: "lru-cache@npm:10.4.3"
checksum: 6476138d2125387a6d20f100608c2583d415a4f64a0fecf30c9e2dda976614f09cad4baa0842447bd37dd459a7bd27f57d9d8f8ce558805abd487c583f3d774a
@@ -35523,15 +35131,6 @@ __metadata:
languageName: node
linkType: hard
"media-query-parser@npm:^2.0.2":
version: 2.0.2
resolution: "media-query-parser@npm:2.0.2"
dependencies:
"@babel/runtime": ^7.12.5
checksum: 8ef956d9e63fe6f4041988beda69843b3a6bb48228ea2923a066f6e7c8f7c5dba75fae357318c48a97ed5beae840b8425cb7e727fc1bb77acc65f2005f8945ab
languageName: node
linkType: hard
"media-typer@npm:0.3.0":
version: 0.3.0
resolution: "media-typer@npm:0.3.0"
@@ -36478,18 +36077,6 @@ __metadata:
languageName: node
linkType: hard
"mlly@npm:^1.4.2, mlly@npm:^1.7.2":
version: 1.7.3
resolution: "mlly@npm:1.7.3"
dependencies:
acorn: ^8.14.0
pathe: ^1.1.2
pkg-types: ^1.2.1
ufo: ^1.5.4
checksum: 60d309c7ce2ac162224a087fcd683a891260511f57011b2f436b54dfef146b8aae7473013958a58d5b6039f2a8692c32a2599c8390c5b307d1119ad0d917b414
languageName: node
linkType: hard
"mock-socket@npm:^9.3.0":
version: 9.3.1
resolution: "mock-socket@npm:9.3.1"
@@ -36598,13 +36185,6 @@ __metadata:
languageName: node
linkType: hard
"modern-ahocorasick@npm:^1.0.0":
version: 1.1.0
resolution: "modern-ahocorasick@npm:1.1.0"
checksum: 78b99840c9af086c1e36a594ee85bebd8c19d48e2ef31a67d1bad0e673ac12fc931e5961abb5b16daaf820af4923e700f76b1793b7413e18782230162866a0af
languageName: node
linkType: hard
"module-details-from-path@npm:^1.0.3":
version: 1.0.3
resolution: "module-details-from-path@npm:1.0.3"
@@ -38790,13 +38370,6 @@ __metadata:
languageName: node
linkType: hard
"pathe@npm:^1.1.1, pathe@npm:^1.1.2":
version: 1.1.2
resolution: "pathe@npm:1.1.2"
checksum: ec5f778d9790e7b9ffc3e4c1df39a5bb1ce94657a4e3ad830c1276491ca9d79f189f47609884671db173400256b005f4955f7952f52a2aeb5834ad5fb4faf134
languageName: node
linkType: hard
"pathval@npm:^2.0.0":
version: 2.0.0
resolution: "pathval@npm:2.0.0"
@@ -39131,17 +38704,6 @@ __metadata:
languageName: node
linkType: hard
"pkg-types@npm:^1.2.1":
version: 1.2.1
resolution: "pkg-types@npm:1.2.1"
dependencies:
confbox: ^0.1.8
mlly: ^1.7.2
pathe: ^1.1.2
checksum: d2e3ad7aef36cc92b17403e61c04db521bf0beb175ccb4d432c284239f00ec32ff37feb072a260613e9ff727911cff1127a083fd52f91b9bec6b62970f385702
languageName: node
linkType: hard
"pkg-up@npm:^3.1.0":
version: 3.1.0
resolution: "pkg-up@npm:3.1.0"
@@ -41779,13 +41341,6 @@ __metadata:
languageName: node
linkType: hard
"require-like@npm:>= 0.1.1":
version: 0.1.2
resolution: "require-like@npm:0.1.2"
checksum: edb8331f05fd807381a75b76f6cca9f0ce8acaa2e910b7e116541799aa970bfbc64fde5fd6adb3a6917dba346f8386ebbddb81614c24e8dad1b4290c7af9535e
languageName: node
linkType: hard
"requires-port@npm:^1.0.0":
version: 1.0.0
resolution: "requires-port@npm:1.0.0"
@@ -45626,13 +45181,6 @@ __metadata:
languageName: node
linkType: hard
"ufo@npm:^1.5.4":
version: 1.5.4
resolution: "ufo@npm:1.5.4"
checksum: f244703b7d4f9f0df4f9af23921241ab73410b591f4e5b39c23e3147f3159b139a4b1fb5903189c306129f7a16b55995dac0008e0fbae88a37c3e58cbc34d833
languageName: node
linkType: hard
"uglify-js@npm:^3.1.4":
version: 3.17.0
resolution: "uglify-js@npm:3.17.0"
@@ -46532,21 +46080,6 @@ __metadata:
languageName: node
linkType: hard
"vite-node@npm:^1.2.0":
version: 1.6.0
resolution: "vite-node@npm:1.6.0"
dependencies:
cac: ^6.7.14
debug: ^4.3.4
pathe: ^1.1.1
picocolors: ^1.0.0
vite: ^5.0.0
bin:
vite-node: vite-node.mjs
checksum: ce111c5c7a4cf65b722baa15cbc065b7bfdbf1b65576dd6372995f6a72b2b93773ec5df59f6c5f08cfe1284806597b44b832efcea50d5971102428159ff4379f
languageName: node
linkType: hard
"vite-plugin-html@npm:^3.2.2":
version: 3.2.2
resolution: "vite-plugin-html@npm:3.2.2"
@@ -46581,7 +46114,7 @@ __metadata:
languageName: node
linkType: hard
"vite@npm:^5.0.0, vite@npm:^5.0.11":
"vite@npm:^5.0.0":
version: 5.4.11
resolution: "vite@npm:5.4.11"
dependencies:
@@ -46911,17 +46444,6 @@ __metadata:
languageName: node
linkType: hard
"webpack-merge@npm:^6.0.1":
version: 6.0.1
resolution: "webpack-merge@npm:6.0.1"
dependencies:
clone-deep: ^4.0.1
flat: ^5.0.2
wildcard: ^2.0.1
checksum: e8a604c686b944605a1c57cc7b75e886ab902dc5ffdd15259a092c5c2dd5f58868fe39f995ea4bad4f189e38843b061c4ae1eb22822d7169813f4adab571dc3d
languageName: node
linkType: hard
"webpack-sources@npm:^1.4.3":
version: 1.4.3
resolution: "webpack-sources@npm:1.4.3"
@@ -47192,13 +46714,6 @@ __metadata:
languageName: node
linkType: hard
"wildcard@npm:^2.0.1":
version: 2.0.1
resolution: "wildcard@npm:2.0.1"
checksum: e0c60a12a219e4b12065d1199802d81c27b841ed6ad6d9d28240980c73ceec6f856771d575af367cbec2982d9ae7838759168b551776577f155044f5a5ba843c
languageName: node
linkType: hard
"winston-transport@npm:^4.5.0, winston-transport@npm:^4.7.0":
version: 4.8.0
resolution: "winston-transport@npm:4.8.0"