@rbxts/uiblox 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Brandon LaRouche
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,263 @@
+<img src=docs/logo.png width=60%>
+
+# uiblox-rbxts
+
+> This package is a work in progress.
+
+UI library and theming for roblox-ts projects.
+
+## Background
+
+Roblox has their own internal design system, coined "uiblox-web", that it uses for its new
+web-facing products. This system offers reusable components, implemented in
+React Typescript, that are derived from material UI (MUI). As well, it offers a
+common theme/pallete for consistent UI/UX.
+
+Anyone is able to view their design system as
+[UIBlox-Web](https://uiblox.roblox.com). You can see that they leverage
+[Storybook](https://storybook.js.org), a UI component explorer for frontend
+developers, to render component previews.
+
+Design systems all help engineers cut down on implementation time and ensure
+consitent UX across products.
+
+## Overview
+
+So what is uiblox-rbxts? Simply put, its my stab at a design system that mimics
+uiblox-web for games written using roblox-ts.
+
+UIBlox-rbxts aims to provide extensible components that can be reusable by
+anyone who installs this npm package. It also offers a theme and styling system
+that aids UI/UX consistentency.
+
+How does it do this? Well, there are two main exports from this package:
+
+- @rbxts/uiblox -> theme
+  - An extensible Theme type + default Dark (default) and Light themes
+    - ... Light theme palette is a WIP
+  - makeStyles/createStyles utilities to serve up Instance-extended property
+    tables that can be applied to your Roact Components
+  - ThemeProvider which can wrap your application and uses Rodux to tell
+    sub-components which theme to style off of (via makeStyles)
+    - Uses Rodux
+- @rbxts/uiblox -> ui
+  - Packaged and reusable typed Roact components
+
+# How to use
+
+### Installation
+
+Install the package to get started.
+
+`npm install @rbxts/uiblox`
+
+## Example
+
+Below is an example usage of how you could use ThemeProvider,
+makeStyles/createStyles, and a Button component. This is just an example of how
+to mount and configure your UI -- you can set things up however you want (so
+long as it works...).
+
+### Shared
+
+You can house all of your components within shared.
+
+#### src/shared/ui/app/App.tsx
+
+The top-level class for our UI. Loads the actual ApplLayout into ScreenGui. This
+is what we later pass to `Roact.mount()`.
+
+```javascript
+import Roact, { Component } from "@rbxts/roact";
+
+class App extends Component {
+  render() {
+    return (
+      <screengui IgnoreGuiInset ZIndexBehavior={Enum.ZIndexBehavior.Global}>
+        <AppLayout />
+      </screengui>
+    );
+  }
+}
+
+export default App;
+```
+
+#### src/shared/ui/app/AppLayout.tsx
+
+Start actually adding in components to render, but wrap them in a
+`ThemeProvider`. Here I just use DarkTheme, which is also exported as
+DefaultTheme. If no theme is provided, it would use DarkTheme anyways. If the
+theme prop changes, then sub-components will be re-rendered with the new theme.
+
+You can also choose to create your own theme with the `Theme` interface exported
+from `@rbxts/uiblox`.
+
+```javascript
+import Roact, { Component } from "@rbxts/roact";
+import { Storyblox } from "shared/ui/storyblox";
+import { DarkTheme, ThemeProvider } from "@rbxts/uiblox";
+import usePageLayoutStyles from "./PageLayout.styles";
+
+class AppLayout extends Component {
+  render() {
+    return (
+      <ThemeProvider theme={DarkTheme}>
+        <frame
+          Key={"AppLayout"}
+          Size={new UDim2(1, 0, 1, 0)}
+          BackgroundTransparency={1}
+        >
+          <MyComponent />
+        </frame>
+      </ThemeProvider>
+    );
+  }
+}
+
+export default AppLayout;
+```
+
+#### src/shared/ui/myComponent/MyComponent.tsx
+
+My actual component. Just loads a dummy button and passes props to be used to
+make styles.
+
+If you omit the props type from myStyles usage in the styles file,
+then you can omit props without a type warning (i.e. `makeStyles(theme => {})`
+instead of `makeStyles<MyComponentProps>((theme, props) => {})`).
+
+```javascript
+import Roact from "@rbxts/roact";
+import { useState } from "@rbxts/roact-hooked";
+import useMyComponentStyles from "./MyComponent.styles";
+import { Button } from "@rbxts/uiblox";
+
+export interface MyComponentProps {
+  title?: string;
+  bolded?: boolean;
+  transparent?: boolean;
+}
+
+// Hooked components are very handy
+const MyComponent =
+  hooked <
+  MyComponentProps >
+  ((props) => {
+    const { title, bolded = false } = props;
+    const { root, button } = useMyComponentStyles(props);
+
+    return (
+      <frame Key="MyComponent" {...root}>
+        <Button
+          variant="outlined"
+          text={title}
+          size="small"
+          color="secondary"
+          family={bolded ? "bold" : "default"}
+          className={button}
+        ></Button>
+      </frame>
+    );
+  });
+
+export default MyComponent;
+```
+
+#### src/shared/ui/myComponent/MyComponent.styles.ts
+
+Actually compute styles based on theme and props. You can simplify the arrow
+function if you do not care about props and just directly return `createStyles`.
+
+For more complex dendencies, you'd likely use some helper methods within the
+arrow function of `makeStyles` (i.e. `makeRootStyles()`).
+
+Make sure that the type given to each style matches the component it will be
+applied to (i.e. `frameStyles: { ... } as WriteableStyle<Frame>` =>
+`<frame {...frameStyles} />`).
+
+```javascript
+import { createStyles, Icons, makeStyles, ROBLOX_UI_OFFSET, Theme, WriteableStyle } from "@rbxts/uiblox";
+import { MyComponentProps } from "./MyComponent";
+
+const useMyComponentStyles = makeStyles<MyComponentProps>((theme: Theme, props: MyComponentProps) => {
+  const { transparent = false } = props; // Defaults to false
+  const transparency = transparent ? 1 : 0;
+
+  return createStyles({
+    root: {
+      Size: new UDim2(0, theme.spacing.calc(6), 0, theme.spacing.calc(6)),
+      BackgroundColor3: Color3.fromRGB(0, 0, 0),
+      BackgroundTransparency: transparency,
+      BorderSizePixel: 0,
+      ClipsDescendants: true,
+      ZIndex: 100,
+    } as WriteableStyle<Frame>,
+    button: {
+      Position: new UDim2(0.5, theme.padding.calc(2), 0.5, theme.padding.calc(2)),
+      AnchorPoint: new Vector2(0.5, 0.5),
+      ZIndex: 200,
+    } as WriteableStyle<TextButton>
+  })
+});
+
+export default useMyComponentStyles;
+```
+
+### Client
+
+Some sample logic for mounting app when player spawns (on client).
+
+#### src/client/Controllers/Apploader.tsx
+
+Mount the App in the LocalPlayer's `PlayerGui`.
+
+```javascript
+import Roact, { Tree } from "@rbxts/roact";
+import { Players } from "@rbxts/services";
+import { App } from "shared/ui/App";
+
+class AppLoader {
+	protected _tree: Tree | undefined;
+
+	Mount() {
+		const playerGui = Players.LocalPlayer.FindFirstChild("PlayerGui") as PlayerGui;
+
+		const appComponent = <App />;
+		this._tree = Roact.mount(appComponent, playerGui, "App");
+		print("App mounted");
+	}
+
+	Unmount() {
+		if (this._tree) {
+			Roact.unmount(this._tree);
+			print("App unmounted");
+		}
+	}
+}
+
+export default AppLoader;
+```
+
+#### src/client/main.client.ts
+
+When the client loads, call our AppLoader() to mount the UI.
+
+```javascript
+import { AppLoader } from "./Controllers";
+
+// Load the UI App
+new AppLoader().Mount();
+```
+
+# Future work
+
+- More UI packages
+- Finish palette for LightTheme
+
+# See Also
+
+- [Storyblox](https://github.com/bjlarouche/storyblox) a UI component explorer for roblox-ts developers
+  - <img src=docs/storyblox-preview.png width=40%>
+  - Test it out here [Storyblox Pre-Release Experience](https://www.roblox.com/games/9159382473)
+  - Similar to [hoarcekat](https://github.com/Kampfkarren/hoarcekat) by Kampfkarren

package/out/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./theme";
+export * from "./ui";

package/out/init.lua

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "theme") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "ui") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/theme/components/ThemeProvider.d.ts

@@ -0,0 +1,7 @@
+import Roact from "@rbxts/roact";
+import { Theme } from "../interfaces/theme";
+export interface ThemeProviderProps {
+    theme?: Theme;
+}
+declare const ThemeProvider: (props: ThemeProviderProps) => Roact.Element;
+export default ThemeProvider;

package/out/theme/components/ThemeProvider.lua

@@ -0,0 +1,37 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local withHooks = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).withHooks
+local StoreProvider = TS.import(script, TS.getModule(script, "@rbxts", "roact-rodux-hooked").src).StoreProvider
+local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
+local themeStore = TS.import(script, script.Parent, "ThemeStore").themeStore
+local ThemeWrapper = TS.import(script, script.Parent, "ThemeWrapper").default
+local ThemeProvider = withHooks(function(props)
+	local _binding = props
+	local theme = _binding.theme
+	local children = _binding[Roact.Children]
+	local _attributes = {
+		store = themeStore,
+	}
+	local _children = {}
+	local _length = #_children
+	local _attributes_1 = {
+		theme = theme,
+	}
+	local _children_1 = {}
+	local _length_1 = #_children_1
+	if children then
+		for _k, _v in children do
+			if type(_k) == "number" then
+				_children_1[_length_1 + _k] = _v
+			else
+				_children_1[_k] = _v
+			end
+		end
+	end
+	_children[_length + 1] = Roact.createElement(ThemeWrapper, _attributes_1, _children_1)
+	return Roact.createElement(StoreProvider, _attributes, _children)
+end)
+local default = ThemeProvider
+return {
+	default = default,
+}

package/out/theme/components/ThemeStore.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="rodux" />
+import { Theme } from "../interfaces/theme";
+import { Store } from "@rbxts/rodux";
+export type ThemeState = {
+    theme: Theme;
+};
+export type ThemeAction = {
+    type: "set";
+    newTheme?: Theme;
+};
+export declare const themeReducer: import("@rbxts/rodux").Reducer<ThemeState, ThemeAction>;
+export declare const themeStore: Store<ThemeState, ThemeAction>;
+export type TThemeStore = typeof themeStore;
+export declare const selectTheme: import("@rbxts/roselect").OutputSelector<ThemeState, Theme, (res: Theme) => Theme>;

package/out/theme/components/ThemeStore.lua

@@ -0,0 +1,29 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local _rodux = TS.import(script, TS.getModule(script, "@rbxts", "rodux").src)
+local createReducer = _rodux.createReducer
+local Store = _rodux.Store
+local createSelector = TS.import(script, TS.getModule(script, "@rbxts", "roselect").src).createSelector
+local DefaultTheme = TS.import(script, script.Parent.Parent, "themes").default
+local themeReducer = createReducer({
+	theme = DefaultTheme,
+}, {
+	set = function(_param, _param_1)
+		local theme = _param.theme
+		local newTheme = _param_1.newTheme
+		return {
+			theme = newTheme or theme,
+		}
+	end,
+})
+local themeStore = Store.new(themeReducer)
+local selectTheme = createSelector(function(state)
+	return state.theme
+end, function(theme)
+	return theme
+end)
+return {
+	themeReducer = themeReducer,
+	themeStore = themeStore,
+	selectTheme = selectTheme,
+}

package/out/theme/components/ThemeWrapper.d.ts

@@ -0,0 +1,7 @@
+import Roact from "@rbxts/roact";
+import { Theme } from "../interfaces/theme";
+export interface ThemeWrapperProps {
+    theme?: Theme;
+}
+declare const ThemeWrapper: (props: ThemeWrapperProps) => Roact.Element;
+export default ThemeWrapper;

package/out/theme/components/ThemeWrapper.lua

@@ -0,0 +1,52 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
+local withHooks = _roact_hooked.withHooks
+local useEffect = _roact_hooked.useEffect
+local useRef = _roact_hooked.useRef
+local _roact_rodux_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-rodux-hooked").src)
+local useDispatch = _roact_rodux_hooked.useDispatch
+local useSelector = _roact_rodux_hooked.useSelector
+local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
+local selectTheme = TS.import(script, script.Parent, "ThemeStore").selectTheme
+local DefaultTheme = TS.import(script, script.Parent.Parent, "themes").default
+local ThemeWrapper = withHooks(function(props)
+	local _binding = props
+	local theme = _binding.theme
+	local children = _binding[Roact.Children]
+	local dispatch = useDispatch()
+	local ref = useRef()
+	local currentTheme = useSelector(selectTheme)
+	-- When theme changes
+	useEffect(function()
+		dispatch({
+			type = "set",
+			newTheme = theme or DefaultTheme,
+		})
+	end, { theme })
+	local _attributes = {
+		BackgroundTransparency = 1,
+		Size = UDim2.new(1, 0, 1, 0),
+		ZIndex = 500000,
+		[Roact.Ref] = ref,
+	}
+	local _children = {}
+	local _length = #_children
+	local _child = currentTheme and children
+	if _child then
+		for _k, _v in _child do
+			if type(_k) == "number" then
+				_children[_length + _k] = _v
+			else
+				_children[_k] = _v
+			end
+		end
+	end
+	return Roact.createFragment({
+		["ThemeWrapper-" .. currentTheme.type] = Roact.createElement("Frame", _attributes, _children),
+	})
+end)
+local default = ThemeWrapper
+return {
+	default = default,
+}

package/out/theme/components/index.d.ts

@@ -0,0 +1,8 @@
+export { default as ThemeProvider } from "./ThemeProvider";
+export { ThemeProviderProps } from "./ThemeProvider";
+export * from "./ThemeProvider";
+export { ThemeState } from "./ThemeStore";
+export { ThemeAction } from "./ThemeStore";
+export { themeReducer } from "./ThemeStore";
+export { themeStore } from "./ThemeStore";
+export { TThemeStore } from "./ThemeStore";

package/out/theme/components/init.lua

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local exports = {}
+exports.ThemeProvider = TS.import(script, script, "ThemeProvider").default
+for _k, _v in TS.import(script, script, "ThemeProvider") or {} do
+	exports[_k] = _v
+end
+exports.themeReducer = TS.import(script, script, "ThemeStore").themeReducer
+exports.themeStore = TS.import(script, script, "ThemeStore").themeStore
+return exports

package/out/theme/constants/NumberConstants.d.ts

@@ -0,0 +1,6 @@
+import IconSizes from "../interfaces/IconSizes/IconSizes";
+export declare const SPACING_BASE = 12;
+export declare const PADDING_BASE = 4;
+export declare const BORDER_RADIUS = 4;
+export declare const CONTENT_WIDTH = 1024;
+export declare const ICON_SIZES: IconSizes;

package/out/theme/constants/NumberConstants.lua

@@ -0,0 +1,18 @@
+-- Compiled with roblox-ts v2.2.0
+local SPACING_BASE = 12
+local PADDING_BASE = 4
+-- align with UIBlox design
+local BORDER_RADIUS = 4
+local CONTENT_WIDTH = 1024
+local ICON_SIZES = {
+	small = 16,
+	medium = 36,
+	large = 48,
+}
+return {
+	SPACING_BASE = SPACING_BASE,
+	PADDING_BASE = PADDING_BASE,
+	BORDER_RADIUS = BORDER_RADIUS,
+	CONTENT_WIDTH = CONTENT_WIDTH,
+	ICON_SIZES = ICON_SIZES,
+}

package/out/theme/constants/ThemeConstants.d.ts

@@ -0,0 +1,5 @@
+import { Borders } from "../interfaces/spacing";
+import { Colors } from "../interfaces/palette";
+export declare const DARK_THEME_COLORS: Colors;
+export declare const LIGHT_THEME_COLORS: Colors;
+export declare const DEFAULT_BORDERS: Borders;

package/out/theme/constants/ThemeConstants.lua

@@ -0,0 +1,104 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local _palette = TS.import(script, script.Parent.Parent, "interfaces", "palette")
+local Common = _palette.Common
+local Gray = _palette.Gray
+local Green = _palette.Green
+local Red = _palette.Red
+local Purple = _palette.Purple
+local Blue = _palette.Blue
+local Yellow = _palette.Yellow
+-- dark theme
+local DARK_THEME_COLORS = {
+	backgroundDefault = Common.Black,
+	backgroundContrast = Gray[110],
+	backgroundMuted = Gray[90],
+	backgroundUIDefault = Gray[90],
+	backgroundUIMuted = Gray[100],
+	backgroundUIContrast = Gray[100],
+	UIDefault = Gray[70],
+	UIMuted = Gray[100],
+	UIEmphasis = Gray[80],
+	textDefault = Common.White,
+	textMuted = Gray[50],
+	textEmphasis = Common.White,
+	iconDefault = Common.White,
+	iconEmphasis = Common.White,
+	iconOnHover = Common.White,
+	systemPrimaryDefault = Common.White,
+	systemPrimaryOnHover = Gray[40],
+	systemPrimaryContent = Common.Black,
+	contextualPrimaryDefault = Green[50],
+	contextualPrimaryOnHover = Green[40],
+	contextualPrimaryContent = Common.Black,
+	secondaryDefault = Common.White,
+	secondaryOnHover = Gray[40],
+	secondaryContent = Common.White,
+	divider = Gray[70],
+	overlay = Common.Black,
+	dropShadow = Common.Black,
+	navigationBar = Gray[110],
+	badge = Common.White,
+	badgeContent = Common.Black,
+	placeholder = Gray[100],
+	online = Green[50],
+	offline = Gray[50],
+	alert = Red[60],
+	success = Green[50],
+	accent = Purple[50],
+	link = Blue[50],
+	caution = Yellow[50],
+	text = Common.White,
+	background = Common.Black,
+}
+local LIGHT_THEME_COLORS = {
+	backgroundDefault = Common.White,
+	backgroundContrast = Gray[40],
+	backgroundMuted = Gray[30],
+	backgroundUIDefault = Gray[30],
+	backgroundUIMuted = Gray[50],
+	backgroundUIContrast = Gray[50],
+	UIDefault = Gray[70],
+	UIMuted = Gray[50],
+	UIEmphasis = Gray[80],
+	textDefault = Common.Black,
+	textMuted = Gray[50],
+	textEmphasis = Common.Black,
+	iconDefault = Common.Black,
+	iconEmphasis = Common.Black,
+	iconOnHover = Common.Black,
+	systemPrimaryDefault = Common.Black,
+	systemPrimaryOnHover = Gray[40],
+	systemPrimaryContent = Common.White,
+	contextualPrimaryDefault = Green[60],
+	contextualPrimaryOnHover = Green[40],
+	contextualPrimaryContent = Common.White,
+	secondaryDefault = Common.Black,
+	secondaryOnHover = Gray[40],
+	secondaryContent = Common.Black,
+	divider = Gray[70],
+	overlay = Common.White,
+	dropShadow = Common.White,
+	navigationBar = Gray[40],
+	badge = Common.Black,
+	badgeContent = Common.White,
+	placeholder = Gray[50],
+	online = Green[60],
+	offline = Gray[50],
+	alert = Red[60],
+	success = Green[60],
+	accent = Purple[50],
+	link = Blue[50],
+	caution = Yellow[50],
+	text = Common.Black,
+	background = Common.White,
+}
+local DEFAULT_BORDERS = {
+	default = 1,
+	divider = 2,
+}
+return {
+	DARK_THEME_COLORS = DARK_THEME_COLORS,
+	LIGHT_THEME_COLORS = LIGHT_THEME_COLORS,
+	DEFAULT_BORDERS = DEFAULT_BORDERS,
+}

package/out/theme/constants/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./NumberConstants";
+export * from "./ThemeConstants";

package/out/theme/constants/init.lua

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "NumberConstants") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "ThemeConstants") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/theme/index.d.ts

@@ -0,0 +1,20 @@
+export { default as Theme } from "./interfaces/theme/Theme";
+export { ThemeProvider } from "./components";
+export { themeStore } from "./components";
+export { ThemeState } from "./components";
+export * from "./components";
+export * from "./constants";
+export * from "./interfaces";
+export * from "./styles";
+export * from "./themes";
+export { default as DefaultTheme } from "./themes";
+export { default as DarkTheme } from "./themes/DarkTheme";
+export { default as LightTheme } from "./themes/LightTheme";
+export { CommonProps } from "./types";
+export { BaseDefaultProps } from "./types";
+export { BaseCustomizedProps } from "./types";
+export { DefaultProps } from "./types";
+export { CustomizedProps } from "./types";
+export { CustomizedRef } from "./types";
+export { CustomizedForwardRefComponent } from "./types";
+export * from "./utilites";

package/out/theme/init.lua

@@ -0,0 +1,27 @@
+-- Compiled with roblox-ts v2.2.0
+local TS = _G[script]
+local exports = {}
+exports.ThemeProvider = TS.import(script, script, "components").ThemeProvider
+exports.themeStore = TS.import(script, script, "components").themeStore
+for _k, _v in TS.import(script, script, "components") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "constants") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "interfaces") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "styles") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "themes") or {} do
+	exports[_k] = _v
+end
+exports.DefaultTheme = TS.import(script, script, "themes").default
+exports.DarkTheme = TS.import(script, script, "themes", "DarkTheme").default
+exports.LightTheme = TS.import(script, script, "themes", "LightTheme").default
+for _k, _v in TS.import(script, script, "utilites") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/theme/interfaces/IconSizes/IconSizes.d.ts

@@ -0,0 +1,5 @@
+export default interface IconSizes {
+    small: number;
+    medium: number;
+    large: number;
+}