@openedx/frontend-base 1.0.0-alpha.3 → 1.0.0-alpha.31

package/dist/shell/dev/devHeader/BarProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import BarContext from './BarContext';
+function getBar() {
+    return 'Bar';
+}
+export default function BarProvider({ children }) {
+    const [bar, setBar] = useState(getBar());
+    const barContextValue = useMemo(() => ({
+        bar,
+        setBar,
+    }), [bar, setBar]);
+    return (_jsx(BarContext.Provider, { value: barContextValue, children: children }));
+}
+;
+//# sourceMappingURL=BarProvider.js.map

package/dist/shell/dev/devHeader/BarProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarProvider.js","sourceRoot":"","sources":["../../../../shell/dev/devHeader/BarProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,SAAS,MAAM;IACb,OAAO,KAAK,CAAC;AACf,CAAC;AAMD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAoB;IAChE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACrC,GAAG;QACH,MAAM;KACP,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,KAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,YACxC,QAAQ,GACW,CACvB,CAAC;AACJ,CAAC;AAAA,CAAC","sourcesContent":["import { ReactNode, useMemo, useState } from 'react';\nimport BarContext from './BarContext';\n\nfunction getBar() {\n  return 'Bar';\n}\n\ninterface BarProviderProps {\n  children?: ReactNode,\n}\n\nexport default function BarProvider({ children }: BarProviderProps) {\n  const [bar, setBar] = useState(getBar());\n\n  const barContextValue = useMemo(() => ({\n    bar,\n    setBar,\n  }), [bar, setBar]);\n\n  return (\n    <BarContext.Provider value={barContextValue}>\n      {children}\n    </BarContext.Provider>\n  );\n};\n"]}

package/dist/shell/dev/devHeader/CoursesLink.d.ts

@@ -0,0 +1 @@
+export default function CoursesLink(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/devHeader/CoursesLink.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@openedx/paragon';
+import { BookOpen } from '@openedx/paragon/icons';
+import { useWidgetOptions } from '../../../runtime';
+export default function CoursesLink() {
+    const options = useWidgetOptions();
+    const title = typeof options.title === 'string' ? options.title : 'Courses';
+    return (_jsxs("div", { className: "d-flex", children: [_jsx(Icon, { src: BookOpen, className: "mr-2" }), _jsx("span", { children: title })] }));
+}
+//# sourceMappingURL=CoursesLink.js.map

package/dist/shell/dev/devHeader/CoursesLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoursesLink.js","sourceRoot":"","sources":["../../../../shell/dev/devHeader/CoursesLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,WAAW;IACjC,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IACnC,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5E,OAAO,CACL,eAAK,SAAS,EAAC,QAAQ,aACrB,KAAC,IAAI,IAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,GAAG,EACxC,yBAAO,KAAK,GAAQ,IAChB,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Icon } from '@openedx/paragon';\nimport { BookOpen } from '@openedx/paragon/icons';\n\nimport { useWidgetOptions } from '../../../runtime';\n\nexport default function CoursesLink() {\n  const options = useWidgetOptions();\n  const title = typeof options.title === 'string' ? options.title : 'Courses';\n\n  return (\n    <div className=\"d-flex\">\n      <Icon src={BookOpen} className=\"mr-2\" />\n      <span>{title}</span>\n    </div>\n  );\n}\n"]}

package/dist/shell/dev/devHeader/FooContext.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from 'react';
+interface FooContextInterface {
+    foo: string;
+    setFoo: Dispatch<SetStateAction<string>>;
+}
+declare const FooContext: import("react").Context<FooContextInterface>;
+export default FooContext;

package/dist/shell/dev/devHeader/FooContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+;
+const FooContext = createContext({
+    foo: '',
+    setFoo: () => { }
+});
+export default FooContext;
+//# sourceMappingURL=FooContext.js.map

package/dist/shell/dev/devHeader/FooContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooContext.js","sourceRoot":"","sources":["../../../../shell/dev/devHeader/FooContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4B,MAAM,OAAO,CAAC;AAK/D,CAAC;AAEF,MAAM,UAAU,GAAG,aAAa,CAAsB;IACpD,GAAG,EAAE,EAAE;IACP,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;CAClB,CAAC,CAAC;AAEH,eAAe,UAAU,CAAC","sourcesContent":["import { createContext, Dispatch, SetStateAction } from 'react';\n\ninterface FooContextInterface {\n  foo: string,\n  setFoo: Dispatch<SetStateAction<string>>,\n};\n\nconst FooContext = createContext<FooContextInterface>({\n  foo: '',\n  setFoo: () => { }\n});\n\nexport default FooContext;\n"]}

package/dist/shell/dev/devHeader/FooLink.d.ts

@@ -0,0 +1 @@
+export default function FooLink(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/devHeader/FooLink.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { Icon } from '@openedx/paragon';
+import { Kitesurfing } from '@openedx/paragon/icons';
+import FooContext from './FooContext';
+export default function FooLink() {
+    const { foo } = useContext(FooContext);
+    return (_jsxs("div", { className: "d-flex", children: [_jsx(Icon, { src: Kitesurfing, className: "mr-2" }), _jsx("span", { children: foo })] }));
+}
+//# sourceMappingURL=FooLink.js.map

package/dist/shell/dev/devHeader/FooLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooLink.js","sourceRoot":"","sources":["../../../../shell/dev/devHeader/FooLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,EAAE,GAAG,EAAE,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEvC,OAAO,CACL,eAAK,SAAS,EAAC,QAAQ,aACrB,KAAC,IAAI,IAAC,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,GAAG,EAC3C,yBAAO,GAAG,GAAQ,IACd,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useContext } from 'react';\nimport { Icon } from '@openedx/paragon';\nimport { Kitesurfing } from '@openedx/paragon/icons';\n\nimport FooContext from './FooContext';\n\nexport default function FooLink() {\n  const { foo } = useContext(FooContext);\n\n  return (\n    <div className=\"d-flex\">\n      <Icon src={Kitesurfing} className=\"mr-2\" />\n      <span>{foo}</span>\n    </div>\n  );\n}\n"]}

package/dist/shell/dev/devHeader/FooProvider.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface FooProviderProps {
+    children?: ReactNode;
+}
+export default function FooProvider({ children }: FooProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shell/dev/devHeader/FooProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import FooContext from './FooContext';
+function getFoo() {
+    return 'Foo';
+}
+export default function FooProvider({ children }) {
+    const [foo, setFoo] = useState(getFoo());
+    const fooContextValue = useMemo(() => ({
+        foo,
+        setFoo,
+    }), [foo, setFoo]);
+    return (_jsx(FooContext.Provider, { value: fooContextValue, children: children }));
+}
+;
+//# sourceMappingURL=FooProvider.js.map

package/dist/shell/dev/devHeader/FooProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooProvider.js","sourceRoot":"","sources":["../../../../shell/dev/devHeader/FooProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,SAAS,MAAM;IACb,OAAO,KAAK,CAAC;AACf,CAAC;AAMD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAoB;IAChE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACrC,GAAG;QACH,MAAM;KACP,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,KAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,YACxC,QAAQ,GACW,CACvB,CAAC;AACJ,CAAC;AAAA,CAAC","sourcesContent":["import { ReactNode, useMemo, useState } from 'react';\nimport FooContext from './FooContext';\n\nfunction getFoo() {\n  return 'Foo';\n}\n\ninterface FooProviderProps {\n  children?: ReactNode,\n}\n\nexport default function FooProvider({ children }: FooProviderProps) {\n  const [foo, setFoo] = useState(getFoo());\n\n  const fooContextValue = useMemo(() => ({\n    foo,\n    setFoo,\n  }), [foo, setFoo]);\n\n  return (\n    <FooContext.Provider value={fooContextValue}>\n      {children}\n    </FooContext.Provider>\n  );\n};\n"]}

package/dist/shell/dev/devHeader/app.d.ts

@@ -0,0 +1,3 @@
+import { App } from '../../../types';
+declare const app: App;
+export default app;

package/dist/shell/dev/devHeader/app.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WidgetOperationTypes } from '../../../runtime';
+import LinkMenuItem from '../../menus/LinkMenuItem';
+import CoursesLink from './CoursesLink';
+import FooLink from './FooLink';
+import BarLink from './BarLink';
+import providers from './providers';
+const app = {
+    appId: 'org.openedx.frontend.app.dev.header',
+    slots: [
+        {
+            slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+            id: 'org.openedx.frontend.widget.slotShowcase.headerLink',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(LinkMenuItem, { label: _jsx(CoursesLink, {}), url: "#", variant: "navLink" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+            id: 'org.openedx.frontend.widget.slotShowcase.headerLink2a',
+            op: WidgetOperationTypes.APPEND,
+            element: (_jsx(LinkMenuItem, { label: _jsx(FooLink, {}), url: "#", variant: "navLink" }))
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
+            id: 'org.openedx.frontend.widget.slotShowcase.headerLink2b',
+            op: WidgetOperationTypes.APPEND,
+            condition: { authenticated: true },
+            element: (_jsx(LinkMenuItem, { label: _jsx(BarLink, {}), url: "#", variant: "navLink" }))
+        },
+    ],
+    providers
+};
+export default app;
+//# sourceMappingURL=app.js.map

package/dist/shell/dev/devHeader/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../../shell/dev/devHeader/app.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,GAAG,GAAQ;IACf,KAAK,EAAE,qCAAqC;IAC5C,KAAK,EAAE;QACL;YACE,MAAM,EAAE,kDAAkD;YAC1D,EAAE,EAAE,qDAAqD;YACzD,EAAE,EAAE,oBAAoB,CAAC,MAAM;YAC/B,OAAO,EAAE,CACP,KAAC,YAAY,IACX,KAAK,EAAE,KAAC,WAAW,KAAG,EACtB,GAAG,EAAC,GAAG,EACP,OAAO,EAAC,SAAS,GACjB,CACH;SACF;QACD;YACE,MAAM,EAAE,kDAAkD;YAC1D,EAAE,EAAE,uDAAuD;YAC3D,EAAE,EAAE,oBAAoB,CAAC,MAAM;YAC/B,OAAO,EAAE,CACP,KAAC,YAAY,IACX,KAAK,EAAE,KAAC,OAAO,KAAG,EAClB,GAAG,EAAC,GAAG,EACP,OAAO,EAAC,SAAS,GACjB,CACH;SACF;QACD;YACE,MAAM,EAAE,kDAAkD;YAC1D,EAAE,EAAE,uDAAuD;YAC3D,EAAE,EAAE,oBAAoB,CAAC,MAAM;YAC/B,SAAS,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE;YAClC,OAAO,EAAE,CACP,KAAC,YAAY,IACX,KAAK,EAAE,KAAC,OAAO,KAAG,EAClB,GAAG,EAAC,GAAG,EACP,OAAO,EAAC,SAAS,GACjB,CACH;SACF;KACF;IACD,SAAS;CACV,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { WidgetOperationTypes } from '../../../runtime';\nimport { App } from '../../../types';\nimport LinkMenuItem from '../../menus/LinkMenuItem';\nimport CoursesLink from './CoursesLink';\nimport FooLink from './FooLink';\nimport BarLink from './BarLink';\nimport providers from './providers';\n\nconst app: App = {\n  appId: 'org.openedx.frontend.app.dev.header',\n  slots: [\n    {\n      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',\n      id: 'org.openedx.frontend.widget.slotShowcase.headerLink',\n      op: WidgetOperationTypes.APPEND,\n      element: (\n        <LinkMenuItem\n          label={<CoursesLink />}\n          url=\"#\"\n          variant=\"navLink\"\n        />\n      )\n    },\n    {\n      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',\n      id: 'org.openedx.frontend.widget.slotShowcase.headerLink2a',\n      op: WidgetOperationTypes.APPEND,\n      element: (\n        <LinkMenuItem\n          label={<FooLink />}\n          url=\"#\"\n          variant=\"navLink\"\n        />\n      )\n    },\n    {\n      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',\n      id: 'org.openedx.frontend.widget.slotShowcase.headerLink2b',\n      op: WidgetOperationTypes.APPEND,\n      condition: { authenticated: true },\n      element: (\n        <LinkMenuItem\n          label={<BarLink />}\n          url=\"#\"\n          variant=\"navLink\"\n        />\n      )\n    },\n  ],\n  providers\n};\n\nexport default app;\n"]}

package/dist/shell/dev/devHeader/index.js

@@ -0,0 +1,2 @@
+export { default as devHeaderApp } from './app';
+//# sourceMappingURL=index.js.map

package/dist/shell/dev/devHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../shell/dev/devHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,OAAO,CAAC","sourcesContent":["export { default as devHeaderApp } from './app';\n"]}

package/dist/shell/dev/devHeader/providers.d.ts

@@ -0,0 +1,3 @@
+import { AppProvider } from '../../../types';
+declare const providers: AppProvider[];
+export default providers;

package/dist/shell/dev/devHeader/providers.js

@@ -0,0 +1,8 @@
+import FooProvider from './FooProvider';
+import BarProvider from './BarProvider';
+const providers = [
+    FooProvider,
+    BarProvider,
+];
+export default providers;
+//# sourceMappingURL=providers.js.map

package/dist/shell/dev/devHeader/providers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"providers.js","sourceRoot":"","sources":["../../../../shell/dev/devHeader/providers.tsx"],"names":[],"mappings":"AAEA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,MAAM,SAAS,GAAkB;IAC/B,WAAW;IACX,WAAW;CACZ,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { AppProvider } from '../../../types';\n\nimport FooProvider from './FooProvider';\nimport BarProvider from './BarProvider';\n\nconst providers: AppProvider[] = [\n  FooProvider,\n  BarProvider,\n];\n\nexport default providers;\n"]}

package/dist/shell/dev/devHome/HomePage.d.ts

@@ -0,0 +1 @@
+export default function HomePage(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/devHome/HomePage.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+import { useIntl } from '../../../runtime';
+import { getUrlByRouteRole } from '../../../runtime/routing';
+import messages from './messages';
+export default function HomePage() {
+    const coursewareUrl = getUrlByRouteRole('org.openedx.frontend.role.courseware');
+    const dashboardUrl = getUrlByRouteRole('org.openedx.frontend.role.dashboard');
+    const slotShowcaseUrl = getUrlByRouteRole('org.openedx.frontend.role.slotShowcase');
+    const intl = useIntl();
+    return (_jsxs(Container, { fluid: true, size: "xl", children: [_jsx("p", { children: intl.formatMessage(messages.homeContent) }), _jsxs("ul", { children: [coursewareUrl !== null && (_jsx("li", { children: _jsx(Link, { to: coursewareUrl, children: "Go to courseware page" }) })), dashboardUrl !== null && (_jsx("li", { children: _jsx(Link, { to: dashboardUrl, children: "Go to dashboard page" }) })), slotShowcaseUrl !== null && (_jsx("li", { children: _jsx(Link, { to: slotShowcaseUrl, children: "Go to slot showcase page" }) }))] })] }));
+}
+//# sourceMappingURL=HomePage.js.map

package/dist/shell/dev/devHome/HomePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HomePage.js","sourceRoot":"","sources":["../../../../shell/dev/devHome/HomePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,MAAM,aAAa,GAAG,iBAAiB,CAAC,sCAAsC,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,iBAAiB,CAAC,qCAAqC,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,iBAAiB,CAAC,wCAAwC,CAAC,CAAC;IACpF,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,MAAC,SAAS,IAAC,KAAK,QAAC,IAAI,EAAC,IAAI,aACxB,sBAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAK,EACjD,yBACG,aAAa,KAAK,IAAI,IAAI,CACzB,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,sCAA8B,GAAK,CAC/D,EACA,YAAY,KAAK,IAAI,IAAI,CACxB,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,YAAY,qCAA6B,GAAK,CAC7D,EACA,eAAe,KAAK,IAAI,IAAI,CAC3B,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,eAAe,yCAAiC,GAAK,CACpE,IACE,IACK,CACb,CAAC;AACJ,CAAC","sourcesContent":["import { Container } from '@openedx/paragon';\nimport { Link } from 'react-router-dom';\nimport { useIntl } from '../../../runtime';\nimport { getUrlByRouteRole } from '../../../runtime/routing';\nimport messages from './messages';\n\nexport default function HomePage() {\n  const coursewareUrl = getUrlByRouteRole('org.openedx.frontend.role.courseware');\n  const dashboardUrl = getUrlByRouteRole('org.openedx.frontend.role.dashboard');\n  const slotShowcaseUrl = getUrlByRouteRole('org.openedx.frontend.role.slotShowcase');\n  const intl = useIntl();\n\n  return (\n    <Container fluid size=\"xl\">\n      <p>{intl.formatMessage(messages.homeContent)}</p>\n      <ul>\n        {coursewareUrl !== null && (\n          <li><Link to={coursewareUrl}>Go to courseware page</Link></li>\n        )}\n        {dashboardUrl !== null && (\n          <li><Link to={dashboardUrl}>Go to dashboard page</Link></li>\n        )}\n        {slotShowcaseUrl !== null && (\n          <li><Link to={slotShowcaseUrl}>Go to slot showcase page</Link></li>\n        )}\n      </ul>\n    </Container>\n  );\n}\n"]}

package/dist/shell/dev/devHome/app.d.ts

@@ -0,0 +1,3 @@
+import { App } from '../../../types';
+declare const app: App;
+export default app;

package/dist/shell/dev/devHome/app.js

@@ -0,0 +1,15 @@
+import { homeRole } from '../../constants';
+import HomePage from './HomePage';
+const app = {
+    appId: 'org.openedx.frontend.app.dev.home',
+    routes: [{
+            path: '/dev',
+            id: 'org.openedx.frontend.route.dev.home',
+            Component: HomePage,
+            handle: {
+                roles: [homeRole],
+            }
+        }],
+};
+export default app;
+//# sourceMappingURL=app.js.map

package/dist/shell/dev/devHome/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../../shell/dev/devHome/app.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,GAAG,GAAQ;IACf,KAAK,EAAE,mCAAmC;IAC1C,MAAM,EAAE,CAAC;YACP,IAAI,EAAE,MAAM;YACZ,EAAE,EAAE,qCAAqC;YACzC,SAAS,EAAE,QAAQ;YACnB,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,QAAQ,CAAC;aAClB;SACF,CAAC;CACH,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { App } from '../../../types';\nimport { homeRole } from '../../constants';\nimport HomePage from './HomePage';\n\nconst app: App = {\n  appId: 'org.openedx.frontend.app.dev.home',\n  routes: [{\n    path: '/dev',\n    id: 'org.openedx.frontend.route.dev.home',\n    Component: HomePage,\n    handle: {\n      roles: [homeRole],\n    }\n  }],\n};\n\nexport default app;\n"]}

package/dist/shell/dev/devHome/index.js

@@ -0,0 +1,2 @@
+export { default as devHomeApp } from './app';
+//# sourceMappingURL=index.js.map

package/dist/shell/dev/devHome/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../shell/dev/devHome/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,OAAO,CAAC","sourcesContent":["export { default as devHomeApp } from './app';\n"]}

package/dist/shell/dev/devHome/messages.d.ts

@@ -0,0 +1,8 @@
+declare const messages: {
+    homeContent: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/shell/dev/devHome/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from '../../../runtime';
+const messages = defineMessages({
+    homeContent: {
+        id: 'home.content',
+        defaultMessage: 'Home page content.',
+        description: 'Content for the dev project home page.',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/shell/dev/devHome/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../shell/dev/devHome/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,WAAW,EAAE;QACX,EAAE,EAAE,cAAc;QAClB,cAAc,EAAE,oBAAoB;QACpC,WAAW,EAAE,wCAAwC;KACtD;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '../../../runtime';\n\nconst messages = defineMessages({\n  homeContent: {\n    id: 'home.content',\n    defaultMessage: 'Home page content.',\n    description: 'Content for the dev project home page.',\n  },\n});\n\nexport default messages;\n"]}

package/dist/shell/dev/devUser/app.d.ts

@@ -0,0 +1,3 @@
+import { App } from '../../../types';
+declare const app: App;
+export default app;

package/dist/shell/dev/devUser/app.js

@@ -0,0 +1,22 @@
+import { WidgetOperationTypes } from '../../../runtime';
+import LoginButton from '../../header/anonymous-menu/LoginButton';
+import RegisterButton from '../../header/anonymous-menu/RegisterButton';
+const app = {
+    appId: 'org.openedx.frontend.app.dev.user',
+    slots: [
+        {
+            slotId: 'org.openedx.frontend.slot.header.anonymousMenu.v1',
+            id: 'user.anonymousMenu.loginButton',
+            op: WidgetOperationTypes.APPEND,
+            component: LoginButton,
+        },
+        {
+            slotId: 'org.openedx.frontend.slot.header.anonymousMenu.v1',
+            id: 'user.anonymousMenu.registerButton',
+            op: WidgetOperationTypes.APPEND,
+            component: RegisterButton,
+        },
+    ]
+};
+export default app;
+//# sourceMappingURL=app.js.map

package/dist/shell/dev/devUser/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../../shell/dev/devUser/app.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,WAAW,MAAM,yCAAyC,CAAC;AAClE,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAExE,MAAM,GAAG,GAAQ;IACf,KAAK,EAAE,mCAAmC;IAC1C,KAAK,EAAE;QACL;YACE,MAAM,EAAE,mDAAmD;YAC3D,EAAE,EAAE,gCAAgC;YACpC,EAAE,EAAE,oBAAoB,CAAC,MAAM;YAC/B,SAAS,EAAE,WAAW;SACvB;QACD;YACE,MAAM,EAAE,mDAAmD;YAC3D,EAAE,EAAE,mCAAmC;YACvC,EAAE,EAAE,oBAAoB,CAAC,MAAM;YAC/B,SAAS,EAAE,cAAc;SAC1B;KACF;CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { WidgetOperationTypes } from '../../../runtime';\nimport { App } from '../../../types';\nimport LoginButton from '../../header/anonymous-menu/LoginButton';\nimport RegisterButton from '../../header/anonymous-menu/RegisterButton';\n\nconst app: App = {\n  appId: 'org.openedx.frontend.app.dev.user',\n  slots: [\n    {\n      slotId: 'org.openedx.frontend.slot.header.anonymousMenu.v1',\n      id: 'user.anonymousMenu.loginButton',\n      op: WidgetOperationTypes.APPEND,\n      component: LoginButton,\n    },\n    {\n      slotId: 'org.openedx.frontend.slot.header.anonymousMenu.v1',\n      id: 'user.anonymousMenu.registerButton',\n      op: WidgetOperationTypes.APPEND,\n      component: RegisterButton,\n    },\n  ]\n};\n\nexport default app;\n"]}

package/dist/shell/dev/devUser/index.js

@@ -0,0 +1,2 @@
+export { default as devUserApp } from './app';
+//# sourceMappingURL=index.js.map

package/dist/shell/dev/devUser/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../shell/dev/devUser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,OAAO,CAAC","sourcesContent":["export { default as devUserApp } from './app';\n"]}

package/dist/shell/dev/index.js

@@ -0,0 +1,6 @@
+export { devFooterApp } from './devFooter';
+export { devHeaderApp } from './devHeader';
+export { devHomeApp } from './devHome';
+export { devUserApp } from './devUser';
+export { slotShowcaseApp } from './slotShowcase';
+//# sourceMappingURL=index.js.map

package/dist/shell/dev/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../shell/dev/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { devFooterApp } from './devFooter';\nexport { devHeaderApp } from './devHeader';\nexport { devHomeApp } from './devHome';\nexport { devUserApp } from './devUser';\nexport { slotShowcaseApp } from './slotShowcase';\n"]}

package/dist/shell/dev/slotShowcase/HorizontalSlotLayout.d.ts

@@ -0,0 +1 @@
+export default function HorizontalSlotLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/HorizontalSlotLayout.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from '@openedx/paragon';
+import { useWidgets } from '../../../runtime';
+export default function HorizontalSlotLayout() {
+    const widgets = useWidgets();
+    return (_jsx(Stack, { direction: "horizontal", gap: 3, children: widgets }));
+}
+//# sourceMappingURL=HorizontalSlotLayout.js.map

package/dist/shell/dev/slotShowcase/HorizontalSlotLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalSlotLayout.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/HorizontalSlotLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,YACjC,OAAO,GACF,CACT,CAAC;AACJ,CAAC","sourcesContent":["import { Stack } from '@openedx/paragon';\nimport { useWidgets } from '../../../runtime';\n\nexport default function HorizontalSlotLayout() {\n  const widgets = useWidgets();\n\n  return (\n    <Stack direction=\"horizontal\" gap={3}>\n      {widgets}\n    </Stack>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/LayoutWithOptions.d.ts

@@ -0,0 +1 @@
+export default function LayoutWithOptions(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/LayoutWithOptions.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutOptions, useWidgets } from '../../../runtime';
+export default function LayoutWithOptions() {
+    const widgets = useWidgets();
+    const options = useLayoutOptions();
+    const title = typeof options.title === 'string' ? options.title : 'Foo';
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "showcase-layout-title", children: ["Layout Title: ", title] }), _jsx("div", { children: widgets })] }));
+}
+//# sourceMappingURL=LayoutWithOptions.js.map

package/dist/shell/dev/slotShowcase/LayoutWithOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutWithOptions.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/LayoutWithOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExE,OAAO,CACL,8BACE,eAAK,SAAS,EAAC,uBAAuB,+BAAgB,KAAK,IAAO,EAClE,wBACG,OAAO,GACJ,IACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { useLayoutOptions, useWidgets } from '../../../runtime';\n\nexport default function LayoutWithOptions() {\n  const widgets = useWidgets();\n  const options = useLayoutOptions();\n\n  const title = typeof options.title === 'string' ? options.title : 'Foo';\n\n  return (\n    <>\n      <div className=\"showcase-layout-title\">Layout Title: {title}</div>\n      <div>\n        {widgets}\n      </div>\n    </>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/SlotShowcase.scss

@@ -0,0 +1,50 @@
+// Inline code
+.showcase-page code {
+  color: var(--pgn-color-dark-400);
+}
+
+// Page grid
+.showcase-page {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.showcase-full-width {
+  grid-column: 1 / -1;
+}
+
+.showcase-divider {
+  grid-column: 1 / -1;
+  border-bottom: 2px solid var(--pgn-color-primary-500);
+  padding-bottom: 0.25rem;
+}
+
+// Slot container (dashed boundary via Card)
+.showcase-slot {
+  border: 2px dashed var(--pgn-color-primary-300);
+  background-color: var(--pgn-color-primary-100);
+}
+
+// Widget card
+.showcase-widget {
+  background-color: var(--pgn-color-light-300);
+  border-left: 3px solid var(--pgn-color-primary-500);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  margin: 0.5rem;
+}
+
+// Highlighted widget variant
+.showcase-widget-highlighted {
+  background-color: var(--pgn-color-warning-100);
+  border-left: 3px solid var(--pgn-color-warning-300);
+}
+
+// Layout title
+.showcase-layout-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--pgn-color-primary-500);
+  margin-bottom: 0.5rem;
+}

package/dist/shell/dev/slotShowcase/SlotShowcasePage.d.ts

@@ -0,0 +1,2 @@
+import './SlotShowcase.scss';
+export default function SlotShowcasePage(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/SlotShowcasePage.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Container } from '@openedx/paragon';
+import { Slot } from '../../../runtime';
+import HorizontalSlotLayout from './HorizontalSlotLayout';
+import LayoutWithOptions from './LayoutWithOptions';
+import ToggleByRoleLayout from './ToggleByRoleLayout';
+import './SlotShowcase.scss';
+function SlotContainer({ children }) {
+    return (_jsx(Card, { className: "showcase-slot", children: _jsx(Card.Body, { children: children }) }));
+}
+function Section({ title, children }) {
+    return (_jsxs("div", { children: [_jsx("h3", { className: "text-primary-500", children: title }), children] }));
+}
+export default function SlotShowcasePage() {
+    return (_jsxs(Container, { fluid: true, size: "xl", className: "showcase-page py-4", children: [_jsxs("div", { className: "showcase-full-width", children: [_jsx("h1", { children: "Slot Showcase" }), _jsxs("p", { children: ["As a best practice, widgets should pass additional props (", _jsx("code", { children: "...props" }), ") to their rendered HTMLElement.  This allows custom layouts to add ", _jsx("code", { children: "className" }), " and ", _jsx("code", { children: "style" }), " props as necessary for the layout."] })] }), _jsxs(Section, { title: "Simple slot with default layout", children: [_jsx("p", { children: "This slot has no opinionated layout, it just renders its children." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseSimple" }) })] }), _jsxs(Section, { title: "Simple slot with default content and props", children: [_jsx("p", { children: "This slot has default content, and it exposes a slot prop to widgets." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent", aSlotProp: "hello!", children: _jsx("div", { className: "showcase-widget", children: "Look, I'm default content!" }) }) })] }), _jsx("h2", { className: "showcase-divider", children: "UI Layout Operations" }), _jsxs(Section, { title: "Slot with custom layout (component)", children: [_jsx("p", { children: "This slot uses a horizontal flexbox layout from a component." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustom", layout: HorizontalSlotLayout }) })] }), _jsxs(Section, { title: "Slot with custom layout (element)", children: [_jsx("p", { children: "This slot uses a horizontal flexbox layout from a JSX element." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustom", layout: _jsx(HorizontalSlotLayout, {}) }) })] }), _jsxs(Section, { title: "Slot with override custom layout", children: [_jsx("p", { children: "This slot uses a horizontal flexbox layout, but it was added by a layout replace operation." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustomConfig" }) })] }), _jsxs(Section, { title: "Slot with layout options (default)", children: [_jsx("p", { children: "This slot uses a custom layout that takes options.  It shows the default title." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault", layout: LayoutWithOptions }) })] }), _jsxs(Section, { title: "Slot with layout options (configured)", children: [_jsx("p", { children: "Same layout, but the title option is set to \"Bar\"." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions", layout: LayoutWithOptions }) })] }), _jsxs(Section, { title: "Slot with widget filtering by role", children: [_jsxs("p", { children: ["This slot has four widgets, two with a \"highlighted\" role.  The layout uses ", _jsx("code", { children: "widgets.byRole()" }), " to toggle between all and highlighted."] }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseFilterByRole", layout: ToggleByRoleLayout }) })] }), _jsx("h2", { className: "showcase-divider", children: "UI Widget Operations" }), _jsxs(Section, { title: "Slot with prepended element", children: [_jsx("p", { children: "This slot has a prepended element (and two appended elements)." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcasePrepending" }) })] }), _jsxs(Section, { title: "Slot with inserted elements", children: [_jsxs("p", { children: ["This slot has elements inserted before and after the second element. The insert operations are declared ", _jsx("em", { children: "before" }), " the related element, but can still insert themselves relative to it."] }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseInserting" }) })] }), _jsxs(Section, { title: "Slot with replaced element", children: [_jsx("p", { children: "This slot has an element replacing element two." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseReplacing" }) })] }), _jsxs(Section, { title: "Slot with removed element", children: [_jsxs("p", { children: ["This slot has removed element two (", _jsx("code", { children: "WidgetOperationTypes.REMOVE" }), ")."] }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseRemoving" }) })] }), _jsxs(Section, { title: "Slot with widget options (default)", children: [_jsx("p", { children: "This widget accepts options.  It shows the default title." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions" }) })] })] }));
+}
+//# sourceMappingURL=SlotShowcasePage.js.map

package/dist/shell/dev/slotShowcase/SlotShowcasePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlotShowcasePage.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/SlotShowcasePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode } from 'react';\nimport { Card, Container } from '@openedx/paragon';\nimport { Slot } from '../../../runtime';\nimport HorizontalSlotLayout from './HorizontalSlotLayout';\nimport LayoutWithOptions from './LayoutWithOptions';\nimport ToggleByRoleLayout from './ToggleByRoleLayout';\nimport './SlotShowcase.scss';\n\nfunction SlotContainer({ children }: { children: ReactNode }) {\n  return (\n    <Card className=\"showcase-slot\">\n      <Card.Body>\n        {children}\n      </Card.Body>\n    </Card>\n  );\n}\n\nfunction Section({ title, children }: { title: string, children: ReactNode }) {\n  return (\n    <div>\n      <h3 className=\"text-primary-500\">{title}</h3>\n      {children}\n    </div>\n  );\n}\n\nexport default function SlotShowcasePage() {\n  return (\n    <Container fluid size=\"xl\" className=\"showcase-page py-4\">\n      <div className=\"showcase-full-width\">\n        <h1>Slot Showcase</h1>\n        <p>As a best practice, widgets should pass additional props (<code>...props</code>) to their rendered HTMLElement.  This allows custom layouts to add <code>className</code> and <code>style</code> props as necessary for the layout.</p>\n      </div>\n\n      <Section title=\"Simple slot with default layout\">\n        <p>This slot has no opinionated layout, it just renders its children.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseSimple\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Simple slot with default content and props\">\n        <p>This slot has default content, and it exposes a slot prop to widgets.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent\" aSlotProp=\"hello!\">\n            <div className=\"showcase-widget\">Look, I&apos;m default content!</div>\n          </Slot>\n        </SlotContainer>\n      </Section>\n\n      <h2 className=\"showcase-divider\">UI Layout Operations</h2>\n\n      <Section title=\"Slot with custom layout (component)\">\n        <p>This slot uses a horizontal flexbox layout from a component.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustom\" layout={HorizontalSlotLayout} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with custom layout (element)\">\n        <p>This slot uses a horizontal flexbox layout from a JSX element.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustom\" layout={<HorizontalSlotLayout />} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with override custom layout\">\n        <p>This slot uses a horizontal flexbox layout, but it was added by a layout replace operation.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustomConfig\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with layout options (default)\">\n        <p>This slot uses a custom layout that takes options.  It shows the default title.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault\" layout={LayoutWithOptions} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with layout options (configured)\">\n        <p>Same layout, but the title option is set to &quot;Bar&quot;.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions\" layout={LayoutWithOptions} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with widget filtering by role\">\n        <p>This slot has four widgets, two with a &quot;highlighted&quot; role.  The layout uses <code>widgets.byRole()</code> to toggle between all and highlighted.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseFilterByRole\" layout={ToggleByRoleLayout} />\n        </SlotContainer>\n      </Section>\n\n      <h2 className=\"showcase-divider\">UI Widget Operations</h2>\n\n      <Section title=\"Slot with prepended element\">\n        <p>This slot has a prepended element (and two appended elements).</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcasePrepending\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with inserted elements\">\n        <p>This slot has elements inserted before and after the second element. The insert operations are declared <em>before</em> the related element, but can still insert themselves relative to it.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseInserting\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with replaced element\">\n        <p>This slot has an element replacing element two.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseReplacing\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with removed element\">\n        <p>This slot has removed element two (<code>WidgetOperationTypes.REMOVE</code>).</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseRemoving\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with widget options (default)\">\n        <p>This widget accepts options.  It shows the default title.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions\" />\n        </SlotContainer>\n      </Section>\n\n    </Container>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/ToggleByRoleLayout.d.ts

@@ -0,0 +1 @@
+export default function ToggleByRoleLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/ToggleByRoleLayout.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '@openedx/paragon';
+import { useWidgets } from '../../../runtime';
+const highlitedRole = 'org.openedx.frontend.role.slotShowcase.highlighted';
+export default function ToggleByRoleLayout() {
+    const widgets = useWidgets();
+    const [showHighlighted, setShowHighlighted] = useState(false);
+    return (_jsxs("div", { children: [_jsx(Button, { size: "sm", variant: "outline-primary", className: "mb-2", onClick: () => setShowHighlighted(!showHighlighted), children: showHighlighted ? 'Show all widgets' : 'Show only highlighted widgets' }), _jsx("div", { children: showHighlighted ? widgets.byRole(highlitedRole) : widgets })] }));
+}
+//# sourceMappingURL=ToggleByRoleLayout.js.map

package/dist/shell/dev/slotShowcase/ToggleByRoleLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleByRoleLayout.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/ToggleByRoleLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,aAAa,GAAG,oDAAoD,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACxC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO,CACL,0BACE,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,iBAAiB,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,eAAe,CAAC,YAC7G,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,+BAA+B,GAChE,EACT,wBACG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,GACtD,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useState } from 'react';\nimport { Button } from '@openedx/paragon';\nimport { useWidgets } from '../../../runtime';\n\nconst highlitedRole = 'org.openedx.frontend.role.slotShowcase.highlighted';\n\nexport default function ToggleByRoleLayout() {\n  const widgets = useWidgets();\n  const [showHighlighted, setShowHighlighted] = useState(false);\n\n  return (\n    <div>\n      <Button size=\"sm\" variant=\"outline-primary\" className=\"mb-2\" onClick={() => setShowHighlighted(!showHighlighted)}>\n        {showHighlighted ? 'Show all widgets' : 'Show only highlighted widgets'}\n      </Button>\n      <div>\n        {showHighlighted ? widgets.byRole(highlitedRole) : widgets}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/WidgetWithOptions.d.ts

@@ -0,0 +1 @@
+export default function WidgetWithOptions(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/WidgetWithOptions.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWidgetOptions } from '../../../runtime';
+export default function WidgetWithOptions() {
+    const options = useWidgetOptions();
+    const title = typeof options.title === 'string' ? options.title : 'Foo';
+    return (_jsx("div", { className: "showcase-widget", children: title }));
+}
+//# sourceMappingURL=WidgetWithOptions.js.map

package/dist/shell/dev/slotShowcase/WidgetWithOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetWithOptions.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/WidgetWithOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExE,OAAO,CACL,cAAK,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAO,CAC/C,CAAC;AACJ,CAAC","sourcesContent":["import { useWidgetOptions } from '../../../runtime';\n\nexport default function WidgetWithOptions() {\n  const options = useWidgetOptions();\n\n  const title = typeof options.title === 'string' ? options.title : 'Foo';\n\n  return (\n    <div className=\"showcase-widget\">{title}</div>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/app.d.ts

@@ -0,0 +1,3 @@
+import { App } from '../../../types';
+declare const app: App;
+export default app;