diff --git a/packages/canon/.eslintrc.js b/packages/canon/.eslintrc.js index 85e103c8f1..f7c0e8cbd1 100644 --- a/packages/canon/.eslintrc.js +++ b/packages/canon/.eslintrc.js @@ -1,4 +1,8 @@ -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname), { +module.exports = { + ...require('@backstage/cli/config/eslint-factory')(__dirname), extends: ['plugin:storybook/recommended'], + rules: { + 'react/forbid-elements': 'off', + }, }; diff --git a/packages/canon/docs/components/chip/chip.css.ts b/packages/canon/docs/components/chip/chip.css.ts index 72ca8bb5fb..027a722f84 100644 --- a/packages/canon/docs/components/chip/chip.css.ts +++ b/packages/canon/docs/components/chip/chip.css.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { recipe } from '@vanilla-extract/recipes'; export const chipStyles = recipe({ diff --git a/packages/canon/docs/components/chip/index.tsx b/packages/canon/docs/components/chip/index.tsx index 88030498d8..81609dda61 100644 --- a/packages/canon/docs/components/chip/index.tsx +++ b/packages/canon/docs/components/chip/index.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import { chipStyles } from './chip.css'; diff --git a/packages/canon/docs/components/columns/columns.css.ts b/packages/canon/docs/components/columns/columns.css.ts index 09aa562568..6efe97c349 100644 --- a/packages/canon/docs/components/columns/columns.css.ts +++ b/packages/canon/docs/components/columns/columns.css.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { style } from '@vanilla-extract/css'; export const styles = style({ diff --git a/packages/canon/docs/components/columns/index.tsx b/packages/canon/docs/components/columns/index.tsx index 07ff311821..0d6f27f04d 100644 --- a/packages/canon/docs/components/columns/index.tsx +++ b/packages/canon/docs/components/columns/index.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import { styles } from './columns.css'; diff --git a/packages/canon/docs/components/component-status/component-status.css.ts b/packages/canon/docs/components/component-status/component-status.css.ts index 213e13188b..eeb58865ff 100644 --- a/packages/canon/docs/components/component-status/component-status.css.ts +++ b/packages/canon/docs/components/component-status/component-status.css.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { style } from '@vanilla-extract/css'; import { recipe } from '@vanilla-extract/recipes'; diff --git a/packages/canon/docs/components/component-status/index.tsx b/packages/canon/docs/components/component-status/index.tsx index 93d53341d9..2444fcdc16 100644 --- a/packages/canon/docs/components/component-status/index.tsx +++ b/packages/canon/docs/components/component-status/index.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import { container, pill, title } from './component-status.css'; diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts index f4c3ec3001..c8a02b67ce 100644 --- a/packages/canon/docs/components/index.ts +++ b/packages/canon/docs/components/index.ts @@ -1,3 +1,19 @@ +/* + * 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. + */ + export * from './chip'; export * from './table'; export * from './title'; diff --git a/packages/canon/docs/components/layout-components/index.tsx b/packages/canon/docs/components/layout-components/index.tsx index b819955d76..9e0b039684 100644 --- a/packages/canon/docs/components/layout-components/index.tsx +++ b/packages/canon/docs/components/layout-components/index.tsx @@ -1,3 +1,19 @@ +/* + * 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 React from 'react'; import { container, diff --git a/packages/canon/docs/components/layout-components/layout-components.css.ts b/packages/canon/docs/components/layout-components/layout-components.css.ts index 7b56964eac..a8440dd01f 100644 --- a/packages/canon/docs/components/layout-components/layout-components.css.ts +++ b/packages/canon/docs/components/layout-components/layout-components.css.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { style } from '@vanilla-extract/css'; export const container = style({ diff --git a/packages/canon/docs/components/table/index.tsx b/packages/canon/docs/components/table/index.tsx index 1aaa3814cf..ead30985aa 100644 --- a/packages/canon/docs/components/table/index.tsx +++ b/packages/canon/docs/components/table/index.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import { cellStyles, diff --git a/packages/canon/docs/components/table/table.css.ts b/packages/canon/docs/components/table/table.css.ts index 75a1f70446..b01373ee04 100644 --- a/packages/canon/docs/components/table/table.css.ts +++ b/packages/canon/docs/components/table/table.css.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { style, globalStyle } from '@vanilla-extract/css'; export const wrapperStyles = style({ diff --git a/packages/canon/docs/components/text/index.tsx b/packages/canon/docs/components/text/index.tsx index 875608a9ae..be882c0a81 100644 --- a/packages/canon/docs/components/text/index.tsx +++ b/packages/canon/docs/components/text/index.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import { textStyles } from './text.css'; diff --git a/packages/canon/docs/components/text/text.css.ts b/packages/canon/docs/components/text/text.css.ts index 85fe7a12bc..01b4cb8fc8 100644 --- a/packages/canon/docs/components/text/text.css.ts +++ b/packages/canon/docs/components/text/text.css.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { globalStyle, style } from '@vanilla-extract/css'; export const textStyles = style({ diff --git a/packages/canon/docs/components/title/index.tsx b/packages/canon/docs/components/title/index.tsx index 8c43293990..13e5b964bb 100644 --- a/packages/canon/docs/components/title/index.tsx +++ b/packages/canon/docs/components/title/index.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import { titleStyles } from './title.css'; diff --git a/packages/canon/docs/components/title/title.css.ts b/packages/canon/docs/components/title/title.css.ts index cba02ddbc3..5ca0394af6 100644 --- a/packages/canon/docs/components/title/title.css.ts +++ b/packages/canon/docs/components/title/title.css.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { recipe } from '@vanilla-extract/recipes'; export const titleStyles = recipe({ diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 818a6e4e61..4cf5ac8869 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -12,8 +12,6 @@ import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { ResponsiveArray } from '@vanilla-extract/sprinkles'; -// Warning: (ae-missing-release-tag) "Box" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export const Box: ({ as, @@ -28,18 +26,2558 @@ export const Box: ({ string | JSXElementConstructor >; -// Warning: (ae-forgotten-export) The symbol "Sprinkles" needs to be exported by the entry point index.d.ts -// Warning: (ae-forgotten-export) The symbol "HTMLProperties" needs to be exported by the entry point index.d.ts -// Warning: (ae-missing-release-tag) "BoxProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export type BoxProps = Sprinkles & - HTMLProperties & { +// @public +export type BoxProps = Parameters[0] & + Omit< + React.AllHTMLAttributes, + keyof Parameters[0] + > & { as?: keyof JSX.IntrinsicElements; }; -// Warning: (ae-missing-release-tag) "Button" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// +// @public (undocumented) +export const boxSprinkles: (( + props: { + flexDirection?: + | ( + | 'column' + | 'row' + | { + xs?: 'column' | 'row' | undefined; + sm?: 'column' | 'row' | undefined; + md?: 'column' | 'row' | undefined; + lg?: 'column' | 'row' | undefined; + xl?: 'column' | 'row' | undefined; + '2xl'?: 'column' | 'row' | undefined; + } + | undefined + ) + | ResponsiveArray<2 | 1 | 3 | 4 | 5 | 6, 'column' | 'row' | null>; + justifyContent?: + | ( + | 'center' + | 'space-around' + | 'space-between' + | 'stretch' + | 'flex-end' + | 'flex-start' + | { + xs?: + | 'center' + | 'space-around' + | 'space-between' + | 'stretch' + | 'flex-end' + | 'flex-start' + | undefined; + sm?: + | 'center' + | 'space-around' + | 'space-between' + | 'stretch' + | 'flex-end' + | 'flex-start' + | undefined; + md?: + | 'center' + | 'space-around' + | 'space-between' + | 'stretch' + | 'flex-end' + | 'flex-start' + | undefined; + lg?: + | 'center' + | 'space-around' + | 'space-between' + | 'stretch' + | 'flex-end' + | 'flex-start' + | undefined; + xl?: + | 'center' + | 'space-around' + | 'space-between' + | 'stretch' + | 'flex-end' + | 'flex-start' + | undefined; + '2xl'?: + | 'center' + | 'space-around' + | 'space-between' + | 'stretch' + | 'flex-end' + | 'flex-start' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + | 'center' + | 'space-around' + | 'space-between' + | 'stretch' + | 'flex-end' + | 'flex-start' + | null + >; + alignItems?: + | ( + | 'center' + | 'stretch' + | 'flex-end' + | 'flex-start' + | { + xs?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; + sm?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; + md?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; + lg?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; + xl?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; + '2xl'?: + | 'center' + | 'stretch' + | 'flex-end' + | 'flex-start' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'center' | 'stretch' | 'flex-end' | 'flex-start' | null + >; + borderRadius?: + | ( + | 'small' + | 'none' + | 'medium' + | 'full' + | { + xs?: 'small' | 'none' | 'medium' | 'full' | undefined; + sm?: 'small' | 'none' | 'medium' | 'full' | undefined; + md?: 'small' | 'none' | 'medium' | 'full' | undefined; + lg?: 'small' | 'none' | 'medium' | 'full' | undefined; + xl?: 'small' | 'none' | 'medium' | 'full' | undefined; + '2xl'?: 'small' | 'none' | 'medium' | 'full' | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'small' | 'none' | 'medium' | 'full' | null + >; + boxShadow?: + | ( + | 'small' + | 'medium' + | 'large' + | { + xs?: 'small' | 'medium' | 'large' | undefined; + sm?: 'small' | 'medium' | 'large' | undefined; + md?: 'small' | 'medium' | 'large' | undefined; + lg?: 'small' | 'medium' | 'large' | undefined; + xl?: 'small' | 'medium' | 'large' | undefined; + '2xl'?: 'small' | 'medium' | 'large' | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'small' | 'medium' | 'large' | null + >; + border?: + | ( + | 'none' + | 'error' + | 'thin' + | { + xs?: 'none' | 'error' | 'thin' | undefined; + sm?: 'none' | 'error' | 'thin' | undefined; + md?: 'none' | 'error' | 'thin' | undefined; + lg?: 'none' | 'error' | 'thin' | undefined; + xl?: 'none' | 'error' | 'thin' | undefined; + '2xl'?: 'none' | 'error' | 'thin' | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'error' | 'thin' | null + >; + display?: + | ( + | 'flex' + | 'inline' + | 'none' + | 'block' + | { + xs?: 'flex' | 'inline' | 'none' | 'block' | undefined; + sm?: 'flex' | 'inline' | 'none' | 'block' | undefined; + md?: 'flex' | 'inline' | 'none' | 'block' | undefined; + lg?: 'flex' | 'inline' | 'none' | 'block' | undefined; + xl?: 'flex' | 'inline' | 'none' | 'block' | undefined; + '2xl'?: 'flex' | 'inline' | 'none' | 'block' | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'flex' | 'inline' | 'none' | 'block' | null + >; + paddingTop?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + paddingBottom?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + paddingLeft?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + paddingRight?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + marginTop?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + marginBottom?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + marginLeft?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + marginRight?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + gap?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + flexWrap?: + | ( + | 'wrap' + | 'nowrap' + | { + xs?: 'wrap' | 'nowrap' | undefined; + sm?: 'wrap' | 'nowrap' | undefined; + md?: 'wrap' | 'nowrap' | undefined; + lg?: 'wrap' | 'nowrap' | undefined; + xl?: 'wrap' | 'nowrap' | undefined; + '2xl'?: 'wrap' | 'nowrap' | undefined; + } + | undefined + ) + | ResponsiveArray<2 | 1 | 3 | 4 | 5 | 6, 'wrap' | 'nowrap' | null>; + padding?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + paddingX?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + paddingY?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + p?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + pt?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + pr?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + pb?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + pl?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + px?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + py?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + margin?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + marginX?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + marginY?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + m?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + mt?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + mr?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + mb?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + ml?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + mx?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + my?: + | ( + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | { + xs?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + sm?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + md?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + lg?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + xl?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + '2xl'?: + | 'none' + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | 'xxs' + | 'xxl' + | undefined; + } + | undefined + ) + | ResponsiveArray< + 2 | 1 | 3 | 4 | 5 | 6, + 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null + >; + } & { + color?: + | 'error' + | 'primary' + | 'secondary' + | { + light?: 'error' | 'primary' | 'secondary' | undefined; + dark?: 'error' | 'primary' | 'secondary' | undefined; + } + | undefined; + background?: + | 'transparent' + | 'background' + | 'elevation1' + | 'elevation2' + | { + light?: + | 'transparent' + | 'background' + | 'elevation1' + | 'elevation2' + | undefined; + dark?: + | 'transparent' + | 'background' + | 'elevation1' + | 'elevation2' + | undefined; + } + | undefined; + }, +) => string) & { + properties: Set< + | 'alignItems' + | 'background' + | 'border' + | 'borderRadius' + | 'boxShadow' + | 'color' + | 'display' + | 'flexDirection' + | 'flexWrap' + | 'gap' + | 'justifyContent' + | 'margin' + | 'marginBottom' + | 'marginLeft' + | 'marginRight' + | 'marginTop' + | 'padding' + | 'paddingBottom' + | 'paddingLeft' + | 'paddingRight' + | 'paddingTop' + | 'p' + | 'm' + | 'mt' + | 'mr' + | 'mb' + | 'ml' + | 'mx' + | 'my' + | 'pt' + | 'pr' + | 'pb' + | 'pl' + | 'px' + | 'py' + | 'marginX' + | 'marginY' + | 'paddingX' + | 'paddingY' + >; +}; + // @public (undocumented) export const Button: ({ size, @@ -51,9 +2589,7 @@ export const Button: ({ ...props }: ButtonProps) => React_2.JSX.Element; -// Warning: (ae-missing-release-tag) "ButtonProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) +// @public export interface ButtonProps { // (undocumented) children: React_2.ReactNode; @@ -69,13 +2605,9 @@ export interface ButtonProps { variant?: 'primary' | 'secondary'; } -// Warning: (ae-missing-release-tag) "Icon" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export const Icon: ({ name }: { name: IconNames }) => React_2.JSX.Element; -// Warning: (ae-missing-release-tag) "IconNames" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export type IconNames = | 'ArrowDown' @@ -85,26 +2617,14 @@ export type IconNames = | 'Cloud' | 'CustomIcon'; -// Warning: (ae-missing-release-tag) "IconProvider" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export const IconProvider: ({ children, overrides, }: { children: ReactNode; - overrides: IconMap; + overrides: Partial>; }) => React_2.JSX.Element; -// Warning: (ae-forgotten-export) The symbol "IconContextProps" needs to be exported by the entry point index.d.ts -// Warning: (ae-missing-release-tag) "useIcons" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export const useIcons: () => IconContextProps; - -// Warnings were encountered during analysis: -// -// src/components/icon/context.d.ts:9:5 - (ae-forgotten-export) The symbol "IconMap" needs to be exported by the entry point index.d.ts - // (No @packageDocumentation comment for this package) ``` diff --git a/packages/canon/src/components/box/box.css.ts b/packages/canon/src/components/box/box.css.ts index 858ed8bec6..92af783eec 100644 --- a/packages/canon/src/components/box/box.css.ts +++ b/packages/canon/src/components/box/box.css.ts @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { style } from '@vanilla-extract/css'; export const base = style({ diff --git a/packages/canon/src/components/box/box.tsx b/packages/canon/src/components/box/box.tsx index 1dd722d3ad..ebb081039f 100644 --- a/packages/canon/src/components/box/box.tsx +++ b/packages/canon/src/components/box/box.tsx @@ -13,36 +13,45 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { createElement } from 'react'; -import { sprinkles, Sprinkles } from './sprinkles.css'; +import { boxSprinkles } from './sprinkles.css'; import { base } from './box.css'; -type HTMLProperties = Omit< - React.AllHTMLAttributes, - keyof Sprinkles ->; - -export type BoxProps = Sprinkles & - HTMLProperties & { +/** + * Properties for {@link Box} + * + * @public + */ +export type BoxProps = Parameters[0] & + Omit< + React.AllHTMLAttributes, + keyof Parameters[0] + > & { as?: keyof JSX.IntrinsicElements; }; +/** @public */ export const Box = ({ as = 'div', className, style, ...props }: BoxProps) => { - const sprinklesProps: Record = {}; + const boxSprinklesProps: Record = {}; const nativeProps: Record = {}; // Split props between sprinkles and native HTML props Object.entries(props).forEach(([key, value]) => { if (value === undefined) return; - if (sprinkles.properties.has(key as keyof Sprinkles)) { - sprinklesProps[key] = value; + if ( + boxSprinkles.properties.has( + key as keyof Parameters[0], + ) + ) { + boxSprinklesProps[key] = value; } else { nativeProps[key] = value; } }); - const sprinklesClassName = sprinkles(sprinklesProps); + const sprinklesClassName = boxSprinkles(boxSprinklesProps); return createElement(as, { className: [base, sprinklesClassName, className].filter(Boolean).join(' '), diff --git a/packages/canon/src/components/box/docs/padding.tsx b/packages/canon/src/components/box/docs/padding.tsx index 189846c39a..4348a6facc 100644 --- a/packages/canon/src/components/box/docs/padding.tsx +++ b/packages/canon/src/components/box/docs/padding.tsx @@ -1,3 +1,19 @@ +/* + * 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 React from 'react'; import { Stack } from '../../stack/stack'; import { Inline } from '../../inline/inline'; diff --git a/packages/canon/src/components/box/docs/props-table.tsx b/packages/canon/src/components/box/docs/props-table.tsx index 13382c83d0..3d11f0faa3 100644 --- a/packages/canon/src/components/box/docs/props-table.tsx +++ b/packages/canon/src/components/box/docs/props-table.tsx @@ -1,3 +1,19 @@ +/* + * 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 React from 'react'; import * as Table from '../../../../docs/components'; import { Chip } from '../../../../docs/components'; diff --git a/packages/canon/src/components/box/index.tsx b/packages/canon/src/components/box/index.tsx new file mode 100644 index 0000000000..a1e8b97916 --- /dev/null +++ b/packages/canon/src/components/box/index.tsx @@ -0,0 +1,18 @@ +/* + * 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. + */ +export { Box } from './box'; +export type { BoxProps } from './box'; +export { boxSprinkles } from './sprinkles.css'; diff --git a/packages/canon/src/components/box/properties.ts b/packages/canon/src/components/box/properties.ts index 96d75e4ef8..ccf6849976 100644 --- a/packages/canon/src/components/box/properties.ts +++ b/packages/canon/src/components/box/properties.ts @@ -1,3 +1,19 @@ +/* + * 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. + */ + export const breakpoints = { xs: {}, sm: { '@media': 'screen and (min-width: 640px)' }, diff --git a/packages/canon/src/components/box/sprinkles.css.ts b/packages/canon/src/components/box/sprinkles.css.ts index e8bcc8af15..b5392d407b 100644 --- a/packages/canon/src/components/box/sprinkles.css.ts +++ b/packages/canon/src/components/box/sprinkles.css.ts @@ -111,10 +111,11 @@ export const colorProperties = defineProperties({ }, }); -export const sprinkles = createSprinkles(responsiveProperties, colorProperties); - -// It's a good idea to export the Sprinkles type too -export type Sprinkles = Parameters[0]; +/** @public */ +export const boxSprinkles = createSprinkles( + responsiveProperties, + colorProperties, +); export type OptionalResponsiveValue = ConditionalValue; diff --git a/packages/canon/src/components/button/button.css.ts b/packages/canon/src/components/button/button.css.ts index e3882831f6..9d6c8867c3 100644 --- a/packages/canon/src/components/button/button.css.ts +++ b/packages/canon/src/components/button/button.css.ts @@ -13,8 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { recipe } from '@vanilla-extract/recipes'; -// import { vars } from '../../theme/themes.css'; export const button = recipe({ base: { diff --git a/packages/canon/src/components/button/button.stories.tsx b/packages/canon/src/components/button/button.stories.tsx index b979b92022..47a689fb9f 100644 --- a/packages/canon/src/components/button/button.stories.tsx +++ b/packages/canon/src/components/button/button.stories.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './button'; diff --git a/packages/canon/src/components/button/button.tsx b/packages/canon/src/components/button/button.tsx index 9209424cc4..23286025a2 100644 --- a/packages/canon/src/components/button/button.tsx +++ b/packages/canon/src/components/button/button.tsx @@ -13,12 +13,18 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import { button } from './button.css'; import { Box } from '../box/box'; import { Icon } from '../icon/icon'; import { IconNames } from '../icon/context'; +/** + * Properties for {@link Button} + * + * @public + */ export interface ButtonProps { size?: 'small' | 'medium'; variant?: 'primary' | 'secondary'; @@ -28,6 +34,7 @@ export interface ButtonProps { iconEnd?: IconNames; } +/** @public */ export const Button = ({ size = 'medium', variant = 'primary', diff --git a/packages/canon/src/components/button/index.tsx b/packages/canon/src/components/button/index.tsx new file mode 100644 index 0000000000..d9e8a4155c --- /dev/null +++ b/packages/canon/src/components/button/index.tsx @@ -0,0 +1,17 @@ +/* + * 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. + */ +export { Button } from './button'; +export type { ButtonProps } from './button'; diff --git a/packages/canon/src/components/button/styles.css b/packages/canon/src/components/button/styles.css index c308af07cb..766390a862 100644 --- a/packages/canon/src/components/button/styles.css +++ b/packages/canon/src/components/button/styles.css @@ -1,3 +1,19 @@ +/* + * 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. + */ + :root { --button-primary-background-color: #1ed760; --button-primary-background-color-hover: #3be477; diff --git a/packages/canon/src/components/icon/context.tsx b/packages/canon/src/components/icon/context.tsx index 732d62b9c6..0cfc6252d7 100644 --- a/packages/canon/src/components/icon/context.tsx +++ b/packages/canon/src/components/icon/context.tsx @@ -1,8 +1,25 @@ +/* + * 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 React, { createContext, useContext, ReactNode } from 'react'; import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Cloud } from 'lucide-react'; import { CustomIcon } from './custom-icon'; // List of icons available that can also be overridden. +/** @public */ export type IconNames = | 'ArrowDown' | 'ArrowLeft' @@ -29,12 +46,13 @@ const defaultIcons: IconMap = { const IconContext = createContext({ icons: defaultIcons }); +/** @public */ export const IconProvider = ({ children, overrides, }: { children: ReactNode; - overrides: IconMap; + overrides: Partial>; }) => { // Merge provided overrides with default icons const combinedIcons = { ...defaultIcons, ...overrides }; @@ -46,4 +64,5 @@ export const IconProvider = ({ ); }; +/** @public */ export const useIcons = () => useContext(IconContext); diff --git a/packages/canon/src/components/icon/custom-icon.tsx b/packages/canon/src/components/icon/custom-icon.tsx index 2b190b6ade..27c3fd4517 100644 --- a/packages/canon/src/components/icon/custom-icon.tsx +++ b/packages/canon/src/components/icon/custom-icon.tsx @@ -1,3 +1,19 @@ +/* + * 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 React from 'react'; export const CustomIcon = () => ( diff --git a/packages/canon/src/components/icon/icon.stories.tsx b/packages/canon/src/components/icon/icon.stories.tsx index 70c6fbefcf..4e54c4b67a 100644 --- a/packages/canon/src/components/icon/icon.stories.tsx +++ b/packages/canon/src/components/icon/icon.stories.tsx @@ -1,3 +1,19 @@ +/* + * 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 React from 'react'; import { Meta, StoryObj } from '@storybook/react'; import { Icon } from './icon'; diff --git a/packages/canon/src/components/icon/icon.tsx b/packages/canon/src/components/icon/icon.tsx index 2a6ca449ca..9bed7f1055 100644 --- a/packages/canon/src/components/icon/icon.tsx +++ b/packages/canon/src/components/icon/icon.tsx @@ -1,6 +1,23 @@ +/* + * 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 React from 'react'; import { useIcons, IconNames } from './context'; +/** @public */ export const Icon = ({ name }: { name: IconNames }) => { const { icons } = useIcons(); diff --git a/packages/canon/src/components/icon/index.tsx b/packages/canon/src/components/icon/index.tsx index 7ae853ecbf..22106adcc7 100644 --- a/packages/canon/src/components/icon/index.tsx +++ b/packages/canon/src/components/icon/index.tsx @@ -1,2 +1,19 @@ +/* + * 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. + */ + export * from './icon'; -export * from './context'; +export { IconProvider } from './context'; +export type { IconNames } from './context'; diff --git a/packages/canon/src/components/inline/inline.stories.tsx b/packages/canon/src/components/inline/inline.stories.tsx index 863e6ce3f0..a803cfc80e 100644 --- a/packages/canon/src/components/inline/inline.stories.tsx +++ b/packages/canon/src/components/inline/inline.stories.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Inline } from './inline'; diff --git a/packages/canon/src/components/stack/stack.stories.tsx b/packages/canon/src/components/stack/stack.stories.tsx index 7595f5020a..c1a349e3c8 100644 --- a/packages/canon/src/components/stack/stack.stories.tsx +++ b/packages/canon/src/components/stack/stack.stories.tsx @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Stack } from './stack'; diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts index 00637cb154..85b6be2bc0 100644 --- a/packages/canon/src/index.ts +++ b/packages/canon/src/index.ts @@ -15,6 +15,6 @@ */ // Components -export * from './components/button/button'; -export * from './components/box/box'; +export * from './components/button'; +export * from './components/box'; export * from './components/icon'; diff --git a/packages/canon/src/theme/styles.css b/packages/canon/src/theme/styles.css index 784fda6440..5dadf7d3df 100644 --- a/packages/canon/src/theme/styles.css +++ b/packages/canon/src/theme/styles.css @@ -6,6 +6,12 @@ * 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. */ /* Geist font */ diff --git a/packages/canon/src/theme/theme.css b/packages/canon/src/theme/theme.css index e435a53091..7a7f440252 100644 --- a/packages/canon/src/theme/theme.css +++ b/packages/canon/src/theme/theme.css @@ -1,3 +1,19 @@ +/* + * 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. + */ + /* Light theme */ :root { --canon-accent: #1ed760; diff --git a/packages/canon/src/utils/align.ts b/packages/canon/src/utils/align.ts index bee9b35e01..87dee10bd0 100644 --- a/packages/canon/src/utils/align.ts +++ b/packages/canon/src/utils/align.ts @@ -1,3 +1,19 @@ +/* + * 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 OptionalResponsiveValue, mapResponsiveValue, diff --git a/packages/canon/src/utils/list-values.ts b/packages/canon/src/utils/list-values.ts index 31ccc7e0ed..a2649334f8 100644 --- a/packages/canon/src/utils/list-values.ts +++ b/packages/canon/src/utils/list-values.ts @@ -1,3 +1,19 @@ +/* + * 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 { responsiveProperties, colorProperties,