diff --git a/package.json b/package.json
index d9acee7c..208c74a5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "fold-dev",
     "title": "Fold",
-    "version": "0.14.0",
+    "version": "0.15.0",
     "description": "The UI component library for product teams.",
     "workspaces": {
         "packages": [
diff --git a/packages/core/package.json b/packages/core/package.json
index 5373c202..9cdde62f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@fold-dev/core",
     "title": "Fold",
-    "version": "0.14.0",
+    "version": "0.15.0",
     "description": "The UI library for product teams.",
     "main": "dist/index.js",
     "module": "dist/index.js",
diff --git a/packages/core/src/accordion/accordion.tsx b/packages/core/src/accordion/accordion.tsx
index 69c15422..8c2e09a9 100644
--- a/packages/core/src/accordion/accordion.tsx
+++ b/packages/core/src/accordion/accordion.tsx
@@ -61,9 +61,9 @@ export const AccordionItem = (props: AccordionItemProps) => {
     const id = useId()
     const [innerOpen, setInnerOpen] = useState(collapsed)
     const isOpen = uncontrolled ? uncontrolled && innerOpen : open
-    const { heading, panel } = useMemo(() => {
-        return React.Children.toArray(props.children).reduce((acc: any, val: ReactElement) => {
-            switch (val.type) {
+    const { heading, panel } = useMemo<any>(() => {
+        return React.Children.toArray(props.children).reduce((acc, val) => {
+            switch ((val as any).type) {
                 case AccordionHeading:
                     return { ...acc, heading: val }
                 case AccordionPanel:
diff --git a/packages/core/src/alert/alert.tsx b/packages/core/src/alert/alert.tsx
index e0102e85..9e93706e 100644
--- a/packages/core/src/alert/alert.tsx
+++ b/packages/core/src/alert/alert.tsx
@@ -1,9 +1,10 @@
-import React, { useContext } from 'react'
+import React, { ReactPortal, useContext } from 'react'
 import { Button, Heading, IconLib, Modal, ModalClose, Text, useId } from '../'
 import { FoldContext } from '../contexts'
 
 export type AlertOptions = {
     icon?: string
+    portal?: any
     color?: string
     title?: string
     description?: string
@@ -26,11 +27,12 @@ export const Alert = (props: AlertProps) => {
     const { onDismiss, alert } = props
     const titleId = useId()
     const descriptionId = useId()
-    const { icon, color, title, description, button = 'Okay', closeButton } = alert
+    const { portal, icon, color, title, description, button = 'Okay', closeButton } = alert
 
     return (
         <Modal
             borderless
+            portal={portal}
             width={400}
             height="fit-content"
             role="alertdialog"
diff --git a/packages/core/src/attachment/attachment.css b/packages/core/src/attachment/attachment.css
index 85f4673c..6234909c 100644
--- a/packages/core/src/attachment/attachment.css
+++ b/packages/core/src/attachment/attachment.css
@@ -65,6 +65,7 @@
 }
 
 .f-attachment__text {
+    overflow: hidden;
     flex: 1;
     align-items: flex-start;
 }
@@ -79,7 +80,27 @@
     margin-top: -2.5px;
 }
 
+.f-attachment__text-label {
+    max-width: 100%;
+}
+
+.f-attachment__text-label span {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .f-attachment__text-meta {
+    max-width: 100%;
+}
+
+.f-attachment__text-meta span {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--f-color-text-weakest);
 }
diff --git a/packages/core/src/attachment/attachment.tsx b/packages/core/src/attachment/attachment.tsx
index b1804681..4c2b3ec3 100644
--- a/packages/core/src/attachment/attachment.tsx
+++ b/packages/core/src/attachment/attachment.tsx
@@ -254,14 +254,18 @@ export const Attachment = (props: AttachmentProps) => {
                                 size={size}
                                 color="currentColor"
                                 className="f-attachment__text-label">
-                                {label}
+                                <span>
+                                    {label}
+                                </span>
                             </Text>
                             {mime && (
                                 <Text
                                     size="sm"
                                     as="span"
                                     className="f-attachment__text-meta">
-                                    {MIME.DESCRIPTION[mime]}
+                                    <span>
+                                        {MIME.DESCRIPTION[mime]}
+                                    </span>
                                 </Text>
                             )}
                             {filesize && (
diff --git a/packages/core/src/button/button.css b/packages/core/src/button/button.css
index c96924b1..f4d209b3 100644
--- a/packages/core/src/button/button.css
+++ b/packages/core/src/button/button.css
@@ -484,7 +484,7 @@
 }
 
 .f-button.md { 
-    height: var(--f-size-11); 
+    height: var(--f-size-10); 
     padding: 0 var(--f-space-3);
 }
 
diff --git a/packages/core/src/copy/copy.css b/packages/core/src/copy/copy.css
index 7e1502df..0856d76f 100644
--- a/packages/core/src/copy/copy.css
+++ b/packages/core/src/copy/copy.css
@@ -81,7 +81,7 @@
 
 .f-copy.md {
     font-size: var(--f-font-size-md) !important;
-    min-height: var(--f-size-11); 
+    min-height: var(--f-size-10); 
 }
 
 .f-copy.lg {
diff --git a/packages/core/src/drag/drag.css b/packages/core/src/drag/drag.css
index 4011326d..a6925475 100644
--- a/packages/core/src/drag/drag.css
+++ b/packages/core/src/drag/drag.css
@@ -29,6 +29,12 @@
     user-select: all !important; 
 }
 
+.f-drag-area.is-dragging .f-drag-element > *.drag-pe-all,
+.f-drag-area.is-dragging .f-drag-area__element > *.drag-pe-all {
+    pointer-events: all !important; 
+    user-select: all !important; 
+}
+
 /* target groups */
 
 .f-drag-area.is-dragging.no-origin-variant .f-drag-area.is-dragging:not(.no-origin-variant) {
diff --git a/packages/core/src/drag/drag.hook.ts b/packages/core/src/drag/drag.hook.ts
index cbef153f..808f5861 100644
--- a/packages/core/src/drag/drag.hook.ts
+++ b/packages/core/src/drag/drag.hook.ts
@@ -50,10 +50,10 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
         return !!windowObject[FOLD_CUSTOM_GHOST_ELEMENT]
     }
 
-    const startDrag = () => {
+    const startDrag = (data = null) => {
         documentObject.body.dataset.dragging = 'yes'
         globalCursor.add('grabbing')
-        dispatchDragEvent('onstart', null)
+        dispatchDragEvent('onstart', data)
     }
 
     const endDrag = () => {
@@ -171,7 +171,7 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
                         // cache the indentation parameters
                         let targetIndent = indent
                         const previous = el.previousSibling
-                        const next = el.nextSibling
+                        const next = el.nextSibling?.dataset.buffer ? null : el.nextSibling
                         const previousIndent = previous ? +previous.dataset.indent : 0
                         const nextIndent = next ? +next.dataset.indent : 0
 
@@ -207,7 +207,7 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
                             group,
                         }
 
-                        setOrigin({
+                        const origin = {
                             targetVariant: finalTargetVariant,
                             elementId,
                             width,
@@ -215,9 +215,9 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
                             areaId,
                             index,
                             group,
-                        })
+                        }
 
-                        setTarget({
+                        const target: any = {
                             focus: false,
                             moveDirection,
                             index,
@@ -229,9 +229,11 @@ export const useDrag = (args: any = { indentDelay: 100 }) => {
                             areaId,
                             elementId,
                             group,
-                        })
+                        }
 
-                        startDrag()
+                        setOrigin(origin)
+                        setTarget(target)
+                        startDrag({ origin, target })
                     })
                 }
             }, 150)
diff --git a/packages/core/src/drag/drag.util.ts b/packages/core/src/drag/drag.util.ts
index a41a0040..d6b4f2ea 100644
--- a/packages/core/src/drag/drag.util.ts
+++ b/packages/core/src/drag/drag.util.ts
@@ -3,15 +3,13 @@ import { FOLD_DRAG_STATE } from './drag-manager'
 import { FOLD_GHOST_ELEMENT_ROTATION } from './drag.hook'
 
 export const getPreviousNextElements = (targetIndex, targetElement, moveDirection) => {
-    const { origin } = windowObject[FOLD_DRAG_STATE]
-    const originIndex = origin.index
     const parent = targetElement.parentNode
 
     let previous = parent.children[targetIndex - 1]
     let next = parent.children[targetIndex]
 
     if (!!next) {
-        if (moveDirection == 'down' && originIndex == +next.dataset.index) {
+        if (moveDirection == 'down' && windowObject[FOLD_DRAG_STATE].origin.index == +next.dataset.index) {
             next = parent.children[targetIndex + 1]
         }
 
@@ -23,7 +21,11 @@ export const getPreviousNextElements = (targetIndex, targetElement, moveDirectio
     }
 
     if (!!previous) {
-        if (moveDirection == 'up' && originIndex == +previous.dataset.index) {
+        // if it's the same object and the mouse is travelling up, then skip over it
+        if (
+            moveDirection == 'up' 
+            && windowObject[FOLD_DRAG_STATE].origin.index == +previous.dataset.index
+            && windowObject[FOLD_DRAG_STATE].origin.areaId == previous.dataset.areaid) {
             previous = parent.children[targetIndex - 2]
         }
     } else {
diff --git a/packages/core/src/editable/editable.tsx b/packages/core/src/editable/editable.tsx
index 18d01551..4f5266fe 100644
--- a/packages/core/src/editable/editable.tsx
+++ b/packages/core/src/editable/editable.tsx
@@ -1,18 +1,19 @@
 import React, { forwardRef, useLayoutEffect, useRef } from 'react'
 import { View } from '..'
-import { classNames, getKey, mergeRefs, selectElementContents, setCaretToTheEnd } from '../helpers'
+import { classNames, getKey, mergeRefs, selectElementContents, setCaretToTheEnd, stopEvent } from '../helpers'
 import { CoreViewProps } from '../types'
 
 export type EditableProps = {
     selectOnFocus?: boolean
     cursorEnd?: boolean
     disabled?: boolean
+    useDoubleClick?: boolean
     onChange?: any
     onCancel?: any
 } & CoreViewProps
 
 export const Editable = forwardRef((props: EditableProps, ref) => {
-    const { onChange, onCancel, disabled, selectOnFocus, cursorEnd, ...rest } = props
+    const { onChange, onCancel, disabled, selectOnFocus, cursorEnd, useDoubleClick, ...rest } = props
     const elementRef = useRef(null)
     const childRef = useRef(null)
     const cache = useRef('')
@@ -28,20 +29,25 @@ export const Editable = forwardRef((props: EditableProps, ref) => {
         if (onChange) onChange(value)
     }
 
+    // disable drag
+    // TODO: find a better way to handle this
+    const noEvent = (e) => e.stopPropagation()
+
     const deFocus = (target: HTMLElement, type: 'escape' | 'enter' | 'focusout') => {
         target.contentEditable = 'false'
         target.removeAttribute('tabindex')
         target.removeEventListener('keydown', handleKeyDown)
         target.removeEventListener('focusout', handleFocusOut)
+        target.removeEventListener('mousedown', noEvent)
         target.blur()
         keypressCache.current = false
         switch (type) {
             case 'escape':
                 return onCancel ? onCancel(cache.current) : null
             case 'enter':
-                return handleChange(target.innerHTML)
+                return handleChange(target.textContent)
             case 'focusout':
-                return handleChange(target.innerHTML)
+                return handleChange(target.textContent)
         }
     }
 
@@ -92,12 +98,13 @@ export const Editable = forwardRef((props: EditableProps, ref) => {
         el.spellcheck = false
         el.addEventListener('keydown', handleKeyDown)
         el.addEventListener('focusout', handleFocusOut)
-        cache.current = el.innerHTML
+        el.addEventListener('mousedown', noEvent)
+        cache.current = el.textContent
         setTimeout(() => {
             el.focus()
             if (cursorEnd) setCaretToTheEnd(el)
             if (selectOnFocus) selectElementContents(el)
-        }, 150)
+        })
     }
 
     useLayoutEffect(() => {
@@ -108,7 +115,8 @@ export const Editable = forwardRef((props: EditableProps, ref) => {
         <View
             {...rest}
             className={className}
-            onClick={handleClick}
+            onClick={useDoubleClick ? undefined : handleClick}
+            onDoubleClick={useDoubleClick ? handleClick : undefined}
             ref={mergeRefs([elementRef, ref])}>
             {props.children}
         </View>
diff --git a/packages/core/src/helpers/util.ts b/packages/core/src/helpers/util.ts
index 6d5a22a2..34928436 100644
--- a/packages/core/src/helpers/util.ts
+++ b/packages/core/src/helpers/util.ts
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useMemo } from 'react'
 
 export const plural = (number, str) => (number == 1 ? str : str + 's')
 
@@ -304,7 +304,7 @@ export const renderWithProps = (children: any, props: any) => {
     })
 }
 
-export const classNames = (object: any, classes: string[] = []): string => {
+export const classNamesOld = (object: any, classes: string[] = []): string => {
     const classList = classes.filter((c) => !!c)
     const classArray = []
     for (const property in object) {
@@ -314,6 +314,20 @@ export const classNames = (object: any, classes: string[] = []): string => {
     return !!allClasses ? allClasses : null
 }
 
+export const classNames = (object: any, classes: string[] = []): string => {
+    return useMemo(() => {
+        const classList = classes.filter((c) => !!c)
+        const classArray: string[] = []
+
+        for (const property in object) {
+            if (object[property]) classArray.push(property)
+        }
+
+        const allClasses = [...classList, ...classArray].join(' ')
+        return allClasses || ''
+    }, [object, classes])
+}
+
 export const focusElementById = (id: string) => {
     const el: HTMLElement = documentObject.getElementById(id)
     el?.focus()
@@ -570,6 +584,15 @@ export const removeNullProperties = (obj: any) => {
 }
 
 export const timezones = [
+    'Europe/Andorra',
+    'Asia/Dubai',
+    'Asia/Kabul',
+    'Europe/Tirane',
+    'Asia/Yerevan',
+    'Antarctica/Casey',
+    'Antarctica/Davis',
+    'Antarctica/DumontDUrville', // https://bugs.chromium.org/p/chromium/issues/detail?id=928068
+    'Antarctica/Mawson',
     'Antarctica/Palmer',
     'Antarctica/Rothera',
     'Antarctica/Syowa',
@@ -626,6 +649,289 @@ export const timezones = [
     'America/Manaus',
     'America/Eirunepe',
     'America/Rio_Branco',
+    'America/Nassau',
+    'Asia/Thimphu',
+    'Europe/Minsk',
+    'America/Belize',
+    'America/St_Johns',
+    'America/Halifax',
+    'America/Glace_Bay',
+    'America/Moncton',
+    'America/Goose_Bay',
+    'America/Blanc-Sablon',
+    'America/Toronto',
+    'America/Nipigon',
+    'America/Thunder_Bay',
+    'America/Iqaluit',
+    'America/Pangnirtung',
+    'America/Atikokan',
+    'America/Winnipeg',
+    'America/Rainy_River',
+    'America/Resolute',
+    'America/Rankin_Inlet',
+    'America/Regina',
+    'America/Swift_Current',
+    'America/Edmonton',
+    'America/Cambridge_Bay',
+    'America/Yellowknife',
+    'America/Inuvik',
+    'America/Creston',
+    'America/Dawson_Creek',
+    'America/Fort_Nelson',
+    'America/Vancouver',
+    'America/Whitehorse',
+    'America/Dawson',
+    'Indian/Cocos',
+    'Europe/Zurich',
+    'Africa/Abidjan',
+    'Pacific/Rarotonga',
+    'America/Santiago',
+    'America/Punta_Arenas',
+    'Pacific/Easter',
+    'Asia/Shanghai',
+    'Asia/Urumqi',
+    'America/Bogota',
+    'America/Costa_Rica',
+    'America/Havana',
+    'Atlantic/Cape_Verde',
+    'America/Curacao',
+    'Indian/Christmas',
+    'Asia/Nicosia',
+    'Asia/Famagusta',
+    'Europe/Prague',
+    'Europe/Berlin',
+    'Europe/Copenhagen',
+    'America/Santo_Domingo',
+    'Africa/Algiers',
+    'America/Guayaquil',
+    'Pacific/Galapagos',
+    'Europe/Tallinn',
+    'Africa/Cairo',
+    'Africa/El_Aaiun',
+    'Europe/Madrid',
+    'Africa/Ceuta',
+    'Atlantic/Canary',
+    'Europe/Helsinki',
+    'Pacific/Fiji',
+    'Atlantic/Stanley',
+    'Pacific/Chuuk',
+    'Pacific/Pohnpei',
+    'Pacific/Kosrae',
+    'Atlantic/Faroe',
+    'Europe/Paris',
+    'Europe/London',
+    'Asia/Tbilisi',
+    'America/Cayenne',
+    'Africa/Accra',
+    'Europe/Gibraltar',
+    'America/Godthab',
+    'America/Danmarkshavn',
+    'America/Scoresbysund',
+    'America/Thule',
+    'Europe/Athens',
+    'Atlantic/South_Georgia',
+    'America/Guatemala',
+    'Pacific/Guam',
+    'Africa/Bissau',
+    'America/Guyana',
+    'Asia/Hong_Kong',
+    'America/Tegucigalpa',
+    'America/Port-au-Prince',
+    'Europe/Budapest',
+    'Asia/Jakarta',
+    'Asia/Pontianak',
+    'Asia/Makassar',
+    'Asia/Jayapura',
+    'Europe/Dublin',
+    'Asia/Jerusalem',
+    'Asia/Kolkata',
+    'Indian/Chagos',
+    'Asia/Baghdad',
+    'Asia/Tehran',
+    'Atlantic/Reykjavik',
+    'Europe/Rome',
+    'America/Jamaica',
+    'Asia/Amman',
+    'Asia/Tokyo',
+    'Africa/Nairobi',
+    'Asia/Bishkek',
+    'Pacific/Tarawa',
+    'Pacific/Enderbury',
+    'Pacific/Kiritimati',
+    'Asia/Pyongyang',
+    'Asia/Seoul',
+    'Asia/Almaty',
+    'Asia/Qyzylorda',
+    'Asia/Qostanay', // https://bugs.chromium.org/p/chromium/issues/detail?id=928068
+    'Asia/Aqtobe',
+    'Asia/Aqtau',
+    'Asia/Atyrau',
+    'Asia/Oral',
+    'Asia/Beirut',
+    'Asia/Colombo',
+    'Africa/Monrovia',
+    'Europe/Vilnius',
+    'Europe/Luxembourg',
+    'Europe/Riga',
+    'Africa/Tripoli',
+    'Africa/Casablanca',
+    'Europe/Monaco',
+    'Europe/Chisinau',
+    'Pacific/Majuro',
+    'Pacific/Kwajalein',
+    'Asia/Yangon',
+    'Asia/Ulaanbaatar',
+    'Asia/Hovd',
+    'Asia/Choibalsan',
+    'Asia/Macau',
+    'America/Martinique',
+    'Europe/Malta',
+    'Indian/Mauritius',
+    'Indian/Maldives',
+    'America/Mexico_City',
+    'America/Cancun',
+    'America/Merida',
+    'America/Monterrey',
+    'America/Matamoros',
+    'America/Mazatlan',
+    'America/Chihuahua',
+    'America/Ojinaga',
+    'America/Hermosillo',
+    'America/Tijuana',
+    'America/Bahia_Banderas',
+    'Asia/Kuala_Lumpur',
+    'Asia/Kuching',
+    'Africa/Maputo',
+    'Africa/Windhoek',
+    'Pacific/Noumea',
+    'Pacific/Norfolk',
+    'Africa/Lagos',
+    'America/Managua',
+    'Europe/Amsterdam',
+    'Europe/Oslo',
+    'Asia/Kathmandu',
+    'Pacific/Nauru',
+    'Pacific/Niue',
+    'Pacific/Auckland',
+    'Pacific/Chatham',
+    'America/Panama',
+    'America/Lima',
+    'Pacific/Tahiti',
+    'Pacific/Marquesas',
+    'Pacific/Gambier',
+    'Pacific/Port_Moresby',
+    'Pacific/Bougainville',
+    'Asia/Manila',
+    'Asia/Karachi',
+    'Europe/Warsaw',
+    'America/Miquelon',
+    'Pacific/Pitcairn',
+    'America/Puerto_Rico',
+    'Asia/Gaza',
+    'Asia/Hebron',
+    'Europe/Lisbon',
+    'Atlantic/Madeira',
+    'Atlantic/Azores',
+    'Pacific/Palau',
+    'America/Asuncion',
+    'Asia/Qatar',
+    'Indian/Reunion',
+    'Europe/Bucharest',
+    'Europe/Belgrade',
+    'Europe/Kaliningrad',
+    'Europe/Moscow',
+    'Europe/Simferopol',
+    'Europe/Kirov',
+    'Europe/Astrakhan',
+    'Europe/Volgograd',
+    'Europe/Saratov',
+    'Europe/Ulyanovsk',
+    'Europe/Samara',
+    'Asia/Yekaterinburg',
+    'Asia/Omsk',
+    'Asia/Novosibirsk',
+    'Asia/Barnaul',
+    'Asia/Tomsk',
+    'Asia/Novokuznetsk',
+    'Asia/Krasnoyarsk',
+    'Asia/Irkutsk',
+    'Asia/Chita',
+    'Asia/Yakutsk',
+    'Asia/Khandyga',
+    'Asia/Vladivostok',
+    'Asia/Ust-Nera',
+    'Asia/Magadan',
+    'Asia/Sakhalin',
+    'Asia/Srednekolymsk',
+    'Asia/Kamchatka',
+    'Asia/Anadyr',
+    'Asia/Riyadh',
+    'Pacific/Guadalcanal',
+    'Indian/Mahe',
+    'Africa/Khartoum',
+    'Europe/Stockholm',
+    'Asia/Singapore',
+    'America/Paramaribo',
+    'Africa/Juba',
+    'Africa/Sao_Tome',
+    'America/El_Salvador',
+    'Asia/Damascus',
+    'America/Grand_Turk',
+    'Africa/Ndjamena',
+    'Indian/Kerguelen',
+    'Asia/Bangkok',
+    'Asia/Dushanbe',
+    'Pacific/Fakaofo',
+    'Asia/Dili',
+    'Asia/Ashgabat',
+    'Africa/Tunis',
+    'Pacific/Tongatapu',
+    'Europe/Istanbul',
+    'America/Port_of_Spain',
+    'Pacific/Funafuti',
+    'Asia/Taipei',
+    'Europe/Kiev',
+    'Europe/Uzhgorod',
+    'Europe/Zaporozhye',
+    'Pacific/Wake',
+    'America/New_York',
+    'America/Detroit',
+    'America/Kentucky/Louisville',
+    'America/Kentucky/Monticello',
+    'America/Indiana/Indianapolis',
+    'America/Indiana/Vincennes',
+    'America/Indiana/Winamac',
+    'America/Indiana/Marengo',
+    'America/Indiana/Petersburg',
+    'America/Indiana/Vevay',
+    'America/Chicago',
+    'America/Indiana/Tell_City',
+    'America/Indiana/Knox',
+    'America/Menominee',
+    'America/North_Dakota/Center',
+    'America/North_Dakota/New_Salem',
+    'America/North_Dakota/Beulah',
+    'America/Denver',
+    'America/Boise',
+    'America/Phoenix',
+    'America/Los_Angeles',
+    'America/Anchorage',
+    'America/Juneau',
+    'America/Sitka',
+    'America/Metlakatla',
+    'America/Yakutat',
+    'America/Nome',
+    'America/Adak',
+    'Pacific/Honolulu',
+    'America/Montevideo',
+    'Asia/Samarkand',
+    'Asia/Tashkent',
+    'America/Caracas',
+    'Asia/Ho_Chi_Minh',
+    'Pacific/Efate',
+    'Pacific/Wallis',
+    'Pacific/Apia',
+    'Africa/Johannesburg',
 ]
 
 export const waitForRender = (cb, t = 0) => setTimeout(cb, t)
@@ -635,11 +941,13 @@ export const setCaretToTheEnd = (element) => {
     const [childNode] = element.childNodes
     const range = documentObject.createRange()
     const selection = windowObject.getSelection()
-    range.setStart(childNode, position)
-    range.setEnd(childNode, position)
-    range.collapse(true)
-    selection.removeAllRanges()
-    selection.addRange(range)
+    if (!!range && !!selection) {
+        range.setStart(childNode, position)
+        range.setEnd(childNode, position)
+        range.collapse(true)
+        selection.removeAllRanges()
+        selection.addRange(range)
+    }
 }
 
 export const selectElementContents = (el) => {
diff --git a/packages/core/src/hooks/focus.hook.ts b/packages/core/src/hooks/focus.hook.ts
index e6cac929..d603e74f 100644
--- a/packages/core/src/hooks/focus.hook.ts
+++ b/packages/core/src/hooks/focus.hook.ts
@@ -46,11 +46,13 @@ export const useFocus = (focusable = FOCUSABLE, arrowNavigation = false) => {
     const trapFocus = (el, preventScroll = false) => {
         shouldPreventScroll.current = preventScroll
         containerRef.current = el
-        focusableEls.current = containerRef.current.querySelectorAll(focusable.join(','))
-        lastFocusableEl.current = focusableEls.current[focusableEls.current.length - 1]
-        firstFocusableEl.current = focusableEls.current[0]
-        firstFocusableEl.current?.focus({ preventScroll })
-        containerRef.current.addEventListener('keydown', handleKeyDown)
+        focusableEls.current = containerRef.current?.querySelectorAll(focusable.join(','))
+        if (focusableEls.current) {
+            lastFocusableEl.current = focusableEls.current[focusableEls.current.length - 1]
+            firstFocusableEl.current = focusableEls.current[0]
+            firstFocusableEl.current?.focus({ preventScroll })
+            containerRef.current.addEventListener('keydown', handleKeyDown)
+        }
     }
 
     useEffect(() => {
diff --git a/packages/core/src/input/input.css b/packages/core/src/input/input.css
index 4023e28b..a69834ee 100644
--- a/packages/core/src/input/input.css
+++ b/packages/core/src/input/input.css
@@ -146,7 +146,7 @@ input.f-input:not([type="color"]).sm {
 
 input.f-input:not([type="color"]).md {
     font-size: var(--f-font-size-md);
-    height: var(--f-size-11); 
+    height: var(--f-size-10); 
 }
 
 input.f-input:not([type="color"]).lg {
@@ -171,7 +171,7 @@ input.f-input:not([type="color"]).xl {
 }
 
 .f-input-control input.f-input:not([type="color"]).md {
-    height: calc(var(--f-size-11) - var(--f-input-border-width));
+    height: calc(var(--f-size-10) - var(--f-input-border-width));
 }
 
 .f-input-control input.f-input:not([type="color"]).lg {
@@ -366,7 +366,7 @@ input.f-input[type=color].xl {
 
 .f-tag-input.md {
     font-size: var(--f-font-size-md);
-    min-height: var(--f-size-11); 
+    min-height: var(--f-size-10); 
 }
 
 .f-tag-input.lg {
@@ -408,7 +408,7 @@ input.f-input[type=color].xl {
 }
 
 .f-input-number-control.md {
-    height: var(--f-size-11);
+    height: var(--f-size-10);
 }
 
 .f-input-number-control.lg {
diff --git a/packages/core/src/modal/modal.tsx b/packages/core/src/modal/modal.tsx
index b49e0d98..b9a415c8 100644
--- a/packages/core/src/modal/modal.tsx
+++ b/packages/core/src/modal/modal.tsx
@@ -70,6 +70,15 @@ export const Modal = forwardRef((props: ModalProps, ref) => {
     } = props
     const contentRef: any = useRef()
     const { trapFocus } = useFocus()
+    const className = classNames(
+        {
+            'f-modal__inner': true,
+            'f-col': true,
+            'is-borderless': borderless,
+            'no-overlay': noOverlay,
+        },
+        [props.className, getActionClass(anchor)]
+    )
 
     const handleKeyDown = (e) => {
         const { isEscape } = getKey(e)
@@ -100,15 +109,6 @@ export const Modal = forwardRef((props: ModalProps, ref) => {
 
     const renderModal = () => {
         const classNameOverlay = 'f-modal f-row' + (noOverlay ? ' no-overlay' : '')
-        const className = classNames(
-            {
-                'f-modal__inner': true,
-                'f-col': true,
-                'is-borderless': borderless,
-                'no-overlay': noOverlay,
-            },
-            [props.className, getActionClass(anchor)]
-        )
 
         return (
             <div
diff --git a/packages/core/src/option/option.css b/packages/core/src/option/option.css
index 0323b3d9..77f2edc6 100644
--- a/packages/core/src/option/option.css
+++ b/packages/core/src/option/option.css
@@ -120,7 +120,7 @@
 }
 
 .f-options.md {
-    height: var(--f-size-11); 
+    height: var(--f-size-10); 
 }
 
 .f-options.lg {
diff --git a/packages/core/src/select/select.tsx b/packages/core/src/select/select.tsx
index 67bdd265..a6ecc5ed 100644
--- a/packages/core/src/select/select.tsx
+++ b/packages/core/src/select/select.tsx
@@ -20,6 +20,7 @@ import {
 } from '../'
 import {
     classNames,
+    classNamesOld,
     documentObject,
     executeLast,
     focusElement,
@@ -506,7 +507,7 @@ export const SelectList = forwardRef((props: SelectListProps, ref) => {
                 {isDefault && (
                     <>
                         {options.map((option: SelectOption, index: number) => {
-                            const className = classNames({
+                            const className = classNamesOld({
                                 'f-select-list-option-container': true,
                                 'is-focused': cursor == index,
                             })
@@ -539,7 +540,7 @@ export const SelectList = forwardRef((props: SelectListProps, ref) => {
                         numItems={options.length}
                         render={({ index, style }) => {
                             const option: SelectOption = options[index]
-                            const className = classNames({
+                            const className = classNamesOld({
                                 'f-select-list-option-container': true,
                                 'is-focused': cursor == index,
                             })
diff --git a/packages/core/src/skeleton/skeleton.css b/packages/core/src/skeleton/skeleton.css
index d853dfb6..46120cc4 100644
--- a/packages/core/src/skeleton/skeleton.css
+++ b/packages/core/src/skeleton/skeleton.css
@@ -21,6 +21,10 @@
     border-radius: var(--f-skeleton-border-radius);
 }
 
+.f-skeleton .f-avatar img { 
+    display: none;
+}
+
 .f-skeleton-circle { border-radius: 50%; }
 
 @keyframes f-skeleton-color {
diff --git a/packages/design/package.json b/packages/design/package.json
index 4156cddd..cf330065 100644
--- a/packages/design/package.json
+++ b/packages/design/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@fold-dev/design",
     "title": "Design Tokens",
-    "version": "0.14.0",
+    "version": "0.15.0",
     "description": "The UI library for product teams.",
     "main": "",
     "module": "",
diff --git a/packages/design/tokens/color.json b/packages/design/tokens/color.json
index 535ae6a7..073ac94a 100644
--- a/packages/design/tokens/color.json
+++ b/packages/design/tokens/color.json
@@ -15,7 +15,7 @@
             "700": { "value": "#0052AC" },
             "800": { "value": "#003C7E" },
             "900": { "value": "#002C5C" },
-            "950": { "value": "#002252" }
+            "950": { "value": "#001732" }
         },
 
         "base": {