@budibase/bbui 1.4.1 → 1.4.2

package/src/helpers.js

@@ -0,0 +1,134 @@
+/**
+ * Generates a DOM safe UUID.
+ * Starting with a letter is important to make it DOM safe.
+ * @return {string} a random DOM safe UUID
+ */
+export function uuid() {
+  return "cxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, c => {
+    const r = (Math.random() * 16) | 0
+    const v = c === "x" ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+
+/**
+ * Capitalises a string
+ * @param string the string to capitalise
+ * @return {string} the capitalised string
+ */
+export const capitalise = string => {
+  if (!string) {
+    return string
+  }
+  return string.substring(0, 1).toUpperCase() + string.substring(1)
+}
+
+/**
+ * Computes a short hash of a string
+ * @param string the string to compute a hash of
+ * @return {string} the hash string
+ */
+export const hashString = string => {
+  if (!string) {
+    return "0"
+  }
+  let hash = 0
+  for (let i = 0; i < string.length; i++) {
+    let char = string.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32bit integer
+  }
+  return hash.toString()
+}
+
+/**
+ * Gets a key within an object. The key supports dot syntax for retrieving deep
+ * fields - e.g. "a.b.c".
+ * Exact matches of keys with dots in them take precedence over nested keys of
+ * the same path - e.g. getting "a.b" from { "a.b": "foo", a: { b: "bar" } }
+ * will return "foo" over "bar".
+ * @param obj the object
+ * @param key the key
+ * @return {*|null} the value or null if a value was not found for this key
+ */
+export const deepGet = (obj, key) => {
+  if (!obj || !key) {
+    return null
+  }
+  if (Object.prototype.hasOwnProperty.call(obj, key)) {
+    return obj[key]
+  }
+  const split = key.split(".")
+  for (let i = 0; i < split.length; i++) {
+    obj = obj?.[split[i]]
+  }
+  return obj
+}
+
+/**
+ * Sets a key within an object. The key supports dot syntax for retrieving deep
+ * fields - e.g. "a.b.c".
+ * Exact matches of keys with dots in them take precedence over nested keys of
+ * the same path - e.g. setting "a.b" of { "a.b": "foo", a: { b: "bar" } }
+ * will override the value "foo" rather than "bar".
+ * If a deep path is specified and the parent keys don't exist then these will
+ * be created.
+ * @param obj the object
+ * @param key the key
+ * @param value the value
+ */
+export const deepSet = (obj, key, value) => {
+  if (!obj || !key) {
+    return
+  }
+  if (Object.prototype.hasOwnProperty.call(obj, key)) {
+    obj[key] = value
+    return
+  }
+  const split = key.split(".")
+  for (let i = 0; i < split.length - 1; i++) {
+    const nextKey = split[i]
+    if (obj && obj[nextKey] == null) {
+      obj[nextKey] = {}
+    }
+    obj = obj?.[nextKey]
+  }
+  if (!obj) {
+    return
+  }
+  obj[split[split.length - 1]] = value
+}
+
+/**
+ * Deeply clones an object. Functions are not supported.
+ * @param obj the object to clone
+ */
+export const cloneDeep = obj => {
+  return JSON.parse(JSON.stringify(obj))
+}
+
+/**
+ * Copies a value to the clipboard
+ * @param value the value to copy
+ */
+export const copyToClipboard = value => {
+  return new Promise(res => {
+    if (navigator.clipboard && window.isSecureContext) {
+      // Try using the clipboard API first
+      navigator.clipboard.writeText(value).then(res)
+    } else {
+      // Fall back to the textarea hack
+      let textArea = document.createElement("textarea")
+      textArea.value = value
+      textArea.style.position = "fixed"
+      textArea.style.left = "-9999px"
+      textArea.style.top = "-9999px"
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      document.execCommand("copy")
+      textArea.remove()
+      res()
+    }
+  })
+}

package/src/index.js

@@ -1,15 +1,101 @@
-// Single default export
+import "./bbui.css"
 
-// export { default as default } from './Component.svelte';
+// Spectrum icons
+import "@spectrum-css/icon/dist/index-vars.css"
 
-// OR multiple named exports
-//
-//     import { Foo, Bar } from 'my-lib'
-//
+// Components
+export { default as Input } from "./Form/Input.svelte"
+export { default as Stepper } from "./Form/Stepper.svelte"
+export { default as TextArea } from "./Form/TextArea.svelte"
+export { default as Select } from "./Form/Select.svelte"
+export { default as Combobox } from "./Form/Combobox.svelte"
+export { default as Dropzone } from "./Form/Dropzone.svelte"
+export { default as Drawer } from "./Drawer/Drawer.svelte"
+export { default as DrawerContent } from "./Drawer/DrawerContent.svelte"
+export { default as Avatar } from "./Avatar/Avatar.svelte"
+export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
+export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
+export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
+export { default as Button } from "./Button/Button.svelte"
+export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
+export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
+export { default as Icon, directions } from "./Icon/Icon.svelte"
+export { default as Toggle } from "./Form/Toggle.svelte"
+export { default as RadioGroup } from "./Form/RadioGroup.svelte"
+export { default as Checkbox } from "./Form/Checkbox.svelte"
+export { default as InputDropdown } from "./Form/InputDropdown.svelte"
+export { default as PickerDropdown } from "./Form/PickerDropdown.svelte"
+export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
+export { default as Popover } from "./Popover/Popover.svelte"
+export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
+export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
+export { default as Label } from "./Label/Label.svelte"
+export { default as Layout } from "./Layout/Layout.svelte"
+export { default as Page } from "./Layout/Page.svelte"
+export { default as Link } from "./Link/Link.svelte"
+export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
+export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
+export { default as Menu } from "./Menu/Menu.svelte"
+export { default as MenuSection } from "./Menu/Section.svelte"
+export { default as MenuSeparator } from "./Menu/Separator.svelte"
+export { default as MenuItem } from "./Menu/Item.svelte"
+export { default as Modal } from "./Modal/Modal.svelte"
+export { default as ModalContent } from "./Modal/ModalContent.svelte"
+export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
+export { default as Notification } from "./Notification/Notification.svelte"
+export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
+export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
+export { default as DatePicker } from "./Form/DatePicker.svelte"
+export { default as Multiselect } from "./Form/Multiselect.svelte"
+export { default as Context } from "./context"
+export { default as Table } from "./Table/Table.svelte"
+export { default as Tabs } from "./Tabs/Tabs.svelte"
+export { default as Tab } from "./Tabs/Tab.svelte"
+export { default as Tags } from "./Tags/Tags.svelte"
+export { default as Tag } from "./Tags/Tag.svelte"
+export { default as TreeView } from "./TreeView/Tree.svelte"
+export { default as TreeItem } from "./TreeView/Item.svelte"
+export { default as Divider } from "./Divider/Divider.svelte"
+export { default as Search } from "./Form/Search.svelte"
+export { default as Pagination } from "./Pagination/Pagination.svelte"
+export { default as Badge } from "./Badge/Badge.svelte"
+export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
+export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
+export { default as IconPicker } from "./IconPicker/IconPicker.svelte"
+export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
+export { default as Banner } from "./Banner/Banner.svelte"
+export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
+export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
+export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
+export { default as RichTextField } from "./Form/RichTextField.svelte"
+export { default as List } from "./List/List.svelte"
+export { default as ListItem } from "./List/ListItem.svelte"
+export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
+export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
+export { default as Slider } from "./Form/Slider.svelte"
 
-export { default as Input } from './Form/Input.svelte';
-export { default as TextArea } from './Form/TextArea.svelte';
-export { default as Button } from './Form/Button.svelte';
-export { default as Home } from './Links/Home.svelte';
-export { default as DetailSummary } from './List/Items/DetailSummary.svelte';
-export { default as Switcher } from './Switcher/Switcher.svelte';
+// Renderers
+export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
+export { default as CodeRenderer } from "./Table/CodeRenderer.svelte"
+export { default as InternalRenderer } from "./Table/InternalRenderer.svelte"
+
+// Typography
+export { default as Body } from "./Typography/Body.svelte"
+export { default as Heading } from "./Typography/Heading.svelte"
+export { default as Detail } from "./Typography/Detail.svelte"
+export { default as Code } from "./Typography/Code.svelte"
+
+// Core form components to be used elsewhere (standard components)
+export * from "./Form/Core"
+
+// Actions
+export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
+export { default as positionDropdown } from "./Actions/position_dropdown"
+export { default as clickOutside } from "./Actions/click_outside"
+
+// Stores
+export { notifications, createNotificationStore } from "./Stores/notifications"
+export { banner, BANNER_TYPES } from "./Stores/banner"
+
+// Helpers
+export * as Helpers from "./helpers"

package/src/spectrum-icons-rollup.js

@@ -0,0 +1,31 @@
+import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg"
+import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg"
+
+export default () => {
+  loadIconSet("Spectrum UI Icons", SpectrumUIIcons)
+  loadIconSet("Spectrum Workflow Icons", SpectrumWorkflowIcons)
+}
+
+const loadIconSet = (name, markup) => {
+  // Parse the SVG
+  const parser = new DOMParser()
+  try {
+    const doc = parser.parseFromString(markup, "image/svg+xml")
+    const svg = doc.firstChild
+
+    // Check a real SVG was parsed
+    if (svg && svg.tagName === "svg") {
+      // Hide the element
+      svg.style.display = "none"
+
+      // Insert it into the head
+      document.head.insertBefore(svg, null)
+    } else {
+      throw "Invalid tag type for SVG definition"
+    }
+  } catch (err) {
+    // Swallow error, but icons won't work
+    console.error(err)
+    console.error(`Failed to parse ${name}. Icons won't work.`)
+  }
+}

package/src/spectrum-icons-vite.js

@@ -0,0 +1,31 @@
+import SpectrumUIIcons from "@spectrum-css/icon/dist/spectrum-css-icons.svg?raw"
+import SpectrumWorkflowIcons from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw"
+
+export default () => {
+  loadIconSet("Spectrum UI Icons", SpectrumUIIcons)
+  loadIconSet("Spectrum Workflow Icons", SpectrumWorkflowIcons)
+}
+
+const loadIconSet = (name, markup) => {
+  // Parse the SVG
+  const parser = new DOMParser()
+  try {
+    const doc = parser.parseFromString(markup, "image/svg+xml")
+    const svg = doc.firstChild
+
+    // Check a real SVG was parsed
+    if (svg && svg.tagName === "svg") {
+      // Hide the element
+      svg.style.display = "none"
+
+      // Insert it into the head
+      document.head.insertBefore(svg, null)
+    } else {
+      throw "Invalid tag type for SVG definition"
+    }
+  } catch (err) {
+    // Swallow error, but icons won't work
+    console.error(err)
+    console.error(`Failed to parse ${name}. Icons won't work.`)
+  }
+}

package/dist/bundle.css

@@ -1,8 +0,0 @@
-button.svelte-1oez5n8{cursor:pointer;font-weight:500;font-size:14px;box-sizing:border-box;overflow:hidden;border-radius:3px;color:var(--white);padding:0px 24px;height:32px;transition:all 0.2s ease 0s;display:inline-block;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;min-width:auto;outline:none;font-feature-settings:"case" 1,"rlig" 1,"calt" 0;-webkit-box-align:center;user-select:none;flex-shrink:0}.primary.svelte-1oez5n8{border:solid 1px var(--ink);background-color:var(--ink)}button.primary.svelte-1oez5n8:hover:not([disabled]){border:solid 1px var(--grey);background-color:var(--white);color:var(--ink)}.secondary.svelte-1oez5n8{border:solid 1px var(--grey);background-color:white;color:var(--ink)}button.secondary.svelte-1oez5n8:hover:not([disabled]){border:solid 1px var(--ink);background-color:var(--ink);color:white}.attention.svelte-1oez5n8{background-color:var(--blue);border:solid 1px var(--blue)}button.attention.svelte-1oez5n8:hover:not([disabled]){border:solid 1px var(--blue);background-color:var(--white);color:var(--blue)}.error.svelte-1oez5n8{border:solid 1px var(--red);background-color:var(--red);color:white}button.error.svelte-1oez5n8:hover:not([disabled]){border:solid 1px var(--red);background-color:white;color:var(--red)}.warning.svelte-1oez5n8{border:solid 1px var(--yellow);background-color:var(--yellow);color:white}button.warning.svelte-1oez5n8:hover:not([disabled]){border:solid 1px var(--yellow);background-color:white;color:var(--yellow)}.small.svelte-1oez5n8{width:100px;height:24px;line-height:22px;padding:0px 10px;font-weight:500}.medium.svelte-1oez5n8{width:200px;height:40px}.large.svelte-1oez5n8{width:200px;height:50px;font-weight:500;font-size:18px}.wide.svelte-1oez5n8{width:100%;max-width:260px;height:32px;line-height:22px;padding:0px 10px;font-weight:500}button.svelte-1oez5n8:disabled{background-color:var(--grey-dark);cursor:not-allowed;border:solid 1px var(--grey-dark)}
-.container.svelte-1ujfzyw{display:flex;flex-direction:column;font-size:14px;font-weight:500;line-height:1.17}label.svelte-1ujfzyw{color:var(--font);margin-bottom:12px}input.svelte-1ujfzyw{box-sizing:border-box;color:var(--font);font-size:18px;border-radius:3px;border:solid 1px var(--grey-medium);padding:20px;margin:0;background-color:white}input.svelte-1ujfzyw::placeholder{color:var(--grey-medium)}input.svelte-1ujfzyw:focus{box-shadow:0 4px 16px 0 rgba(57, 60, 68, 0.08)}input.svelte-1ujfzyw:disabled{background:var(--grey-medium)}
-.container.svelte-b7rdfu{display:flex;flex-direction:column;font-size:18px;font-weight:500;line-height:1.17}label.svelte-b7rdfu{color:var(--font);margin-bottom:12px}textarea.svelte-b7rdfu{color:var(--font);font-size:18px;border-radius:3px;border:solid 1px var(--grey-medium);padding:20px;margin:0}textarea.svelte-b7rdfu::placeholder{color:var(--grey-dark)}textarea.svelte-b7rdfu:focus{box-shadow:0 4px 16px 0 rgba(57, 60, 68, 0.08)}textarea.svelte-b7rdfu:disabled{background:var(--grey-medium)}
-.nav-item.svelte-dsza1v{cursor:pointer;padding:12px;height:40px;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:3px}.nav-item.svelte-dsza1v:hover{background-color:var(--grey-light)}.nav-item-title.svelte-dsza1v{font-size:14px;color:var(--ink);font-weight:400;margin-left:12px}.nav-item-icon.svelte-dsza1v{color:var(--ink-light)}.active.svelte-dsza1v{background-color:var(--blue-light)}
-.property-group-container.svelte-1ds8322{display:flex;flex-direction:column;height:auto;background:var(--grey-light);margin:0px 0px 4px 0px;padding:8px 12px;justify-content:center;border-radius:4px}.property-group-name.svelte-1ds8322{cursor:pointer;display:flex;flex-flow:row nowrap}.name.svelte-1ds8322{flex:1;text-align:left;padding-top:2px;font-size:14px;font-weight:500;letter-spacing:0.14px;color:var(--ink)}.icon.svelte-1ds8322{flex:0 0 20px;text-align:center}.property-panel.svelte-1ds8322{display:none}.show.svelte-1ds8322{display:flex;flex-direction:column;flex:1}
-header.svelte-1qsas4l{display:grid;grid-gap:20px;grid-auto-flow:column}span.svelte-1qsas4l{font-size:18px;font-weight:bold;color:var(--ink-lighter)}span.svelte-1qsas4l:hover{cursor:pointer}.selected.svelte-1qsas4l{color:var(--ink)}
-
-/*# sourceMappingURL=bundle.css.map */

package/dist/bundle.css.map

@@ -1,22 +0,0 @@
-{
-  "version": 3,
-  "file": "bundle.css",
-  "sources": [
-    "../Button.svelte",
-    "../Input.svelte",
-    "../TextArea.svelte",
-    "../Home.svelte",
-    "../DetailSummary.svelte",
-    "../Switcher.svelte"
-  ],
-  "sourcesContent": [
-    "<script>\n  export let \n    primary = false,\n    secondary = false,\n    attention = false,\n    disabled = false,\n    error = false,\n    warning = false,\n    small = false,\n    medium = false,\n    wide = false,\n    large = false;\n</script>\n\n<style>\n  button {\n    cursor: pointer;\n    font-weight: 500;\n    font-size: 14px;\n    box-sizing: border-box;\n    overflow: hidden;\n    border-radius: 3px;\n    color: var(--white);\n    padding: 0px 24px;\n    height: 32px;\n    transition: all 0.2s ease 0s;\n    display: inline-block;\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n    min-width: auto;\n    outline: none;\n    font-feature-settings: \"case\" 1,\"rlig\" 1,\"calt\" 0;\n    -webkit-box-align: center;\n    user-select: none;\n    flex-shrink: 0;\n  }\n\n  .primary {\n    border: solid 1px var(--ink);\n    background-color: var(--ink);\n  }\n  button.primary:hover:not([disabled]) {\n    border: solid 1px var(--grey);\n    background-color: var(--white);\n    color: var(--ink);\n  }\n  .secondary {\n    border: solid 1px var(--grey);\n    background-color: white;\n    color: var(--ink);\n  }\n  button.secondary:hover:not([disabled]) {\n    border: solid 1px var(--ink);\n    background-color: var(--ink);\n    color: white;\n  }\n  .attention {\n    background-color: var(--blue);\n    border: solid 1px var(--blue);\n  }\n  button.attention:hover:not([disabled]) {\n    border: solid 1px var(--blue);\n    background-color: var(--white);\n    color: var(--blue);\n  }\n  .error {\n    border: solid 1px var(--red);\n    background-color: var(--red);\n    color: white;\n  }\n  button.error:hover:not([disabled]) {\n    border: solid 1px var(--red);\n    background-color: white;\n    color: var(--red);\n  }\n  .warning {\n    border: solid 1px var(--yellow);\n    background-color: var(--yellow);\n    color: white;\n  }\n  button.warning:hover:not([disabled]) {\n    border: solid 1px var(--yellow);\n    background-color: white;\n    color: var(--yellow);\n  }\n  .small {\n    width: 100px;\n    height: 24px;\n    line-height: 22px;\n    padding: 0px 10px;\n    font-weight: 500;\n  }\n  .medium {\n    width: 200px;\n    height: 40px;\n  }\n  .large {\n    width: 200px;\n    height: 50px;\n    font-weight: 500;\n    font-size: 18px;\n  }\n  .wide {\n    width: 100%;\n    max-width: 260px;\n    height: 32px;\n    line-height: 22px;\n    padding: 0px 10px;\n    font-weight: 500;\n  }\n  button:disabled {\n    background-color: var(--grey-dark);\n    cursor: not-allowed;\n    border: solid 1px var(--grey-dark);\n  }\n</style>\n\n<button\n  class:primary\n  class:secondary\n  class:attention\n  class:error\n  class:warning\n  class:small\n  class:medium\n  class:wide\n  class:large\n  {disabled}\n  on:click|preventDefault>\n  <slot />\n</button>\n",
-    "<script>\n  export let name,\n    label,\n    type,\n    placeholder,\n    validator = () => {};\n</script>\n\n<style>\n  .container {\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.17;\n  }\n\n  label {\n    color: var(--font);\n    margin-bottom: 12px;\n  }\n\n  input {\n    box-sizing: border-box;\n    color: var(--font);\n    font-size: 18px;\n    border-radius: 3px;\n    border: solid 1px var(--grey-medium);\n    padding: 20px;\n    margin: 0;\n    background-color: white;\n  }\n\n  input::placeholder {\n    color: var(--grey-medium);\n  }\n\n  input:focus {\n    box-shadow: 0 4px 16px 0 rgba(57, 60, 68, 0.08);\n  }\n\n  input:disabled {\n    background: var(--grey-medium);\n  }\n</style>\n\n<div class=\"container\">\n  <label for={name}>{label}</label>\n  <input on:change on:input use:validator {type} {name} {placeholder} />\n</div>\n",
-    "<script>\n  import { text_area_resize } from \"../actions/autoresize_textarea.js\";\n  export let name,\n    label,\n    value,\n    placeholder,\n    validator = () => {};\n</script>\n\n<style>\n  .container {\n    display: flex;\n    flex-direction: column;\n    font-size: 18px;\n    font-weight: 500;\n    line-height: 1.17;\n  }\n\n  label {\n    color: var(--font);\n    margin-bottom: 12px;\n  }\n\n  textarea {\n    color: var(--font);\n    font-size: 18px;\n    border-radius: 3px;\n    border: solid 1px var(--grey-medium);\n    padding: 20px;\n    margin: 0;\n  }\n\n  textarea::placeholder {\n    color: var(--grey-dark);\n  }\n\n  textarea:focus {\n    box-shadow: 0 4px 16px 0 rgba(57, 60, 68, 0.08);\n  }\n\n  textarea:disabled {\n    background: var(--grey-medium);\n  }\n</style>\n\n<div class=\"container\">\n  <label for={name}>{label}</label>\n  <textarea bind:value {placeholder} {name} use:text_area_resize />\n</div>\n",
-    "<script>\n  export let href,\n    icon,\n    title,\n    active = false;\n</script>\n\n<style>\n  .nav-item {\n    cursor: pointer;\n    padding: 12px;\n    height: 40px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    box-sizing: border-box;\n    border-radius: 3px;\n  }\n\n  .nav-item:hover {\n    background-color: var(--grey-light);\n  }\n\n  .nav-item-title {\n    font-size: 14px;\n    color: var(--ink);\n    font-weight: 400;\n    margin-left: 12px;\n  }\n\n  .nav-item-icon {\n    color: var(--ink-light);\n  }\n\n  .active {\n    background-color: var(--blue-light);\n  }\n</style>\n\n<a {href} target=\"_blank\" class=\"nav-item\" class:active>\n  {#if icon}\n    <span class=\"nav-item-icon\">\n      <svelte:component this={icon} />\n    </span>\n  {/if}\n  {#if title}\n    <div class=\"nav-item-title\">{title}</div>\n  {/if}\n</a>\n",
-    "<script>\n  export let name,\n    show = false;\n\n  const capitalize = name => name[0].toUpperCase() + name.slice(1);\n</script>\n\n<style>\n  .property-group-container {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    background: var(--grey-light);\n    margin: 0px 0px 4px 0px;\n    padding: 8px 12px;\n    justify-content: center;\n    border-radius: 4px;\n  }\n\n  .property-group-name {\n    cursor: pointer;\n    display: flex;\n    flex-flow: row nowrap;\n  }\n\n  .name {\n    flex: 1;\n    text-align: left;\n    padding-top: 2px;\n    font-size: 14px;\n    font-weight: 500;\n    letter-spacing: 0.14px;\n    color: var(--ink);\n  }\n\n  .icon {\n    flex: 0 0 20px;\n    text-align: center;\n  }\n\n  .property-panel {\n    /* height: 0px;\n    overflow: hidden; */\n    display: none;\n  }\n\n  .show {\n    /* overflow: auto;\n    height: auto; */\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n  }\n</style>\n\n<div class=\"property-group-container\">\n  <div class=\"property-group-name\" on:click={() => (show = !show)}>\n    <div class=\"icon\">\n      <i class={show ? 'ri-arrow-down-s-fill' : 'ri-arrow-right-s-fill'} />\n    </div>\n    <div class=\"name\">{capitalize(name)}</div>\n  </div>\n  <div class=\"property-panel\" class:show>\n    <slot />\n  </div>\n</div>\n",
-    "<script>\n  export let headings;\n  export let value;\n</script>\n\n<style>\n  header {\n    display: grid;\n    grid-gap: 20px;\n    grid-auto-flow: column;\n  }\n\n  span {\n    font-size: 18px;\n    font-weight: bold;\n    color: var(--ink-lighter);\n  }\n\n  span:hover {\n    cursor: pointer;\n  }\n\n  .selected {\n    color: var(--ink);\n  }\n</style>\n\n<section>\n  <header>\n    {#each headings as heading}\n      <span\n        class:selected={value === heading.key}\n        on:click={() => (value = heading.key)}>\n        {heading.title}\n      </span>\n    {/each}\n  </header>\n  <slot />\n</section>\n"
-  ],
-  "names": [],
-  "mappings": "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"
-}