@owp/core 2.1.6 → 2.2.0

package/dist/layout/components/toggles/NavigationSearchToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationSearchToggle.js","sources":["../../../../src/layout/components/toggles/NavigationSearchToggle.tsx"],"sourcesContent":["import { OwpSvgIcon } from '@/components/OwpSvgIcon';\nimport { useGetNavigationList } from '@/hooks/useNavigation';\nimport { useOwpTranslation } from '@/hooks/useOwpTranslation';\nimport { navigationSlice } from '@/store/navigationSlice';\nimport { withSlices } from '@/store/withSlices';\nimport type { OwpFlatNavItemType as FlatNavItemType } from '@/types/OwpNavigationTypes';\nimport { OwpNavigationHelper as NavigationHelper } from '@/utils/navigationUtils';\nimport UnfoldLessIcon from '@mui/icons-material/UnfoldLess';\nimport { Stack } from '@mui/material';\nimport ClickAwayListener from '@mui/material/ClickAwayListener';\nimport { grey } from '@mui/material/colors';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Paper from '@mui/material/Paper';\nimport Popper from '@mui/material/Popper';\nimport { styled } from '@mui/material/styles';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport match from 'autosuggest-highlight/match';\nimport parse from 'autosuggest-highlight/parse';\nimport clsx from 'clsx';\nimport { trim } from 'es-toolkit/compat';\nimport { type FormEvent, type ReactNode, useEffect, useMemo, useReducer, useRef } from 'react';\nimport Autosuggest, {\n  ChangeEvent,\n  RenderInputComponentProps,\n  RenderSuggestionParams,\n} from 'react-autosuggest';\nimport { useNavigate } from 'react-router-dom';\nimport { toolbarToggleSx } from './toggleStyles';\n\nconst Root = styled('div')(({ theme }) => ({\n  '& .OwpSearch-container': {\n    position: 'relative',\n  },\n  '& .OwpSearch-suggestionsContainerOpen': {\n    position: 'absolute',\n    zIndex: 1,\n    marginTop: theme.spacing(),\n    left: 0,\n    right: 0,\n  },\n  '& .OwpSearch-suggestion': {\n    display: 'block',\n  },\n  '& .OwpSearch-suggestionsList': {\n    margin: 0,\n    padding: 0,\n    listStyleType: 'none',\n  },\n  '& .OwpSearch-input': {\n    transition: theme.transitions.create(['background-color'], {\n      easing: theme.transitions.easing.easeInOut,\n      duration: theme.transitions.duration.short,\n    }),\n    '&:focus': {\n      backgroundColor: theme.palette.background.paper,\n    },\n  },\n}));\n\ntype RenderInputComponentType = {\n  variant?: 'basic' | 'standard';\n  inputRef?: (node: HTMLInputElement) => void;\n  ref?: (node: HTMLInputElement) => void;\n  key?: string;\n};\n\nfunction renderInputComponent(props: RenderInputComponentProps) {\n  const { variant, ref, inputRef = () => {}, key, ...other } = props as RenderInputComponentType;\n  return (\n    <div className=\"relative w-full\" key={key}>\n      {variant === 'basic' ? (\n        \n        <>\n          <TextField\n            fullWidth\n            autoComplete=\"off\"\n            variant=\"outlined\"\n            {...other}\n            slotProps={{\n              input: {\n                name: 'auto-complete-search',\n                role: 'search',\n                inputRef: (node: HTMLInputElement) => {\n                  ref?.(node);\n                  inputRef(node);\n                },\n                classes: {\n                  input: 'OwpSearch-input py-0 px-16 h-36 md:h-36 ltr:pr-36 rtl:pl-36',\n                  notchedOutline: 'rounded-lg',\n                },\n              },\n            }}\n          />\n          <OwpSvgIcon\n            className=\"pointer-events-none absolute top-0 h-36 w-36 p-8 ltr:right-0 rtl:left-0\"\n            color=\"action\"\n            size={20}\n          >\n            heroicons-outline:magnifying-glass\n          </OwpSvgIcon>\n        </>\n      ) : (\n        \n        <TextField\n          fullWidth\n          variant=\"standard\"\n          {...other}\n          slotProps={{\n            input: {\n              disableUnderline: true,\n              inputRef: (node: HTMLInputElement) => {\n                ref?.(node);\n                inputRef(node);\n              },\n              classes: {\n                input: 'OwpSearch-input py-0 px-16 h-36',\n              },\n            },\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction renderSuggestion(\n  suggestion: FlatNavItemType,\n  { query, isHighlighted }: RenderSuggestionParams,\n) {\n  const matches = match(suggestion?.title ?? '', query);\n  const parts = parse(suggestion?.title ?? '', matches);\n\n  return (\n    <MenuItem selected={Boolean(isHighlighted)} component=\"div\">\n      <ListItemIcon className=\"min-w-36\">\n        {suggestion.icon ? (\n          <OwpSvgIcon>{suggestion.icon}</OwpSvgIcon>\n        ) : (\n          <span className=\"w-24 text-center text-2xl font-semibold uppercase\">\n            {suggestion?.title?.[0]}\n          </span>\n        )}\n      </ListItemIcon>\n      <ListItemText\n        primary={parts?.map((part: { text: string; highlight?: boolean }, index: number) =>\n          part.highlight ? (\n            <span key={index} style={{ fontWeight: 600 }}>\n              {part.text}\n            </span>\n          ) : (\n            <strong key={index} style={{ fontWeight: 300 }}>\n              {part.text}\n            </strong>\n          ),\n        )}\n      />\n    </MenuItem>\n  );\n}\n\nfunction getSuggestions(value: string, data: FlatNavItemType[]): FlatNavItemType[] {\n  const inputValue = trim(value).toLowerCase();\n  const inputLength = inputValue.length;\n  let count = 0;\n\n  if (inputLength === 0) {\n    return [];\n  }\n\n  return data.filter((suggestion) => {\n    const keep =\n      count < 10 &&\n      suggestion?.title &&\n      match(suggestion?.title ?? '', inputValue, { requireMatchAll: true })?.length > 0;\n\n    if (keep) {\n      count += 1;\n    }\n\n    return keep;\n  });\n}\n\nfunction getSuggestionValue(suggestion: FlatNavItemType) {\n  return suggestion.title;\n}\n\ntype StateType = {\n  searchText: string;\n  navigation: FlatNavItemType[];\n  suggestions: FlatNavItemType[];\n  noSuggestions: boolean;\n  opened: boolean;\n};\n\nconst initialState: StateType = {\n  searchText: '',\n  navigation: [],\n  suggestions: [],\n  noSuggestions: false,\n  opened: false,\n};\n\ntype ActionType =\n  | { type: 'setSearchText'; value: string }\n  | { type: 'setNavigation'; data: FlatNavItemType[] }\n  | { type: 'updateSuggestions'; value: string }\n  | { type: 'clearSuggestions' }\n  | { type: 'open' }\n  | { type: 'close' };\n\nfunction reducer(state: StateType, action: ActionType): StateType {\n  switch (action.type) {\n    case 'open': {\n      return {\n        ...state,\n        opened: true,\n      };\n    }\n    case 'close': {\n      return {\n        ...state,\n        opened: false,\n        searchText: '',\n      };\n    }\n    case 'setSearchText': {\n      return {\n        ...state,\n        searchText: action.value,\n      };\n    }\n    case 'setNavigation': {\n      return {\n        ...state,\n        navigation: action.data,\n      };\n    }\n    case 'updateSuggestions': {\n      const suggestions = getSuggestions(action.value, state.navigation);\n      const isInputBlank = typeof action.value === 'string' && action.value.trim() === '';\n      const noSuggestions = !isInputBlank && suggestions.length === 0;\n\n      return {\n        ...state,\n        suggestions,\n        noSuggestions,\n      };\n    }\n    case 'clearSuggestions': {\n      return {\n        ...state,\n        suggestions: [],\n        noSuggestions: false,\n      };\n    }\n    default: {\n      throw new Error();\n    }\n  }\n}\n\n/**\n * Props for navigation search toggle.\n */\ntype NavigationSearchToggleProps = {\n  className?: string;\n  variant?: 'basic' | 'full';\n  trigger?: ReactNode;\n  placeholder?: string;\n  noResults?: string;\n};\n\n/**\n * Navigation search toggle.\n */\nfunction NavigationSearchToggle(props: NavigationSearchToggleProps) {\n  const navigation = useGetNavigationList();\n  const {\n    className,\n    variant = 'full',\n    trigger = (\n      <IconButton sx={toolbarToggleSx}>\n        <OwpSvgIcon size={20}>heroicons-outline:magnifying-glass</OwpSvgIcon>\n      </IconButton>\n    ),\n  } = props;\n  const { t } = useOwpTranslation();\n  const flatNavigation = useMemo(\n    () => NavigationHelper.getFlatNavigation(navigation) as FlatNavItemType[],\n    [navigation],\n  );\n  const placeholder = props?.placeholder ?? t('Common.검색');\n  const noResults = props.noResults ?? t('Message.검색된 결과가 없습니다...');\n\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const navigate = useNavigate();\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const suggestionsNode = useRef<HTMLDivElement>(null);\n  const popperNode = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    dispatch({\n      type: 'setNavigation',\n      data: flatNavigation,\n    });\n  }, [flatNavigation]);\n\n  function showSearch() {\n    dispatch({ type: 'open' });\n    document.addEventListener('keydown', escFunction, false);\n  }\n\n  function hideSearch() {\n    dispatch({ type: 'close' });\n    document.removeEventListener('keydown', escFunction, false);\n  }\n\n  function escFunction(event: KeyboardEvent) {\n    if (event.key === 'Esc' || event.key === 'Escape') {\n      hideSearch();\n    }\n  }\n\n  function handleSuggestionsFetchRequested({ value }: { value: string }) {\n    dispatch({\n      type: 'updateSuggestions',\n      value,\n    });\n  }\n\n  function handleSuggestionSelected(\n    event: FormEvent<unknown>,\n    { suggestion }: { suggestion: FlatNavItemType },\n  ) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (!suggestion.url) {\n      return;\n    }\n\n    navigate(suggestion.url);\n    hideSearch();\n  }\n\n  function handleSuggestionsClearRequested() {\n    dispatch({\n      type: 'clearSuggestions',\n    });\n  }\n\n  function handleChange(_event: FormEvent<HTMLElement>, { newValue }: ChangeEvent) {\n    dispatch({\n      type: 'setSearchText',\n      value: newValue,\n    });\n  }\n\n  function handleClickAway(event: MouseEvent | TouchEvent) {\n    if (\n      state.opened &&\n      (!suggestionsNode.current ||\n        !(event.target instanceof Node && suggestionsNode.current.contains(event.target)))\n    ) {\n      hideSearch();\n    }\n  }\n\n  switch (variant) {\n    case 'basic': {\n      return (\n        <div className={clsx('flex w-full items-center', className)} ref={popperNode}>\n          <Autosuggest\n            renderInputComponent={renderInputComponent}\n            highlightFirstSuggestion\n            suggestions={state.suggestions}\n            onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n            onSuggestionsClearRequested={handleSuggestionsClearRequested}\n            onSuggestionSelected={handleSuggestionSelected}\n            getSuggestionValue={getSuggestionValue}\n            renderSuggestion={renderSuggestion}\n            inputProps={{\n              // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n              // @ts-ignore\n              inputRef: (node) => (inputRef.current = node),\n              variant,\n              placeholder,\n              role: 'search',\n              value: state.searchText,\n              onChange: handleChange,\n              onFocus: showSearch,\n              InputLabelProps: {\n                shrink: true,\n              },\n              autoFocus: false,\n            }}\n            theme={{\n              container: 'flex flex-1 w-full',\n              suggestionsList: 'OwpSearch-suggestionsList',\n              suggestion: 'OwpSearch-suggestion',\n            }}\n            renderSuggestionsContainer={(options) => {\n              const { containerProps } = options;\n              const { key, ...restContainerProps } = containerProps;\n\n              return (\n                <Popper\n                  anchorEl={popperNode.current}\n                  open={Boolean(options.children) || state.noSuggestions}\n                  className=\"z-9999\"\n                >\n                  <div ref={suggestionsNode}>\n                    <Paper\n                      key={key}\n                      {...restContainerProps}\n                      style={{\n                        width: popperNode.current ? popperNode.current.clientWidth : '',\n                      }}\n                      className=\"overflow-hidden rounded-lg shadow-lg\"\n                    >\n                      {options.children}\n                      {state.noSuggestions && (\n                        <Typography className=\"px-16 py-12\">{noResults}</Typography>\n                      )}\n                    </Paper>\n                  </div>\n                </Popper>\n              );\n            }}\n          />\n        </div>\n      );\n    }\n    case 'full': {\n      return (\n        <Root className={clsx('flex', className)}>\n          <Tooltip title={t('Title.메뉴 검색')} placement=\"bottom\">\n            <div\n              onClick={showSearch}\n              onKeyDown={showSearch}\n              role=\"button\"\n              tabIndex={0}\n            >\n              {trigger}\n            </div>\n          </Tooltip>\n\n          {state.opened && (\n            <ClickAwayListener onClickAway={handleClickAway}>\n              <Paper className=\"absolute inset-x-0 top-0 z-9999 h-full shadow-0\" square>\n                <div className=\"flex h-full w-full items-center\" ref={popperNode}>\n                  <Autosuggest\n                    renderInputComponent={renderInputComponent}\n                    highlightFirstSuggestion\n                    suggestions={state.suggestions}\n                    onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n                    onSuggestionsClearRequested={handleSuggestionsClearRequested}\n                    onSuggestionSelected={handleSuggestionSelected}\n                    getSuggestionValue={getSuggestionValue}\n                    renderSuggestion={renderSuggestion}\n                    inputProps={{\n                      placeholder,\n                      value: state.searchText,\n                      onChange: handleChange,\n                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                      // @ts-ignore\n                      inputRef: (node) => (inputRef.current = node),\n                      InputLabelProps: {\n                        shrink: true,\n                      },\n                      autoFocus: true,\n                    }}\n                    theme={{\n                      container: 'flex flex-1 w-full',\n                      suggestionsList: 'OwpSearch-suggestionsList',\n                      suggestion: 'OwpSearch-suggestion',\n                    }}\n                    renderSuggestionsContainer={(options) => {\n                      const { containerProps } = options;\n                      const { key, ...restContainerProps } = containerProps;\n\n                      return (\n                        <Popper\n                          anchorEl={popperNode.current}\n                          open={Boolean(options.children) || state.noSuggestions}\n                          className=\"z-9999\"\n                        >\n                          <div ref={suggestionsNode}>\n                            <Paper\n                              square\n                              key={key}\n                              {...restContainerProps}\n                              className=\"shadow-lg\"\n                              style={{\n                                width: popperNode.current ? popperNode.current.clientWidth : 'auto',\n                              }}\n                            >\n                              {options.children}\n                              {state.noSuggestions && (\n                                <Typography className=\"px-16 py-12\">{noResults}</Typography>\n                              )}\n                            </Paper>\n                          </div>\n                        </Popper>\n                      );\n                    }}\n                  />\n                  <Stack className=\"mx-12\" direction=\"row\" spacing={1}>\n                    <IconButton\n                      size=\"large\"\n                      sx={{ color: grey[600] }}\n                      onClick={() => {\n                        dispatch({\n                          type: 'setSearchText',\n                          value: '',\n                        });\n                        inputRef.current?.focus();\n                      }}\n                    >\n                      <OwpSvgIcon>heroicons-outline:x-mark</OwpSvgIcon>\n                    </IconButton>\n                    <IconButton sx={{ color: grey[600] }} size=\"large\" onClick={hideSearch}>\n                      <UnfoldLessIcon />\n                    </IconButton>\n                  </Stack>\n                </div>\n              </Paper>\n            </ClickAwayListener>\n          )}\n        </Root>\n      );\n    }\n    default: {\n      return null;\n    }\n  }\n}\n\n/**\n * Memoized navigation search toggle.\n */\nconst NavigationSearchToggleWithSlices = withSlices<NavigationSearchToggleProps>([navigationSlice])(\n  NavigationSearchToggle,\n);\n\nexport default NavigationSearchToggleWithSlices;\n"],"names":["Root","styled","theme","renderInputComponent","props","variant","ref","inputRef","__name","key","other","jsxs","Fragment","jsx","TextField","node","OwpSvgIcon","renderSuggestion","suggestion","query","isHighlighted","matches","match","parts","parse","MenuItem","ListItemIcon","ListItemText","part","index","getSuggestions","value","data","inputValue","trim","inputLength","count","keep","_a","getSuggestionValue","initialState","reducer","state","action","suggestions","noSuggestions","NavigationSearchToggle","navigation","useGetNavigationList","className","trigger","IconButton","toolbarToggleSx","t","useOwpTranslation","flatNavigation","useMemo","NavigationHelper","placeholder","noResults","dispatch","useReducer","navigate","useNavigate","useRef","suggestionsNode","popperNode","useEffect","showSearch","escFunction","hideSearch","event","handleSuggestionsFetchRequested","handleSuggestionSelected","handleSuggestionsClearRequested","handleChange","_event","newValue","handleClickAway","clsx","Autosuggest","options","containerProps","restContainerProps","Popper","Paper","Typography","Tooltip","ClickAwayListener","Stack","grey","UnfoldLessIcon","NavigationSearchToggleWithSlices","withSlices","navigationSlice"],"mappings":"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"}

package/dist/layout/components/toggles/NavigationShortcutsToggle.js

@@ -0,0 +1,196 @@
+var P = Object.defineProperty;
+var r = (s, e) => P(s, "name", { value: e, configurable: !0 });
+import { jsxs as p, jsx as t } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { useGetNavigationList as D } from "../../../hooks/useNavigation.js";
+import { useOwpTranslation as G } from "../../../hooks/useOwpTranslation.js";
+import { useSetShortcuts as W, useGetShortcuts as A } from "../../../hooks/useShortcuts.js";
+import { navigationSlice as F } from "../../../store/navigationSlice.js";
+import { withSlices as H } from "../../../store/withSlices.js";
+import { OwpNavigationHelper as U } from "../../../utils/navigationUtils.js";
+import q from "../../../node_modules/.pnpm/@mui_icons-material@7.3.9_@mui_material@7.3.9_@emotion_react@11.14.0_@types_react@19.2._dc2be6bc014bebdac88a574e3e02c144/node_modules/@mui/icons-material/esm/Clear.js";
+import M from "@mui/material/Box";
+import { amber as L, grey as k } from "@mui/material/colors";
+import J from "@mui/material/Divider";
+import x from "@mui/material/IconButton";
+import K from "@mui/material/Input";
+import Q from "@mui/material/ListItemIcon";
+import R from "@mui/material/ListItemText";
+import V from "@mui/material/Menu";
+import X from "@mui/material/MenuItem";
+import Y from "@mui/material/Tooltip";
+import Z from "@mui/material/Typography";
+import { clsx as y } from "../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { useRef as $, useState as z, useMemo as g } from "react";
+import { Link as _ } from "react-router-dom";
+import { toolbarToggleSx as oo } from "./toggleStyles.js";
+import { find as to } from "../../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/array/find.js";
+import { OwpSvgIcon as S } from "../../../components/OwpSvgIcon/OwpSvgIcon.js";
+import { xor as eo } from "../../../node_modules/.pnpm/es-toolkit@1.39.10/node_modules/es-toolkit/dist/compat/array/xor.js";
+function ro(s) {
+  const { variant: e = "horizontal", className: d = "" } = s, i = $(null), [c, v] = z(null), [n, f] = z(""), T = D(), B = W(), a = A(), { t: h } = G(), m = g(
+    () => U.getFlatNavigation(T),
+    [T]
+  ), u = g(
+    () => a.map((o) => to(m, { id: o })).filter((o) => !!o),
+    [m, a]
+  ), N = g(() => {
+    if (!n || !m)
+      return [];
+    const o = n.toLowerCase();
+    return m.filter(
+      (l) => {
+        var b, w;
+        return (w = (b = l == null ? void 0 : l.title) == null ? void 0 : b.toLowerCase()) == null ? void 0 : w.includes(o);
+      }
+    );
+  }, [m, n]);
+  function j(o) {
+    v(o.currentTarget);
+  }
+  r(j, "addMenuClick");
+  function E() {
+    v(null);
+  }
+  r(E, "addMenuClose");
+  function O(o) {
+    f(o.target.value);
+  }
+  r(O, "search");
+  function C(o) {
+    let l = [...a];
+    l = eo(l, [o]), B(l);
+  }
+  return r(C, "toggleInShortcuts"), /* @__PURE__ */ p(
+    M,
+    {
+      className: y(
+        "flex flex-shrink overflow-hidden",
+        e === "vertical" ? "flex-col" : "",
+        d
+      ),
+      children: [
+        /* @__PURE__ */ t(
+          M,
+          {
+            className: y(
+              "flex flex-1 items-center",
+              e === "vertical" ? "flex-col" : "max-h-36"
+            ),
+            children: /* @__PURE__ */ t(
+              Y,
+              {
+                title: h("Title.즐겨찾기 등록/삭제"),
+                placement: e === "horizontal" ? "bottom" : "left",
+                children: /* @__PURE__ */ t(
+                  x,
+                  {
+                    sx: oo,
+                    "aria-haspopup": "true",
+                    onClick: j,
+                    children: /* @__PURE__ */ t(S, { size: 20, sx: { color: L[600] }, children: "heroicons-solid:star" })
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ p(
+          V,
+          {
+            id: "add-menu",
+            anchorEl: c,
+            open: !!c,
+            onClose: E,
+            classes: {
+              paper: "min-w-256"
+            },
+            TransitionProps: {
+              onEntered: /* @__PURE__ */ r(() => {
+                var o;
+                (o = i == null ? void 0 : i.current) == null || o.focus();
+              }, "onEntered"),
+              onExited: /* @__PURE__ */ r(() => {
+                f("");
+              }, "onExited")
+            },
+            children: [
+              /* @__PURE__ */ p("div", { className: "flex justify-between items-center p-16 pt-8", children: [
+                /* @__PURE__ */ t(
+                  K,
+                  {
+                    inputRef: i,
+                    value: n,
+                    onChange: O,
+                    placeholder: h("Common.검색"),
+                    fullWidth: !0,
+                    inputProps: {
+                      "aria-label": "Search"
+                    },
+                    disableUnderline: !0
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  x,
+                  {
+                    sx: { color: k[500] },
+                    onClick: /* @__PURE__ */ r(() => {
+                      var o;
+                      f(""), (o = i == null ? void 0 : i.current) == null || o.focus();
+                    }, "onClick"),
+                    children: /* @__PURE__ */ t(q, {})
+                  }
+                )
+              ] }),
+              ((n == null ? void 0 : n.length) > 0 || (u == null ? void 0 : u.length) > 0) && /* @__PURE__ */ t(J, { sx: { backgroundColor: k[500] } }),
+              n.length > 0 && N.map((o) => /* @__PURE__ */ t(
+                I,
+                {
+                  shortcuts: a,
+                  item: o,
+                  onToggle: /* @__PURE__ */ r(() => C(o.id), "onToggle")
+                },
+                o.id
+              )),
+              n.length !== 0 && N.length === 0 && /* @__PURE__ */ t(Z, { color: "text.secondary", className: "p-16 pb-8", children: h("Message.검색된 결과가 없습니다...") }),
+              n.length === 0 && u.map((o) => /* @__PURE__ */ t(
+                I,
+                {
+                  shortcuts: a,
+                  item: o,
+                  onToggle: /* @__PURE__ */ r(() => C(o.id), "onToggle")
+                },
+                o.id
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+r(ro, "NavigationShortcutsToggle");
+function I(s) {
+  const { item: e, onToggle: d, shortcuts: i = [] } = s;
+  return !e || !e.id ? null : /* @__PURE__ */ t(_, { to: e.url || "", role: "button", children: /* @__PURE__ */ p(X, { children: [
+    /* @__PURE__ */ t(Q, { className: "min-w-36", children: e.icon ? /* @__PURE__ */ t(S, { children: e.icon }) : /* @__PURE__ */ t("span", { className: "text-center text-2xl font-semibold uppercase", children: e.title[0] }) }),
+    /* @__PURE__ */ t(R, { primary: e.title }),
+    /* @__PURE__ */ t(
+      x,
+      {
+        onClick: /* @__PURE__ */ r((c) => {
+          c.preventDefault(), c.stopPropagation(), d();
+        }, "onClick"),
+        size: "large",
+        children: /* @__PURE__ */ t(S, { size: 20, sx: { color: L[600] }, children: i.includes(e.id) ? "heroicons-solid:star" : "heroicons-outline:star" })
+      }
+    )
+  ] }, e.id) });
+}
+r(I, "ShortcutMenuItem");
+const jo = H([
+  F
+])(ro);
+export {
+  jo as default
+};
+//# sourceMappingURL=NavigationShortcutsToggle.js.map

package/dist/layout/components/toggles/NavigationShortcutsToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationShortcutsToggle.js","sources":["../../../../src/layout/components/toggles/NavigationShortcutsToggle.tsx"],"sourcesContent":["import { OwpSvgIcon } from '@/components/OwpSvgIcon';\nimport { useGetNavigationList } from '@/hooks/useNavigation';\nimport { useOwpTranslation } from '@/hooks/useOwpTranslation';\nimport { useGetShortcuts, useSetShortcuts } from '@/hooks/useShortcuts';\nimport { navigationSlice } from '@/store/navigationSlice';\nimport { withSlices } from '@/store/withSlices';\nimport type { OwpFlatNavItemType as FlatNavItemType } from '@/types/OwpNavigationTypes';\nimport { OwpNavigationHelper as NavigationHelper } from '@/utils/navigationUtils';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport Box from '@mui/material/Box';\nimport { amber, grey } from '@mui/material/colors';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport Input from '@mui/material/Input';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport clsx from 'clsx';\nimport { find, xor } from 'es-toolkit/compat';\nimport { type ChangeEvent, type MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport { toolbarToggleSx } from './toggleStyles';\n\ntype NavigationShortcutsToggleProps = {\n  className?: string;\n  variant?: 'horizontal' | 'vertical';\n};\n\n/**\n * Navigation shortcuts toggle.\n */\nfunction NavigationShortcutsToggle(props: NavigationShortcutsToggleProps) {\n  const { variant = 'horizontal', className = '' } = props;\n\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const [addMenu, setAddMenu] = useState<HTMLElement | null>(null);\n  const [searchText, setSearchText] = useState('');\n  const navigation = useGetNavigationList();\n  const setShortcuts = useSetShortcuts();\n  const userShortcuts = useGetShortcuts();\n  const { t } = useOwpTranslation();\n\n  const flatNavigation = useMemo(\n    () => NavigationHelper.getFlatNavigation(navigation) as FlatNavItemType[],\n    [navigation],\n  );\n\n  const shortcutItems = useMemo(\n    () =>\n      userShortcuts\n        .map((id) => find(flatNavigation, { id }))\n        .filter((item): item is FlatNavItemType => Boolean(item)),\n    [flatNavigation, userShortcuts],\n  );\n\n  const searchResults = useMemo(() => {\n    if (!searchText || !flatNavigation) {\n      return [];\n    }\n\n    const normalizedSearchText = searchText.toLowerCase();\n\n    return flatNavigation.filter((item) =>\n      item?.title?.toLowerCase()?.includes(normalizedSearchText),\n    );\n  }, [flatNavigation, searchText]);\n\n  function addMenuClick(event: MouseEvent<HTMLElement>) {\n    setAddMenu(event.currentTarget);\n  }\n\n  function addMenuClose() {\n    setAddMenu(null);\n  }\n\n  function search(ev: ChangeEvent<HTMLInputElement>) {\n    setSearchText(ev.target.value);\n  }\n\n  function toggleInShortcuts(id: string) {\n    let nextShortcuts = [...userShortcuts];\n\n    nextShortcuts = xor(nextShortcuts, [id]);\n\n    setShortcuts(nextShortcuts);\n  }\n\n  return (\n    <Box\n      className={clsx(\n        'flex flex-shrink overflow-hidden',\n        variant === 'vertical' ? 'flex-col' : '',\n        className,\n      )}\n    >\n      <Box\n        className={clsx(\n          'flex flex-1 items-center',\n          variant === 'vertical' ? 'flex-col' : 'max-h-36',\n        )}\n      >\n        <Tooltip\n          title={t('Title.즐겨찾기 등록/삭제')}\n          placement={variant === 'horizontal' ? 'bottom' : 'left'}\n        >\n          <IconButton\n            sx={toolbarToggleSx}\n            aria-haspopup=\"true\"\n            onClick={addMenuClick}\n          >\n            <OwpSvgIcon size={20} sx={{ color: amber[600] }}>\n              heroicons-solid:star\n            </OwpSvgIcon>\n          </IconButton>\n        </Tooltip>\n      </Box>\n\n      <Menu\n        id=\"add-menu\"\n        anchorEl={addMenu}\n        open={Boolean(addMenu)}\n        onClose={addMenuClose}\n        classes={{\n          paper: 'min-w-256',\n        }}\n        TransitionProps={{\n          onEntered: () => {\n            searchInputRef?.current?.focus();\n          },\n          onExited: () => {\n            setSearchText('');\n          },\n        }}\n      >\n        <div className=\"flex justify-between items-center p-16 pt-8\">\n          <Input\n            inputRef={searchInputRef}\n            value={searchText}\n            onChange={search}\n            placeholder={t('Common.검색')}\n            fullWidth\n            inputProps={{\n              'aria-label': 'Search',\n            }}\n            disableUnderline\n          />\n          <IconButton\n            sx={{ color: grey[500] }}\n            onClick={() => {\n              setSearchText('');\n              searchInputRef?.current?.focus();\n            }}\n          >\n            <ClearIcon />\n          </IconButton>\n        </div>\n\n        {(searchText?.length > 0 || shortcutItems?.length > 0) && (\n          <Divider sx={{ backgroundColor: grey[500] }} />\n        )}\n\n        {searchText.length > 0 &&\n          searchResults.map((_item) => (\n            <ShortcutMenuItem\n              shortcuts={userShortcuts}\n              key={_item.id}\n              item={_item}\n              onToggle={() => toggleInShortcuts(_item.id)}\n            />\n          ))}\n\n        {searchText.length !== 0 && searchResults.length === 0 && (\n          <Typography color=\"text.secondary\" className=\"p-16 pb-8\">\n            {t('Message.검색된 결과가 없습니다...')}\n          </Typography>\n        )}\n\n        {searchText.length === 0 &&\n          shortcutItems.map((_item) => (\n            <ShortcutMenuItem\n              shortcuts={userShortcuts}\n              key={_item.id}\n              item={_item}\n              onToggle={() => toggleInShortcuts(_item.id)}\n            />\n          ))}\n      </Menu>\n    </Box>\n  );\n}\n\nfunction ShortcutMenuItem(props: {\n  shortcuts?: string[];\n  item: FlatNavItemType;\n  onToggle: () => void;\n}) {\n  const { item, onToggle, shortcuts = [] } = props;\n\n  if (!item || !item.id) {\n    return null;\n  }\n\n  return (\n    <Link to={item.url || ''} role=\"button\">\n      <MenuItem key={item.id}>\n        <ListItemIcon className=\"min-w-36\">\n          {item.icon ? (\n            <OwpSvgIcon>{item.icon}</OwpSvgIcon>\n          ) : (\n            <span className=\"text-center text-2xl font-semibold uppercase\">{item.title[0]}</span>\n          )}\n        </ListItemIcon>\n        <ListItemText primary={item.title} />\n        <IconButton\n          onClick={(ev) => {\n            ev.preventDefault();\n            ev.stopPropagation();\n            onToggle();\n          }}\n          size=\"large\"\n        >\n          <OwpSvgIcon size={20} sx={{ color: amber[600] }}>\n            {shortcuts.includes(item.id) ? 'heroicons-solid:star' : 'heroicons-outline:star'}\n          </OwpSvgIcon>\n        </IconButton>\n      </MenuItem>\n    </Link>\n  );\n}\n\n/**\n * Memoized navigation shortcuts toggle.\n */\nconst NavigationShortcutsToggleWithSlices = withSlices<NavigationShortcutsToggleProps>([\n  navigationSlice,\n])(NavigationShortcutsToggle);\n\nexport default NavigationShortcutsToggleWithSlices;\n"],"names":["NavigationShortcutsToggle","props","variant","className","searchInputRef","useRef","addMenu","setAddMenu","useState","searchText","setSearchText","navigation","useGetNavigationList","setShortcuts","useSetShortcuts","userShortcuts","useGetShortcuts","t","useOwpTranslation","flatNavigation","useMemo","NavigationHelper","shortcutItems","id","find","item","searchResults","normalizedSearchText","_b","_a","addMenuClick","event","__name","addMenuClose","search","ev","toggleInShortcuts","nextShortcuts","xor","jsxs","Box","clsx","jsx","Tooltip","IconButton","toolbarToggleSx","OwpSvgIcon","amber","Menu","Input","grey","ClearIcon","Divider","_item","ShortcutMenuItem","Typography","onToggle","shortcuts","Link","MenuItem","ListItemIcon","ListItemText","NavigationShortcutsToggleWithSlices","withSlices","navigationSlice"],"mappings":"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"}

package/dist/layout/components/toggles/toggleStyles.js

@@ -0,0 +1,18 @@
+var a = Object.defineProperty;
+var o = (r, t) => a(r, "name", { value: t, configurable: !0 });
+import { alpha as i } from "@mui/material/styles";
+function d(r) {
+  return {
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: i(r.palette.text.primary, 0.38),
+    transition: r.transitions.create(["background-color", "border-color", "transform"], {
+      duration: r.transitions.duration.shorter
+    })
+  };
+}
+o(d, "toolbarToggleSx");
+export {
+  d as toolbarToggleSx
+};
+//# sourceMappingURL=toggleStyles.js.map

package/dist/layout/components/toggles/toggleStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleStyles.js","sources":["../../../../src/layout/components/toggles/toggleStyles.ts"],"sourcesContent":["import { alpha, type Theme } from '@mui/material/styles';\n\n/**\n * Shared toolbar toggle surface style.\n */\nexport function toolbarToggleSx(theme: Theme) {\n  return {\n    borderWidth: '1px',\n    borderStyle: 'solid',\n    borderColor: alpha(theme.palette.text.primary, 0.38),\n    transition: theme.transitions.create(['background-color', 'border-color', 'transform'], {\n      duration: theme.transitions.duration.shorter,\n    }),\n  };\n}\n"],"names":["toolbarToggleSx","theme","alpha","__name"],"mappings":";;;AAKO,SAASA,EAAgBC,GAAc;AAC5C,SAAO;AAAA,IACL,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAaC,EAAMD,EAAM,QAAQ,KAAK,SAAS,IAAI;AAAA,IACnD,YAAYA,EAAM,YAAY,OAAO,CAAC,oBAAoB,gBAAgB,WAAW,GAAG;AAAA,MACtF,UAAUA,EAAM,YAAY,SAAS;AAAA,IAAA,CACtC;AAAA,EAAA;AAEL;AATgBE,EAAAH,GAAA;"}

package/dist/layout/components/toolbar/ToolbarLayout.js

@@ -0,0 +1,106 @@
+var u = Object.defineProperty;
+var n = (i, p) => u(i, "name", { value: p, configurable: !0 });
+import { jsx as a, jsxs as m } from "../../../node_modules/.pnpm/@emotion_react@11.14.0_@types_react@19.2.14_react@19.2.4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
+import { useOwpAppContext as b } from "../../../contexts/OwpAppProvider.js";
+import { OwpHidden as c } from "../../../components/OwpHidden/OwpHidden.js";
+import { useAppSelector as s } from "../../../hooks/useAppStore.js";
+import d from "../navbar/NavbarToggleButton.js";
+import { selectOwpCurrentLayoutConfig as f, selectToolbarTheme as g } from "../../../store/owpSettingsSlice.js";
+import x from "@mui/material/AppBar";
+import h from "@mui/material/Toolbar";
+import { alpha as t, ThemeProvider as v } from "@mui/material/styles";
+import { clsx as k } from "../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { memo as w } from "react";
+import y from "../toggles/FullScreenToggle.js";
+import T from "../toggles/LanguageSwitcherToggle.js";
+import N from "../toggles/LogoutToggle.js";
+import S from "../toggles/NavigationSearchToggle.js";
+import C from "../toggles/NavigationShortcutsToggle.js";
+import B from "../../../components/OwpPageBreadcrumb/OwpPageBreadcrumb.js";
+function $(i) {
+  const { className: p } = i, l = s(f), o = s(g), { env: e } = b();
+  return /* @__PURE__ */ a(v, { theme: o, children: /* @__PURE__ */ a(
+    x,
+    {
+      id: "owp-toolbar",
+      className: k("relative z-20 flex border-b", p),
+      color: "default",
+      sx: /* @__PURE__ */ n((r) => ({
+        "--toolbar-surface-default": o.palette.background.default,
+        "--toolbar-surface-paper": o.palette.background.paper,
+        "--toolbar-surface-glow": t(
+          o.palette.primary.light ?? o.palette.primary.main,
+          r.palette.mode === "dark" ? 0.28 : 0.16
+        ),
+        "--toolbar-surface-line": t(
+          r.palette.common.white,
+          r.palette.mode === "dark" ? 0.14 : 0.72
+        ),
+        "--toolbar-surface-button": t(
+          r.palette.common.white,
+          r.palette.mode === "dark" ? 0.05 : 0.82
+        ),
+        "--toolbar-surface-button-hover": t(
+          o.palette.primary.light ?? o.palette.primary.main,
+          r.palette.mode === "dark" ? 0.18 : 0.12
+        ),
+        backgroundColor: "var(--toolbar-surface-default)",
+        backgroundImage: `
+            radial-gradient(circle at 10% 16%, var(--toolbar-surface-glow) 0%, transparent 30%),
+            linear-gradient(115deg, ${t(o.palette.primary.light ?? o.palette.primary.main, 0.16)} 0%, transparent 34%),
+            linear-gradient(180deg, var(--toolbar-surface-default) 0%, var(--toolbar-surface-paper) 100%)
+          `,
+        borderBottomColor: "var(--toolbar-surface-line)",
+        boxShadow: `
+            inset 0 1px 0 ${t(r.palette.common.white, r.palette.mode === "dark" ? 0.08 : 0.92)},
+            inset 0 -1px 0 ${t(r.palette.common.black, r.palette.mode === "dark" ? 0.2 : 0.05)},
+            0 10px 28px ${t(o.palette.background.paper, r.palette.mode === "dark" ? 0.32 : 0.12)}
+          `,
+        "& .MuiIconButton-root": {
+          backgroundColor: "var(--toolbar-surface-button)",
+          border: `1px solid ${t(r.palette.common.white, r.palette.mode === "dark" ? 0.12 : 0.9)}`,
+          boxShadow: `inset 0 1px 0 ${t(r.palette.common.white, r.palette.mode === "dark" ? 0.05 : 0.7)}`,
+          transition: r.transitions.create(
+            ["background-color", "border-color", "transform"],
+            {
+              duration: r.transitions.duration.shorter
+            }
+          )
+        },
+        "& .MuiIconButton-root:hover": {
+          backgroundColor: "var(--toolbar-surface-button-hover)",
+          borderColor: t(
+            o.palette.primary.light ?? o.palette.primary.main,
+            r.palette.mode === "dark" ? 0.36 : 0.2
+          ),
+          transform: "translateY(-1px)"
+        },
+        "& .MuiBreadcrumbs-separator": {
+          color: t(r.palette.common.white, r.palette.mode === "dark" ? 0.42 : 0.5)
+        }
+      }), "sx"),
+      position: "static",
+      elevation: 0,
+      children: /* @__PURE__ */ m(h, { className: "min-h-48 px-6 py-0 md:min-h-64 md:px-[14px]", children: [
+        /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-1 items-center gap-8", children: [
+          l.navbar.display && l.navbar.position === "left" && /* @__PURE__ */ a(c, { lgUp: !0, children: /* @__PURE__ */ a(d, { className: "mx-0 h-40 w-40 p-0 sm:mx-8" }) }),
+          /* @__PURE__ */ a(B, {})
+        ] }),
+        /* @__PURE__ */ m("div", { className: "flex items-center overflow-x-auto gap-6", children: [
+          (e == null ? void 0 : e.isI18nEnabled) && (e == null ? void 0 : e.isI18nLanguageSwitcherEnabled) && /* @__PURE__ */ a(T, { canRefresh: !0 }),
+          /* @__PURE__ */ a(y, {}),
+          /* @__PURE__ */ a(S, {}),
+          /* @__PURE__ */ a(C, {}),
+          !l.navbar.display && /* @__PURE__ */ a(N, {})
+        ] }),
+        l.navbar.display && l.navbar.position === "right" && /* @__PURE__ */ a(c, { lgUp: !0, children: /* @__PURE__ */ a(d, { className: "mx-0 h-40 w-40 p-0 sm:mx-8" }) })
+      ] })
+    }
+  ) });
+}
+n($, "ToolbarLayout");
+const J = w($);
+export {
+  J as default
+};
+//# sourceMappingURL=ToolbarLayout.js.map

package/dist/layout/components/toolbar/ToolbarLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarLayout.js","sources":["../../../../src/layout/components/toolbar/ToolbarLayout.tsx"],"sourcesContent":["import { useOwpAppContext } from '@/contexts/OwpAppProvider';\nimport { OwpHidden } from '@/components/OwpHidden';\nimport { OwpPageBreadcrumb as PageBreadcrumb } from '@/components/OwpPageBreadcrumb';\nimport { LayoutConfigDefaultsType } from '@/configs/layoutConfig';\nimport { useAppSelector } from '@/hooks/useAppStore';\nimport NavbarToggleButton from '@/layout/components/navbar/NavbarToggleButton';\nimport {\n  selectOwpCurrentLayoutConfig as selectCurrentLayoutConfig,\n  selectToolbarTheme,\n} from '@/store/owpSettingsSlice';\nimport AppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport { alpha, ThemeProvider } from '@mui/material/styles';\nimport clsx from 'clsx';\nimport { memo } from 'react';\nimport FullScreenToggle from '../toggles/FullScreenToggle';\nimport LanguageSwitcherToggle from '../toggles/LanguageSwitcherToggle';\nimport LogoutToggle from '../toggles/LogoutToggle';\nimport NavigationSearchToggle from '../toggles/NavigationSearchToggle';\nimport NavigationShortcutsToggle from '../toggles/NavigationShortcutsToggle';\n\ntype ToolbarLayoutProps = {\n  className?: string;\n};\n\n/**\n * The toolbar layout.\n */\nfunction ToolbarLayout(props: ToolbarLayoutProps) {\n  const { className } = props;\n  const config = useAppSelector(selectCurrentLayoutConfig) as LayoutConfigDefaultsType;\n  const toolbarTheme = useAppSelector(selectToolbarTheme);\n  const { env } = useOwpAppContext();\n\n  return (\n    <ThemeProvider theme={toolbarTheme}>\n      <AppBar\n        id=\"owp-toolbar\"\n        className={clsx('relative z-20 flex border-b', className)}\n        color=\"default\"\n        sx={(theme) => ({\n          '--toolbar-surface-default': (toolbarTheme as any).palette.background.default,\n          '--toolbar-surface-paper': (toolbarTheme as any).palette.background.paper,\n          '--toolbar-surface-glow': alpha(\n            (toolbarTheme as any).palette.primary.light ??\n              (toolbarTheme as any).palette.primary.main,\n            theme.palette.mode === 'dark' ? 0.28 : 0.16,\n          ),\n          '--toolbar-surface-line': alpha(\n            theme.palette.common.white,\n            theme.palette.mode === 'dark' ? 0.14 : 0.72,\n          ),\n          '--toolbar-surface-button': alpha(\n            theme.palette.common.white,\n            theme.palette.mode === 'dark' ? 0.05 : 0.82,\n          ),\n          '--toolbar-surface-button-hover': alpha(\n            (toolbarTheme as any).palette.primary.light ??\n              (toolbarTheme as any).palette.primary.main,\n            theme.palette.mode === 'dark' ? 0.18 : 0.12,\n          ),\n          backgroundColor: 'var(--toolbar-surface-default)',\n          backgroundImage: `\n            radial-gradient(circle at 10% 16%, var(--toolbar-surface-glow) 0%, transparent 30%),\n            linear-gradient(115deg, ${alpha((toolbarTheme as any).palette.primary.light ?? (toolbarTheme as any).palette.primary.main, 0.16)} 0%, transparent 34%),\n            linear-gradient(180deg, var(--toolbar-surface-default) 0%, var(--toolbar-surface-paper) 100%)\n          `,\n          borderBottomColor: 'var(--toolbar-surface-line)',\n          boxShadow: `\n            inset 0 1px 0 ${alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.08 : 0.92)},\n            inset 0 -1px 0 ${alpha(theme.palette.common.black, theme.palette.mode === 'dark' ? 0.2 : 0.05)},\n            0 10px 28px ${alpha((toolbarTheme as any).palette.background.paper, theme.palette.mode === 'dark' ? 0.32 : 0.12)}\n          `,\n          '& .MuiIconButton-root': {\n            backgroundColor: 'var(--toolbar-surface-button)',\n            border: `1px solid ${alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.12 : 0.9)}`,\n            boxShadow: `inset 0 1px 0 ${alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.05 : 0.7)}`,\n            transition: theme.transitions.create(\n              ['background-color', 'border-color', 'transform'],\n              {\n                duration: theme.transitions.duration.shorter,\n              },\n            ),\n          },\n          '& .MuiIconButton-root:hover': {\n            backgroundColor: 'var(--toolbar-surface-button-hover)',\n            borderColor: alpha(\n              (toolbarTheme as any).palette.primary.light ??\n                (toolbarTheme as any).palette.primary.main,\n              theme.palette.mode === 'dark' ? 0.36 : 0.2,\n            ),\n            transform: 'translateY(-1px)',\n          },\n          '& .MuiBreadcrumbs-separator': {\n            color: alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.42 : 0.5),\n          },\n        })}\n        position=\"static\"\n        elevation={0}\n      >\n        <Toolbar className=\"min-h-48 px-6 py-0 md:min-h-64 md:px-[14px]\">\n          <div className=\"flex min-w-0 flex-1 items-center gap-8\">\n            {config.navbar.display && config.navbar.position === 'left' && (\n              <OwpHidden lgUp>\n                <NavbarToggleButton className=\"mx-0 h-40 w-40 p-0 sm:mx-8\" />\n              </OwpHidden>\n            )}\n\n            <PageBreadcrumb />\n          </div>\n\n          <div className=\"flex items-center overflow-x-auto gap-6\">\n            {env?.isI18nEnabled && env?.isI18nLanguageSwitcherEnabled && (\n              <LanguageSwitcherToggle canRefresh />\n            )}\n            <FullScreenToggle />\n            <NavigationSearchToggle />\n            <NavigationShortcutsToggle />\n            {!config.navbar.display && <LogoutToggle />}\n          </div>\n\n          {config.navbar.display && config.navbar.position === 'right' && (\n            <OwpHidden lgUp>\n              <NavbarToggleButton className=\"mx-0 h-40 w-40 p-0 sm:mx-8\" />\n            </OwpHidden>\n          )}\n        </Toolbar>\n      </AppBar>\n    </ThemeProvider>\n  );\n}\n\nexport default memo(ToolbarLayout);\n"],"names":["ToolbarLayout","props","className","config","useAppSelector","selectCurrentLayoutConfig","toolbarTheme","selectToolbarTheme","env","useOwpAppContext","jsx","ThemeProvider","AppBar","clsx","__name","theme","alpha","jsxs","Toolbar","OwpHidden","NavbarToggleButton","PageBreadcrumb","LanguageSwitcherToggle","FullScreenToggle","NavigationSearchToggle","NavigationShortcutsToggle","LogoutToggle","ToolbarLayout$1","memo"],"mappings":"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"}

package/dist/layout/themeLayoutConfigs.js

@@ -0,0 +1,8 @@
+import o from "../configs/layoutConfig.js";
+const a = {
+  layout: o
+};
+export {
+  a as default
+};
+//# sourceMappingURL=themeLayoutConfigs.js.map

package/dist/layout/themeLayoutConfigs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeLayoutConfigs.js","sources":["../../src/layout/themeLayoutConfigs.ts"],"sourcesContent":["import { ThemeFormConfigTypes } from '@/types/ThemeFormConfigTypes';\nimport layout, { LayoutConfigDefaultsType } from '@/configs/layoutConfig';\n\n/**\n * The type definition for the theme layout defaults.\n */\nexport type themeLayoutDefaultsProps = LayoutConfigDefaultsType;\n\n/**\n * The type definition for the theme layout.\n */\nexport type themeLayoutProps = {\n  title: string;\n  defaults: themeLayoutDefaultsProps;\n  form?: ThemeFormConfigTypes;\n};\n\n/**\n * The type definition for the theme layout configs.\n */\nexport type themeLayoutConfigsProps = {\n  [key: string]: themeLayoutProps;\n};\n\n/**\n * The theme layout configs.\n */\nconst themeLayoutConfigs: themeLayoutConfigsProps = {\n  layout: layout as themeLayoutProps,\n};\n\nexport default themeLayoutConfigs;\n"],"names":["themeLayoutConfigs","layout"],"mappings":";AA2BA,MAAMA,IAA8C;AAAA,EAAA,QAClDC;AACF;"}

package/dist/layout/themeLayouts.js

@@ -0,0 +1,8 @@
+import o from "./Layout.js";
+const a = {
+  layout: o
+};
+export {
+  a as themeLayouts
+};
+//# sourceMappingURL=themeLayouts.js.map

package/dist/layout/themeLayouts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeLayouts.js","sources":["../../src/layout/themeLayouts.ts"],"sourcesContent":["import type { ComponentType, ReactNode } from 'react';\nimport Layout from './Layout';\n\n/**\n * The type definition for the theme layouts.\n */\nexport type themeLayoutsType = {\n  [key: string]: ComponentType<{ children?: ReactNode }>;\n};\n\n/**\n * The theme layouts.\n */\nexport const themeLayouts: themeLayoutsType = {\n  layout: Layout,\n};\n"],"names":["themeLayouts","Layout"],"mappings":";AAaO,MAAMA,IAAiC;AAAA,EAC5C,QAAQC;AACV;"}